专栏首页OSChinaZUI的入门使用

ZUI的入门使用

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	 <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../css/zui.min.css">
	<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>	
	<script type="text/javascript" src="../js/zui.min.js"></script>
	<title>第一个ZUI</title>
	
	<style type="text/css">
		div{
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div class="container">hellow world!</div>
	<h1>小小小施爷  你好!</h1>
</body>
</html>

2 布局容器

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../css/zui.min.css">
	<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>	
	<script type="text/javascript" src="../js/zui.min.js"></script>
	<title>ZUI 布局容器</title>
	
	<style type="text/css">
		div{
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div class="container">
		container
	</div>
	
	<div class="container-fluid">container-fluid</div>
	
	<div class="container-fixed">container-fixed</div>
	<div class="container-fixed-md"> .container-fixed-md</div>
	<div class="container-fixed-sm">.container-fixed-sm</div>
	<div class="container-fixed-xs">.container-fixed-xs</div>
</body>
</html>

3 浏览器版本过低提示

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	 <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../css/zui.min.css">
	<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>	
	<script type="text/javascript" src="../js/zui.min.js"></script>
	<title>第一个ZUI</title>
	
	<style type="text/css">
		div{
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div class="container">hellow world!</div>
	<h1>小小小施爷  你好!</h1>
	
	<script type="text/javascript">
		
		$(function(){
			//alert($.zui.browser.ie);
			
			alert($.zui.browser.isIE(8));
			$.zui.browser.tip('哇~~~你的浏览器版本也太低了,快快升级吧!');
		});
	</script>
		
</body>
</html>

3 基础使用

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../css/zui.min.css">
	<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>	
	<script type="text/javascript" src="../js/zui.min.js"></script>
	<title>ZUI 布局容器  及 基础使用</title>
	
	<style type="text/css">
		div{
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div class="container">
		container
	</div>
	
	<div class="container-fluid">container-fluid</div>
	
	<div class="container-fixed">container-fixed</div>
	<div class="container-fixed-md"> .container-fixed-md</div>
	<div class="container-fixed-sm">.container-fixed-sm</div>
	<div class="container-fixed-xs">.container-fixed-xs</div>
	
	 <br>---------------文本颜色----------------<br>
	 <p class="text-muted hl-default ">.text-muted 灰色  .hl-default 背景色</p>
	 <p class="text-gray hl-gray">.text-gray 灰色  .hl-gray 背景色</p>
	 
	 <p class="text-primary hl-primary">.text-primary 蓝色  .hl-primary 背景色</p>
	 
	 <p class="text-danger hl-danger">.text-danger 橘红色  .hl-danger 背景色</p>
	 <p class="text-red hl-danger">.text-red 橘红色  .hl-danger  背景色</p>
	 
	 <p class="text-success hl-success">.text-success 绿色  .hl-success 背景色</p>
	 <p class="text-green hl-green">.text-green 绿色  .hl-green  背景色</p>
	 
	 <p class="text-warning hl-warning">.text-warning 橘黄色 .hl-warning 背景色</p>
	 <p class="text-yellow hl-yellow">.text-yellow 橘黄色   .hl-yellow  背景色</p>
	 
	 <p class="text-info hl-info">.text-info 蓝色  .hl-info  背景色</p>
	 <p class="text-blue hl-blue">.text-blue 蓝色 .hl-blue  背景色</p>
	 
	 <p class="text-important  hl-important">.text-important 棕色  .hl-important 背景色</p>
	 <p class="text-brown  hl-brown">.text-brown 棕色  hl-borwn 背景色</p>
	 
	 <p class="text-special  hl-special">.text-special 紫色 .hl-special  背景色</p>
	 <p class="text-purple  hl-purple">.text-purple 紫色  .hl-purple  背景色</p>
	 
	 -----------------文本背景颜色---------------
	 <p class="bg-default">.bg-default 黑色</p>
	 <p class="bg-black  with-padding">.bg-black 黑色  with-padding内容边距</p>
	 
	 <p class="bg-primary">.bg-primary 蓝色</p>
	 
	 <p class="bg-danger">.bg-danger  橘红色</p>
	 <p class="bg-red with-padding">.bg-red  橘红色   with-padding 内容边距</p>
	 
	 <p class="bg-success">.bg-success 绿色</p>
	 <p class="bg-green with-padding">.bg-green 绿色  with-padding内容边距</p>
	 
	 <p class="bg-warning">.bg-warning 橘黄色</p>
	 <p class="bg-yellow with-padding">.bg-yellow 橘黄色   with-padding内容边距</p>
	 
	 <p class="bg-important">.bg-important 棕色  </p>
	 <p class="bg-brown with-padding">.bg-brown 棕色  .with-padding内容边距</p>
	 
	 <p class="bg-special"> .bg-special 紫色</p>
	 <p class="bg-purple with-padding">.bg-purple 紫色  .with-padding内容边距</p>
	 
	 <h2 class="text-nowrap">禁止文本换行超出的部分会被截断 .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</h2>
	 <h2 class="text-ellipsis">使所有文本在一行显示。超出的部分会被截断,并且在文本末尾添加省略号。使用.text-ellipsis。使所有文本在一行显示。超出的部分会被截断,并且在文本末尾添加省略号。使用.text-ellipsis。</h2>
	 
	 --------------------关闭按钮---------------------<br>
	 <button type="button" close="close"><span aria-hidden="true"> × </span><span class="sr-only">close</span></button>
	 
	 <button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
	 
	 <br>----------------浮动---------------<br>
	 <div class="pull-left">.pull-left</div>
	 <div class="center-block" style="width:200px;">.center-block居中显示</div>
	 <div class="pull-right">.pull-right</div>
	 
	 
	 <br>-------------------------------隐藏文本---------------------<br>
	 <h1 class="text-hide">.text-hide此处文本不会显示</h1>虽然文本不会显示 但是依然占据位置(对布局有影响)....
	 
	 <div class="hidden" style="display:block;"> 测试 :.hidden 和 .showing具备更高的优先级,防止其他规则重写。.invisible 仅仅隐藏元素,但元素内容所占的空间并不会清除。</div>



</body>
</html>

4 ZUI控件

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../css/zui.min.css">
	<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>	
	<script type="text/javascript" src="../js/zui.min.js"></script>
	<title>ZUI 控件 </title>
	
	<style type="text/css">
		div{
			border: 1px solid red;
		}
	</style>
</head>
<body>
	------------图标---------------<br>
	<i class="icon icon-star">开始</i>
	<span class="icon-unlock-alt">锁</span>
	<i class="icon icon-flag">等宽图标</i>
	<i class="icon icon-heart">icon icon-heart</i>
	<i class="icon icon-resize-v">icon icon-resize-v</i>
	<i class="icon icon-film">icon icon-film</i>
	
	<br>----------图标大小------------<br>
	<br>
	<i class="icon icon-star icon-2x">icon-2x</i><br>
	<i class="icon icon-star icon-3x">icon-3x</i><br>
	<i class="icon icon-star icon-4x">icon-4x</i><br>
	
	<br>----------图标旋转------------<br>
	<i class="icon icon-flag icon-rotate-90">.icon-ratate-90</i>
	<i class="icon icon-flag icon-rotate-180">.icon-ratate-180</i>
	<i class="icon icon-flag icon-rotate-270">.icon-ratate-270</i>
	<i class="icon icon-flag icon-flip-horizontal">.icon icon-flag icon-flip-horizontal</i>
	<i class="icon icon-flag icon-flip-vertical">.icon-flip-vertical</i>
	
	<br>----------图标旋转动画------------<br>
	<i class="icon icon-spin icon-spinner-snake"></i>icon icon-spin icon-circle-o-notch
	<i class="icon icon-spin icon-spinner-indicator"></i> icon icon-spin icon-spinner-indicator 
	<i class="icon icon-spin icon-circle-o-notch"></i> icon icon-spin icon-circle-o-notch 
	<i class="icon icon-spin icon-cog"></i>icon icon-spin icon-cog
	<i class="icon icon-spin icon-spinner icon-2x"></i>icon icon-spin icon-spinner
	
	
	 <br>----------按钮------------<br>
	 <button class="btn btn-primary" type="button">主要按钮</button>
	 <a class="btn btn-primary" href="#">a 按钮</a>
	 <button class="btn" type="button">标准按钮</button>
	 <button class="btn btn-link" type="button">连接按钮</button>
	 <div class="btn-group">
	 	<button class="btn">按钮组</button>
	 	<button class="btn">第二个</button>
	 	<button class="btn">第三个</button>
	 </div>
	 <br>
	 <button class="btn btn-lg" type="button">大尺寸按钮</button>
	 <button class="btn ">标准尺寸</button>
	 <button class="btn btn-sm">小尺寸按钮</button>
	 <button class="btn btn-mini">迷你按钮</button>
	 <button class="btn btn-block">块状按钮</button>
	 
	 <button class="btn btn-primary"><i class="icon icon-star"></i>带图标的按钮</button>
	 
	 <button data-toggle="button" class="btn" type="button">状态切换按钮</button>
状态切换按钮提供一个类似复选框的机制,当点击后切换为选中状态(为按钮增加Class .active),再次点击取消选中状态
	
	<div class="btn-group" data-toggle="buttons">
		<label class="btn active">
			<input type="checkbox" checked>多选1
		</label>
		<label class="btn ">
			<input type="checkbox">多选2
		</label>
		<label class="btn">
			<input type="checkbox">多选3
		</label>
	</div>

	<button id="ladingBtnExample" type="button" class="btn btn-primary" data-loading-text="正在加载...">加载状态</button>
	<script type="text/javascript">
		$(function(){
			$('#loadingBtnExample').on('click', function() {
				debugger
				var $btn = $(this);
				$btn.button('loading');
	
				// 此处使用 setTimeout 来模拟你的复杂功能逻辑
				setTimeout(function(){
				    $btn.button('reset');
				}, 2000);
			});
		});
	</script>
	<a disabled herf="#" class="btn disabled"> 禁用的按钮</a>
	
	
	
	<br>-------------颜色---------------<br>
	<button class="btn">基本</button>
	<button class="btn btn-primary">主要</button>
	<button class="btn btn-info">信息</button>
	<button class="btn btn-success">成功</button>
	<button class="btn btn-warning">警告</button>
	<button class="btn btn-danger">危险</button>
	
	<br>-------------进度条---------------<br>
	<div class="progress">
		<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:50%">
			<span class="sr-only">40% complete(success)</span>
		</div>
	</div>
	<!-- 动画效果 -->
	<div class="progress progress-striped active">
	  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
	    <span class="sr-only">40% Complete (success)</span>
	  </div>
	</div>
	<!-- 堆叠效果 -->
	<div class="progress">
	  <div class="progress-bar progress-bar-success" style="width: 35%">
	    <span class="sr-only">35% Complete (success)</span>
	  </div>
	  <div class="progress-bar progress-bar-warning" style="width: 20%">
	    <span class="sr-only">20% Complete (warning)</span>
	  </div>
	  <div class="progress-bar progress-bar-danger" style="width: 10%">
	    <span class="sr-only">10% Complete (danger)</span>
	  </div>
	</div>
	
	<br>------------------标签 label ------------------<br>
	<span class="label">标签</span>
	<span class="label label-primary">主要primary</span>
	<span class="label label-success">success</span>
	<span class="label label-warning">warning</span>
	<span class="label label-danger">danger</span>
	<br>徽标 label-badge<br>
	<span class="label label-badge">defaule</span>
	<span class="label label-badge label-primary">primary</span>
	<span class="label label-badge label-success">success</span>
	<span class="label label-badge label-warning">warning</span>
	<span class="label label-badge label-danger">danger</span>
	<br>小圆点图标 label-dot <br>
	<span class="label label-dot ">default</span>
	<span class="label label-dot label-primary">primary</span>
	<span class="label label-dot label-success">success</span>
	<span class="label label-dot label-info">info</span>
	<span class="label label-dot label-warning">warning</span>
	<span class="label label-dot label-danger">danger</span>
	
	<br>按钮中的徽标<br>
	<button class="btn">我的消息<span class="label label-badge">12</span></button>
	<button class="btn btn-primary">我的消息<span class="label label-badge ">12</span></button>
	
	<button class="btn">联系人<span class="label label-dot">12</span> </button>
	<button class="btn">联系人<span class="label label-dot label-info">12</span></button>
	<button class="btn">联系人<span class="label label-dot label-success">12</span></button>
	<button class="btn">联系人<span class="label label-dot label-warning">12</span></button>
	<button class="btn">联系人<span class="label label-dot label-danger">12</span></button>
	<button class="btn">联系人<span class="label label-dot label-primary">12</span></button>
	<br>

	<br>--------------表单控件------------------<br>
	<select class="form-control"></select>
	<textarea class="form-control"></textarea>
	<input type="text" class="form-control">
	<input type="password" class="form-control">
 	<input type="datetime" class="form-control">
 	<input type="password" class="form-control">
 	<input type="datetime-local" class="form-control">
 	<input type="email" class="form-control">
 	
 	<input type="text" class="form-control" placeholder="用户名" >
 	<input type="email" class="form-control" placeholder="电子邮箱">
 	<textarea rows="3" class="form-control" placeholder="可以输入多行文本"></textarea>
 	<input type="file" class="form-control" value="">
 	<select class="form-control" multiple>
 		<option>请选择一种水果</option>
 		<option value="apple">苹果</option>
 		<option value="banana">香蕉</option>
 		<option value="orange">桔子</option>
 	</select>
 	<input class="form-control" type="text" placeholder="次文本框被禁用" disabled>
 	<input class="form-control" type="text" placeholder="次文本框只读" readonly>
 	<input class="form-control form-focus" type="text" autofocus placeholder="请激活此文本框">
	<div class="has-warning">
		<input class="form-control" type="text" placeholder="warning框">
	</div>
	<div class="has-error">
		<input class="form-control" type="text" placeholder="error框">
	</div>
	<div class="has-success">
		<input class="form-control" type="text" placeholder="success框">
	</div>
	
	<input class="form-control input-lg" type="text" placeholder="较大尺寸的文本狂">
	<input class="form-control" type="text" placeholder="默认的文本框">
	<input class="form-control input-sm" type="text" placeholder="小尺寸的文本框">

	--------------------------------1.16--------------------------
	
	<br>--------------单选和复选框----------------<br>
	<input type="checkbox">复选框1
	<input type="checkbox">复选框2
	<input type="checkbox" disabled>复选框3
	<div class="checkbox">
		<label>
			<input type="checkbox" >点击文字也可以被选中
		</label>
	</div>
	
	<div class="checkbox disabled">
		<label>
			<input type="checkbox" disabled>复选框4(文字也被禁用)
		</label>
	</div>

	<div class="radio">
		<label>
			<input type="radio" name="radioExample">单选框1
		</label>
	</div>
	<div class="radio">
		<label>
			<input type="radio" name="radioExample">单选框2
		</label>
	</div>
	<div class="radio disabled">
		<label>
			<input disabled type="radio" name="radioExample">被禁用的单选框狂
		</label>
	</div>
	
	<br>在一行显示  check-inline/radio-inline<br>
	<label class="check-inline">
		<input type="checkbox"> 多选框1
	</label>
	<label class="check-inline">
		<input type="checkbox">多选框2
	</label>
	<label class="check-inline">
		<input type="checkbox" disabled>多选框3(禁用)
	</label>
	<br>
	<label class="radio-inline">
		<input type="radio" name="1">单选框1
	</label>
	<label class="radio-inline">
		<input type="radio" name="1">单选框2
	</label>
	<label class="radio-inline ">
		<input type="radio" name="1" disabled>单选框3(禁用)
	</label>
	
	
	<br>---------------开关 (switch)----------------<br>
	<div class="switch">
		<input type="checkbox">
		<label>夜间模式</label>
	</div>
	<br>使用 .text-left 或 .text-right 来更改文字对齐方向。<br>
	<div class="switch text-left">
		<input type="checkbox">
		<label>夜间模式</label>
	</div>
	<div class="switch text-right">
		<input type="checkbox">
		<label>夜间模式</label>
	</div>
	<br>为 .switch 添加 .disabled 类,或者为 input 添加 [disabled] 属性。<br>
	<div class="switch disabled">
		<input type="checkbox" checked>
		<label>夜间模式</label>
	</div>
	<div class="switch">
		<input type="chechbox" disabled>
		<label>夜间模式</label>
	</div>
	
	<br>---------面包屑---------<br>
	<ol class="breadcrumb">
		<li><a href="#"><i class="icon icon-home text-red"></i> 首页</a></li>
		<li><a href="#">目录</a></li>
		<li><a href="#">存档</a></li>
	</ol>
	
	<br>-----------图片------------<br>
	<br>圆角图片<br>
	<img class="img-rounded" src="http://zui.sexy/docs/img/img1.jpg" width="200px" height="200px" alt="圆角图片">
	<br>圆形图片<br>
	<img class="img-circle" src="http://zui.sexy/docs/img/img2.jpg" width="200px" height="200px" alt="圆形图片">
	<br>缩略图<br>
	<img class="img-thumbnail" src="http://zui.sexy/docs/img/img3.jpg" width="200px" height="200px" alt="缩略图">
	<br>响应式图片<br>
	<img class="img-responsive" src="http://zui.sexy/docs/img/img4.jpg" width="200px" height="200px" alt="响应式图片">
	
	<br>-----------------多级标题-----------------<br>
	<h1>一级标题26px  <small>副标题</small></h1>
	<h2>二级标题20px  <small>副标题</small></h2>
	<h3>三级标题16px  <small>副标题</small></h3>
	<h4>四级标题14px  <small>副标题</small></h4>
	<h5>五级标题13px  <small>副标题</small></h5>
	<h6>六级标题12px  <small>副标题</small></h6>
	
	<br>带底部水平分隔线的标题(.header-dividing or .page-header)<br>
	<h1 class="header-dividing"> 一级标题 使用 .header-dividing</h1>
	<div class="page-header" style="width:100%;">
		<h2>使用<span class="code">二级标题 使用 .page-header</span></h2>
	</div>
	
	<br>----------------分割线hr---------------<br>
	<hr>
	
	<br>------------------滚动条(.scrollbar-hover在鼠标停留上面时才出现滚动条)---------------------<br>
	<div class="scrollbar-hover" style="max-height:100px;overflow:scroll;">
		<p>鼠标悬停此区域才显示滚动条
			一些文字
			更多的文字
			更多的文字
			更多的文字
			长段落文本,
			长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本,长段落文本。
			较宽的内容。
		</p>
	</div>

</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • GC详解

    用户5927264
  • IDEA的使用细节

    用户5927264
  • Hbase

    [root@ha1 sungrow]# cd /soft/hbase-1.1.10/bin [root@ha1 bin]# hbase shell

    用户5927264
  • 一文轻松搞懂-条件随机场CRF

    根据实验室师兄,师姐讲的条件随机场CRF,我根据我的理解来总结下。有什么疑问的尽管在评论里指出,我们共同探讨 ? 总说 CRF(Conditional Rand...

    zenRRan
  • 一文轻松搞懂条件随机场

    CRF(Conditional Random Field),中文被翻译为条件随机场。经常被用于序列标注,其中包括词性标注,分词,命名实体识别等领域。但是为什么叫...

    yuquanle
  • bootstrap label标签

    <span class="label label-default">默认标签</span> <span class="label label-primary"...

    用户5760343
  • CSS 3.0中的混合模式的妙用

    给大家分享一个用CSS 3.0的混合模式实现的特效,不用给文字设置多种颜色,滚动页面时,能够让文字能够根据背景颜色自动发生改变,效果如下:

    越陌度阡
  • [第22期] React Conf 2019 样式新方案

    会上讲了很多激动人心的技术点,这里先介绍一些我比较感兴趣的点, 希望对大家有所启发。

    用户6900878
  • RMI基础看这一篇就够了

    RMI的全称是Rmote Method Invocation,即远程方法调用,具体怎么实现呢?远程服务器提供具体的类和方法,本地会通过某种方式获得远程类的一个代...

    tnt阿信
  • 编程范式粗讲

    编程范式(Programming paradigm)指计算机编程的基本风格或典型模式。

    三毛

扫码关注云+社区

领取腾讯云代金券