ZUI的入门使用
2019獨角獸企業重金招聘Python工程師標準>>>
###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() {debuggervar $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>轉載于:https://my.oschina.net/u/3677987/blog/1607056
總結
- 上一篇： 【newCoder】2016校招真题在线
- 下一篇： 来自一个大牛对ACM的总结