How to Use CSS Naming Rules Basic Styles Components
Elements
Button Input Radio&Checkbox On-off Select Datetimepicker Dropdown
Layout
Grid Form
Data Display
Tab Table Pagination Badge Process
Feedback
Dialog Message Tooltip PopConfirm Loader
Other
Breadcrumb SideNav
I18N

Basic styles

Global styles

The global box model isbox-sizing: border-box. The default font size is14px and the default line height is1.5.

Link

Google   Baidu   Sina   

	<a href="https://www.google.com">Google</a>
	<a href="https://www.baidu.com">Baidu</a>
	<a href="https://www.sina.com.cn">Sina</a>

h1~h6

h1 This is a title

h2 This is a title

h3 This is a title

h4 This is a title

h5 This is a title
h6 This is a title

	<h1>h1 This is a title</h1>
	<h2>h2 This is a title</h2>
	<h3>h3 This is a title</h3>
	<h4>h4 This is a title</h4>
	<h5>h5 This is a title</h5>
	<h6>h6 This is a title</h6>

Text

Font size

You can use class.font12~.font36to render12px~36pxfonts。

Text color
primary  green  red  teal  yellow  purple  

	<span class="text-primary">primary</span>
	<span class="text-green">green</span>
	<span class="text-red">red</span>
	<span class="text-teal">teal</span> 
	<span class="text-yellow">yellow</span> 
	<span class="text-purple">purple</span> 
Text truncate

I'm truncated.

    <p class="truncate">I'm truncated.</p>

Background colors

bg-primary
bg-green
bg-red
bg-teal
bg-yellow
bg-purple

	<div class="bg-primary">bg-primary</div>
	<div class="bg-green">bg-green</div>
	<div class="bg-red">bg-red</div>
	<div class="bg-teal">bg-teal</div>
	<div class="bg-yellow">bg-yellow</div>
	<div class="bg-purple">bg-purple</div>

Floating

Use.fland.frto display floating effect.

Use.clearfixto clear floating.


Float left
Float right

	<div class="clearfix">
	    <div class="fl">Float left</div>
	    <div class="fr">Float right</div>
	</div>

Icon

Zero-UI doesn't include icons itself. However, Zero-UI uses font-awesome as icon fonts.

You can change the icon's color by adding color classes.


           

            

	<i class="fa fa-cloud"></i>
	<i class="fa fa-bank"></i>
	<i class="fa fa-check green"></i>
	<i class="fa fa-close red"></i> 

	<i class="fa fa-cloud font18"></i>
	<i class="fa fa-bank font18"></i>
	<i class="fa fa-check green font18"></i>
	<i class="fa fa-close red font18"></i>