ZUI的入門使用
###1 基本模版 （ZUI是基於bootstarp進程改造的 因此一些解釋 能夠參考bootstarp）javascript
<!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>
相關文章
- 1. ZUI易入門Android之HTTP
- 2. ZUI易入門Android之開源框架的使用
- 3. ZUI易入門Android之開源的LayoutManager
- 4. ZUI易入門Android之TCP協議
- 5. ZUI易入門Android之Bitmap(一)
- 6. ZUI易入門前端 二、Javascript
- 7. ZUI易入門前端 四、vue
- 8. ZUI易入門Android之Fragment（一）
- 9. ZUI易入門Android之ListView的優化的相關概念
- 10. ZUI易入門前端 一、開發環境的搭建(HBuilder)
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • Neo4j數據庫入門教程 - NoSQL教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
- • Java Agent入門實戰（三）-JVM Attach原理與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
