ZUI的入门使用

2019独角兽企业重金招聘Python工程师标准>>>

###1 基本模版 （ZUI是基于bootstarp进程改造的 所以一些解释 可以参考bootstarp）

	
	 
    
	
		
	
	
	
	


	
hellow world!
	
小小小施爷  你好！

2 布局容器

	
	
    
	
		
	
	
	
	


	

		container
	
	
	
container-fluid
	
	
container-fixed
	
 .container-fixed-md
	
.container-fixed-sm
	
.container-fixed-xs

3 浏览器版本过低提示

	
	 
    
	
		
	
	
	
	


	
hellow world!
	
小小小施爷  你好！
	
	
		

3 基础使用

	
	
    
	
		
	
	
	
	


	

		container
	
	
	
container-fluid
	
	
container-fixed
	
 .container-fixed-md
	
.container-fixed-sm
	
.container-fixed-xs
	
	 
---------------文本颜色----------------

	 
.text-muted 灰色  .hl-default 背景色
	 
.text-gray 灰色  .hl-gray 背景色
	 
	 
.text-primary 蓝色  .hl-primary 背景色
	 
	 
.text-danger 橘红色  .hl-danger 背景色
	 
.text-red 橘红色  .hl-danger  背景色
	 
	 
.text-success 绿色  .hl-success 背景色
	 
.text-green 绿色  .hl-green  背景色
	 
	 
.text-warning 橘黄色 .hl-warning 背景色
	 
.text-yellow 橘黄色   .hl-yellow  背景色
	 
	 
.text-info 蓝色  .hl-info  背景色
	 
.text-blue 蓝色 .hl-blue  背景色
	 
	 
.text-important 棕色  .hl-important 背景色
	 
.text-brown 棕色  hl-borwn 背景色
	 
	 
.text-special 紫色 .hl-special  背景色
	 
.text-purple 紫色  .hl-purple  背景色
	 
	 -----------------文本背景颜色---------------
	 
.bg-default 黑色
	 
.bg-black 黑色  with-padding内容边距
	 
	 
.bg-primary 蓝色
	 
	 
.bg-danger  橘红色
	 
.bg-red  橘红色   with-padding 内容边距
	 
	 
.bg-success 绿色
	 
.bg-green 绿色  with-padding内容边距
	 
	 
.bg-warning 橘黄色
	 
.bg-yellow 橘黄色   with-padding内容边距
	 
	 
.bg-important 棕色  
	 
.bg-brown 棕色  .with-padding内容边距
	 
	 
 .bg-special 紫色
	 
.bg-purple 紫色  .with-padding内容边距
	 
	 
禁止文本换行超出的部分会被截断 .text-nowrap  or .text-nobr禁止文本换行 .text-nowrap  or .text-nobr禁止文本换行 .text-nowrap  or .text-nobr禁止文本换行 .text-nowrap  or .text-nobr禁止文本换行 .text-nowrap  or .text-nobr禁止文本换行 .text-nowrap  or .text-nobr禁止文本换行 .text-nowrap  or .text-nobr禁止文本换行 .text-nowrap  or .text-nobr禁止文本换行 .text-nowrap  or .text-nobr禁止文本换行 .text-nowrap  or .text-nobr禁止文本换行 .text-nowrap  or .text-nobr禁止文本换行 .text-nowrap  or .text-nobr禁止文本换行 .text-nowrap  or .text-nobr禁止文本换行 .text-nowrap  or .text-nobr
	 
使所有文本在一行显示。超出的部分会被截断，并且在文本末尾添加省略号。使用.text-ellipsis。使所有文本在一行显示。超出的部分会被截断，并且在文本末尾添加省略号。使用.text-ellipsis。
	 
	 --------------------关闭按钮---------------------

	  × close
	 
	 ×Close
	 
	 
----------------浮动---------------

	 
.pull-left
	 
.center-block居中显示
	 
.pull-right
	 
	 
	 
-------------------------------隐藏文本---------------------

	 
.text-hide此处文本不会显示
虽然文本不会显示 但是依然占据位置(对布局有影响)....
	 
	 
 测试 :.hidden 和 .showing具备更高的优先级，防止其他规则重写。.invisible 仅仅隐藏元素，但元素内容所占的空间并不会清除。

4 ZUI控件

	
	
    
	
		
	
	
	
	


	------------图标---------------

	开始
	锁
	等宽图标
	icon icon-heart
	icon icon-resize-v
	icon icon-film
	
	
----------图标大小------------

	

	icon-2x

	icon-3x

	icon-4x

	
	
----------图标旋转------------

	.icon-ratate-90
	.icon-ratate-180
	.icon-ratate-270
	.icon icon-flag icon-flip-horizontal
	.icon-flip-vertical
	
	
----------图标旋转动画------------

	icon icon-spin icon-circle-o-notch
	 icon icon-spin icon-spinner-indicator 
	 icon icon-spin icon-circle-o-notch 
	icon icon-spin icon-cog
	icon icon-spin icon-spinner
	
	
	 
----------按钮------------

	 主要按钮
	 a 按钮
	 标准按钮
	 连接按钮
	 

	 	按钮组
	 	第二个
	 	第三个
	 
	 

	 大尺寸按钮
	 标准尺寸
	 小尺寸按钮
	 迷你按钮
	 块状按钮
	 
	 带图标的按钮
	 
	 状态切换按钮
状态切换按钮提供一个类似复选框的机制，当点击后切换为选中状态（为按钮增加Class .active），再次点击取消选中状态
	
	

		
			多选1
		
		
			多选2
		
		
			多选3
		
	

	加载状态
	
	 禁用的按钮
	
	
	
	
-------------颜色---------------

	基本
	主要
	信息
	成功
	警告
	危险
	
	
-------------进度条---------------

	

		

			40% complete(success)
		
	
	
	

	  

	    40% Complete (success)
	  
	
	
	

	  

	    35% Complete (success)
	  
	  

	    20% Complete (warning)
	  
	  

	    10% Complete (danger)
	  
	
	
	
------------------标签 label ------------------

	标签
	主要primary
	success
	warning
	danger
	
徽标 label-badge

	defaule
	primary
	success
	warning
	danger
	
小圆点图标 label-dot 

	default
	primary
	success
	info
	warning
	danger
	
	
按钮中的徽标

	我的消息12
	我的消息12
	
	联系人12 
	联系人12
	联系人12
	联系人12
	联系人12
	联系人12
	


	
--------------表单控件------------------

	
	
	
	
 	
 	
 	
 	
 	
 	
 	
 	
 	
 	
 		请选择一种水果
 		苹果
 		香蕉
 		桔子
 	
 	
 	
 	
	

		
	
	

		
	
	

		
	
	
	
	
	

	--------------------------------1.16--------------------------
	
	
--------------单选和复选框----------------

	复选框1
	复选框2
	复选框3
	

		
			点击文字也可以被选中
		
	
	
	

		
			复选框4(文字也被禁用)
		
	

	

		
			单选框1
		
	
	

		
			单选框2
		
	
	

		
			被禁用的单选框狂
		
	
	
	
在一行显示  check-inline/radio-inline

	
		 多选框1
	
	
		多选框2
	
	
		多选框3(禁用)
	
	

	
		单选框1
	
	
		单选框2
	
	
		单选框3(禁用)
	
	
	
	
---------------开关 (switch)----------------

	

		
		夜间模式
	
	
使用 .text-left 或 .text-right 来更改文字对齐方向。

	

		
		夜间模式
	
	

		
		夜间模式
	
	
为 .switch 添加 .disabled 类，或者为 input 添加 [disabled] 属性。

	

		
		夜间模式
	
	

		
		夜间模式
	
	
	
---------面包屑---------

	

		
 首页
		
目录
		
存档
	
	
	
-----------图片------------

	
圆角图片

	
	
圆形图片

	
	
缩略图

	
	
响应式图片

	
	
	
-----------------多级标题-----------------

	
一级标题26px  副标题
	
二级标题20px  副标题
	
三级标题16px  副标题
	
四级标题14px  副标题
	
五级标题13px  副标题
	
六级标题12px  副标题
	
	
带底部水平分隔线的标题(.header-dividing or .page-header)

	
 一级标题 使用 .header-dividing
	

		
使用二级标题 使用 .page-header
	
	
	
----------------分割线hr---------------

	

	
	
------------------滚动条(.scrollbar-hover在鼠标停留上面时才出现滚动条)---------------------

	

		
鼠标悬停此区域才显示滚动条
			一些文字
			更多的文字
			更多的文字
			更多的文字
			长段落文本，
			长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本，长段落文本。
			较宽的内容。
		
	

转载于:https://my.oschina.net/u/3677987/blog/1607056