ZUI的入门使用
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
###1 基本模版 （ZUI是基于bootstarp進(jìn)程改造的 所以一些解釋 可以參考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>第一個(gè)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>第一個(gè)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 基礎(chǔ)使用
<!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 布局容器 及 基礎(chǔ)使用</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 藍(lán)色 .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 藍(lán)色 .hl-info 背景色</p><p class="text-blue hl-blue">.text-blue 藍(lán)色 .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內(nèi)容邊距</p><p class="bg-primary">.bg-primary 藍(lán)色</p><p class="bg-danger">.bg-danger 橘紅色</p><p class="bg-red with-padding">.bg-red 橘紅色 with-padding 內(nèi)容邊距</p><p class="bg-success">.bg-success 綠色</p><p class="bg-green with-padding">.bg-green 綠色 with-padding內(nèi)容邊距</p><p class="bg-warning">.bg-warning 橘黃色</p><p class="bg-yellow with-padding">.bg-yellow 橘黃色 with-padding內(nèi)容邊距</p><p class="bg-important">.bg-important 棕色 </p><p class="bg-brown with-padding">.bg-brown 棕色 .with-padding內(nèi)容邊距</p><p class="bg-special"> .bg-special 紫色</p><p class="bg-purple with-padding">.bg-purple 紫色 .with-padding內(nèi)容邊距</p><h2 class="text-nowrap">禁止文本換行超出的部分會被截?cái)?.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">使所有文本在一行顯示。超出的部分會被截?cái)?#xff0c;并且在文本末尾添加省略號。使用.text-ellipsis。使所有文本在一行顯示。超出的部分會被截?cái)?#xff0c;并且在文本末尾添加省略號。使用.text-ellipsis。</h2>--------------------關(guān)閉按鈕---------------------<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>雖然文本不會顯示 但是依然占據(jù)位置(對布局有影響)....<div class="hidden" style="display:block;"> 測試 :.hidden 和 .showing具備更高的優(yōu)先級，防止其他規(guī)則重寫。.invisible 僅僅隱藏元素，但元素內(nèi)容所占的空間并不會清除。</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>------------圖標(biāo)---------------<br><i class="icon icon-star">開始</i><span class="icon-unlock-alt">鎖</span><i class="icon icon-flag">等寬圖標(biāo)</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>----------圖標(biāo)大小------------<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>----------圖標(biāo)旋轉(zhuǎn)------------<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>----------圖標(biāo)旋轉(zhuǎn)動畫------------<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">標(biāo)準(zhǔn)按鈕</button><button class="btn btn-link" type="button">連接按鈕</button><div class="btn-group"><button class="btn">按鈕組</button><button class="btn">第二個(gè)</button><button class="btn">第三個(gè)</button></div><br><button class="btn btn-lg" type="button">大尺寸按鈕</button><button class="btn ">標(biāo)準(zhǔn)尺寸</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>帶圖標(biāo)的按鈕</button><button data-toggle="button" class="btn" type="button">狀態(tài)切換按鈕</button> 狀態(tài)切換按鈕提供一個(gè)類似復(fù)選框的機(jī)制，當(dāng)點(diǎn)擊后切換為選中狀態(tài)（為按鈕增加Class .active），再次點(diǎn)擊取消選中狀態(tài)<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="正在加載...">加載狀態(tài)</button><script type="text/javascript">$(function(){$('#loadingBtnExample').on('click', function() {debuggervar $btn = $(this);$btn.button('loading');// 此處使用 setTimeout 來模擬你的復(fù)雜功能邏輯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">危險(xiǎn)</button><br>-------------進(jìn)度條---------------<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>------------------標(biāo)簽 label ------------------<br><span class="label">標(biāo)簽</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>徽標(biāo) 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>小圓點(diǎn)圖標(biāo) 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>按鈕中的徽標(biāo)<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">聯(lián)系人<span class="label label-dot">12</span> </button><button class="btn">聯(lián)系人<span class="label label-dot label-info">12</span></button><button class="btn">聯(lián)系人<span class="label label-dot label-success">12</span></button><button class="btn">聯(lián)系人<span class="label label-dot label-warning">12</span></button><button class="btn">聯(lián)系人<span class="label label-dot label-danger">12</span></button><button class="btn">聯(lián)系人<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="默認(rèn)的文本框"><input class="form-control input-sm" type="text" placeholder="小尺寸的文本框">--------------------------------1.16--------------------------<br>--------------單選和復(fù)選框----------------<br><input type="checkbox">復(fù)選框1<input type="checkbox">復(fù)選框2<input type="checkbox" disabled>復(fù)選框3<div class="checkbox"><label><input type="checkbox" >點(diǎn)擊文字也可以被選中</label></div><div class="checkbox disabled"><label><input type="checkbox" disabled>復(fù)選框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>---------------開關(guān) (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>響應(yīng)式圖片<br><img class="img-responsive" src="http://zui.sexy/docs/img/img4.jpg" width="200px" height="200px" alt="響應(yīng)式圖片"><br>-----------------多級標(biāo)題-----------------<br><h1>一級標(biāo)題26px <small>副標(biāo)題</small></h1><h2>二級標(biāo)題20px <small>副標(biāo)題</small></h2><h3>三級標(biāo)題16px <small>副標(biāo)題</small></h3><h4>四級標(biāo)題14px <small>副標(biāo)題</small></h4><h5>五級標(biāo)題13px <small>副標(biāo)題</small></h5><h6>六級標(biāo)題12px <small>副標(biāo)題</small></h6><br>帶底部水平分隔線的標(biāo)題(.header-dividing or .page-header)<br><h1 class="header-dividing"> 一級標(biāo)題 使用 .header-dividing</h1><div class="page-header" style="width:100%;"><h2>使用<span class="code">二級標(biāo)題 使用 .page-header</span></h2></div><br>----------------分割線hr---------------<br><hr><br>------------------滾動條(.scrollbar-hover在鼠標(biāo)停留上面時(shí)才出現(xiàn)滾動條)---------------------<br><div class="scrollbar-hover" style="max-height:100px;overflow:scroll;"><p>鼠標(biāo)懸停此區(qū)域才顯示滾動條一些文字更多的文字更多的文字更多的文字長段落文本，長段落文本，長段落文本，長段落文本，長段落文本，長段落文本，長段落文本，長段落文本，長段落文本，長段落文本，長段落文本，長段落文本，長段落文本，長段落文本，長段落文本，長段落文本。較寬的內(nèi)容。</p></div></body> </html>轉(zhuǎn)載于:https://my.oschina.net/u/3677987/blog/1607056
總結(jié)
- 上一篇： 【newCoder】2016校招真题在线
- 下一篇： 来自一个大牛对ACM的总结