H-ui front end framework


Fillets and background gradient browsers, such as IE series, are not supported and display flat solid color right angle effects.

HTML code

<input class="btn btn-default" type="button" value="default">
<input class="btn btn-default radius" type="button" value="Fillet effect">
<input class="btn btn-default round" type="button" value="Ellipse effect">
<input class="btn btn-primary radius" type="button" value="main">
<input class="btn radius btn-secondary" type="button" value="secondary">
<input class="btn btn-success radius" type="button" value="Success">
<input class="btn radius btn-warning" type="button" value="warning">
<input class="btn btn-danger radius" type="button" value="DANGER">
<input class="btn btn-link radius" type="button" value="link">
<input class="btn disabled radius" type="button" value="Prohibit">

<input class="btn btn-primary size-XL radius" type="button" value="Super button">
<input class="btn btn-primary size-L radius" type="button" value="Big button">
<input class="btn btn-primary size-M radius" type="button" value="Default size">
<input class="btn btn-primary size-S radius" type="button" value="Small button">
<input class="btn btn-primary size-MINI radius" type="button" value="Mini button">


1. Basic table style

class description Table style
.table Default style
.table-border Horizontal line
.table-bg th With background
.table -bordered Outer border
.radius fillet
.table-striped Odd lines with light gray background

2. Table data style

class description Data row style
.ative                                      Hovering in line
.success Successful or positive
.warning Warning or error
.danger DANGER

HTML code

<table class="table table-border table-bg table-bordered">
    <tr><th width="20%">Class</th><th>describe</th></tr>
    <tr class="active"><th>.active</th><td>Hovering in line</td></tr>
    <tr class="success"><th>.success</th><td>Successful or positive</td></tr>
    <tr class="warning"><th>.warning</th><td>Warning or error</td></tr>
    <tr class="danger"><th>.danger</th><td>DANGER</td></tr>


1. text box

size class
Mini size input-text radius size-MINI
Small size input-text radius size-S
Default size input-text radius size-M
Large size input-text radius size-L
Extra large size input-text radius size-XL

2.radio, checkbox (encapsulated)

HTML code

<div class="skin-minimal">
  <div class="check-box">
    <input type="checkbox" id="checkbox-1">
    <label for="checkbox-1">check box</label>
  <div class="check-box">
    <input type="checkbox" id="checkbox-2" checked>
    <label for="checkbox-2">check box checked state</label>
  <div class="check-box">
    <input type="checkbox" id="checkbox-disabled" disabled>
    <label for="checkbox-disabled">Disabled</label>
  <div class="check-box">
    <input type="checkbox" id="checkbox-disabled-checked" checked disabled>
    <label for="checkbox-disabled-checked">Disabled &amp; checked</label>
<div class="mt-20 skin-minimal">
  <div class="radio-box">
    <input type="radio" id="radio-1" name="demo-radio1">
    <label for="radio-1">radio button</label>
  <div class="radio-box">
    <input type="radio" id="radio-2" name="demo-radio1" checked>
    <label for="radio-2">radio button checked state</label>
  <div class="radio-box">
    <input type="radio" id="radio-disabled" disabled>
    <label for="radio-disabled">Disabled</label>
  <div class="radio-box">
    <input type="radio" id="radio-disabled-checked" checked disabled>
    <label for="radio-disabled-checked">Disabled &amp; checked</label>


HTML code

<span class="select-box">
  <select class="select" size="1" name="demo1">
    <option value="" selected>default select</option>
    <option value="1">Menu 1</option>
    <option value="2">Menu two</option>
    <option value="3">Menu three</option>

Tags: Front-end IE

Posted on Wed, 12 Feb 2020 08:52:33 -0800 by jcornett