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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读