溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
通用技能:
# 文檔類型
<!DOCTYPE html> <html lang="zh-cn"> <!-- Html Code --> </html>
說明: 由于BootStrap基于HTML5,所以所有的HTML文件都需要在其頂部引用HTML5的DOCTYPE屬性.
# 移動先行
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
說明: 由于BootStrap以移動端優(yōu)先,所以可通過一些viewport特性來設置移動端行為,如上可實現(xiàn)內(nèi)容寬度與設備寬度1:1,最大縮放為屏幕寬度,且禁用用戶縮放功能,防止用戶觸發(fā)縮放而導致出現(xiàn)滾動條
# 響應圖片
<img class="img-responsive" src="img/screen.jpg" alt="">
說明: 為了實現(xiàn)容器內(nèi)圖片大小縮放自適應,BootStrap3中只需為圖片加img-responsive類即可,其實實現(xiàn)方式非常簡單只要設置了max-width: 100%;和height: auto;即可
# 居中容器
<div class="container"></div>
說明: 一個頁面或元素要居中顯示,可以在外部容器上簡單應用.container類即可,它其實由一個max-width屬性來限制刪欄系統(tǒng)的最大寬度,默認容器左右內(nèi)邊距15px,當然都可以后期重載覆蓋這些值
排版技能:
# 標題相關(guān)
<h2>有上下邊距的h2 <small>小號有上下邊距的h2</small></h2> <h3>有上下邊距的h2 <small>小號有上下邊距的h3</small></h3> <h4>有上下邊距的h2 <small>小號有上下邊距的h4</small></h4> <h5>有上下邊距的h2 <small>小號有上下邊距的h5</small></h5> <h6>有上下邊距的h2 <small>小號有上下邊距的h6</small></h6> <h7>有上下邊距的h2 <small>小號有上下邊距的h7</small></h7> <span class="h2">無上下邊距的h2 <small>小號無上下邊距的h2</small></span> <br> <span class="h3">無上下邊距的h2 <small>小號無上下邊距的h2</small></span> <br> <span class="h4">無上下邊距的h2 <small>小號無上下邊距的h2</small></span> <br> <span class="h5">無上下邊距的h2 <small>小號無上下邊距的h2</small></span> <br> <span class="h6">無上下邊距的h2 <small>小號無上下邊距的h2</small></span> <br> <span class="h7">無上下邊距的h2 <small>小號無上下邊距的h2</small></span> <br>
說明: BootStrap重定義h2~h7可直接使用,也可以作為非標題元素的類,但前者默認有上下外邊距,而后者沒有,常常配合使用的是在內(nèi)部使用<small></small>,以便顯示稍微小一點兒的字體,且字體顏色被設置為灰色(#999999)
# 頁面主題
<p>下外邊距為10px的p</p> <p class="lead">突出顯示下外邊距為10px的p</p>
說明: BootStrap默認全局設置字體大小14px,行高20px,p元素段落會有一個額外的下外邊距,大小為行間距的一半,10px,如果想讓一個段落突出顯示,可加lead類,會增大字體大小,粗細,行間距,和下外邊距
# 強調(diào)文本
<strong>字體加粗效果</strong> <br> <em>字體傾斜效果</em> <br> <cite>字體引用效果</cite> <br> <small>小號字體效果</small> <br> <div class="text-left">文本左對齊效果</div> <div class="text-right">文本右對齊效果</div> <div class="text-center">文本居中對齊效果</div> <div class="text-justify">文本平均分布效果</div>
說明: BootStrap將默認的文本強調(diào)元素<small></small> <strong></strong> <em></em> <cite></cite>以及文本對齊都進行了輕量級的實現(xiàn).
# 縮略語句
<abbr class="initialism" title="自動化運維開發(fā)">DEVOPS</abbr>
說明: BootStrap在abbr元素上實現(xiàn)了縮略詞功能,鼠標移動到縮略詞上時縮略詞下有虛橫線且顯示聲明的title的屬性值,光標變幫助,另一種是通過添加initialism類,但是似乎只是字體小一點兒.
# 地址元素
<div class="container"> <footer> <address class="text-center"> <h6><a href="#">在線反饋</a></h6> </address> <address class="text-center"> <h5><small>Copyright 2016 版權(quán)所有</small></h5> </address> <address class="text-center"> <h5><small>ICP證粵B2-20090191，京公網(wǎng)安備 11000002000013號</small></h5> </address> </footer> </div>
說明: BootStrap在address元素上實現(xiàn)了簡單通用的樣式,設置下外邊距20px,行高20px,非常方便的加個樣式實現(xiàn)火狐中文網(wǎng)的底部版權(quán)樣式.
# 引用內(nèi)容
<div class="container"> <header> <blockquote> <small>主機信息</small> </blockquote> </header> <section> 信息頁面 </section> </div>
說明: BootStrap在blockquota元素上實現(xiàn)了引用,可以引用任意HTML內(nèi)容,但一般推薦使用<p></p>,在內(nèi)部使用<small></small>文字前面會加-作為注釋,常常配合<small></small>和<em></em>和<cite></cite>一起使用,當然還可以配合text-right/pull-right來右對齊,以適應不同的排版方式
# 普通列表
<ul> <li>個人信息: <ul> <li>姓名: 李滿滿</li> <li>性別: 男</li> <li>年齡: 25</li> </ul> </li> </ul>
說明: BootStrap在ul/ol和li元素上做了細微的優(yōu)化,ul上外邊距設為0px,除了最后一個ul,所有的ul下外邊距默認設置為10px.
# 有序列表
<ol> <li>構(gòu)建自動化運維平臺</li> <li>設計RESTful API</li> </ol>
# 去點列表
<ul class="list-unstyled"> <li>個人信息: <ul> <li>姓名: 李滿滿</li> <li>性別: 男</li> <li>年齡: 25</li> </ul> </li> </ul>
說明: BootStrap的list-unstyled類只會去除當前被選擇的元素列表項前面的圓點,而不會作用于其子元素,其實設置的是ul的padding-left: 0;list-style: none;所以要注意ul的內(nèi)左邊距被設置為0px.
# 內(nèi)聯(lián)列表
<div class="container"> <header> <ul class="list-inline"> <li><a href="#">主頁</a></li> <li><a href="#">日志</a></li> <li><a href="#">照片</a></li> </ul> </header> </div>
說明: BootStrap的list-inline類用于實現(xiàn)內(nèi)聯(lián)樣式表,也就是將列表項水平顯示,常用于菜單,默認設置ul的padding-left: 0;list-stype:none;子li除了第一個設置了padding-left:0;其它的都默認左右各5px,所以很多時候做菜單需要我們自定義覆蓋該默認樣式.
# 定義列表
<dl> <dt>個人信息:</dt> <dd>姓名: 李滿滿</dd> <dd>性別: 男</dd> <dd>年齡: 25</dd> </dl>
說明: BootStrap對默認的dl定義列表也做了一些輕微的調(diào)整,主要是dl設置margin-top: 0;margin-bottom: 20px;對于dd設置margin-left: 0;導致dt和dd內(nèi)容左對齊,所以常常需要自定義覆蓋樣式.
# 水平定義
<dl class="dl-horizontal"> <dt>姓名:</dt> <dd>李滿滿</dd> <dt>年齡:</dt> <dd>25</dd> <dt>性別:</dt> <dd>男</dd> </dl>
說明: BootStrap的dl-horizontal類默認使得dl下的dt和dd列表水平顯示,但由于對dt設置width: 160px;text-align:right;對dd設置margin-left: 180px;所以dt和dd并排顯示且中間間隔20px,但是dt的內(nèi)容右對齊導致左邊可能出現(xiàn)大片空白區(qū),所以可能需要自定義覆蓋樣式
# 內(nèi)聯(lián)代碼
<code><div id="container"><div></code> <br> <br>
說明: BootStrap對默認的code設置了淺紅背景和其內(nèi)部深紅字體
# 輸入代碼
<kbd><div id="container"><div></kbd> <br> <br>
說明: BootStrap對默認的kbd設置了深黑色背景和內(nèi)部白顏色字體
# 多行代碼
<pre class="pre-scrollable">
import os
if __name__ == '__main__':
if os.path.exists('/etc/passwd'):
print 'found notice: passwd file is exists!'
else:
print 'found errors: passwd file no exists!'
</pre> <br> <br>說明: BootStrap默認對可顯示大塊代碼段,并保證原有格式不變,另外可在pre元素上應用.pre-scollable樣式,則可控制該區(qū)域最大高度為340像素,并可在y軸方向滾動.
# 基礎(chǔ)表格
<table class="table"> <thead> <tr> <th>#</th> <th>姓名</th> <th>年齡</th> <th>職業(yè)</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>李滿滿</td> <td>25</td> <td>運維開發(fā)工程師</td> </tr> </tbody> </table>
說明: BootStrap默認提供表格的基礎(chǔ)樣式table類,默認table設置margin-bottom:20px;th和td設置padding: 8px;border-top: 1px solid #ddd;使得table下外邊距20px,所有的th/td內(nèi)邊距8px且擁有一個1px的上邊框,最后對于thead中的th設置border-bottom: 2px solid #ddd;使其有一個2px的粗邊框.
# 條紋表格
<table class="table table-striped"> <thead> <tr> <th>#</th> <th>姓名</th> <th>年齡</th> <th>職業(yè)</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>李滿滿</td> <td>25</td> <td>運維開發(fā)工程師</td> </tr> <tr> <td>2</td> <td>劉珍珍</td> <td>24</td> <td>前端開發(fā)工程師</td> </tr> </tbody> </table>
說明: BootStrap的table-striped類在table類的基礎(chǔ)上利用css3的.table-striped > tbody > tr: nth-child(odd) {background-color: #f9f9f9;},常常需要自定義覆蓋樣式
# 邊框表格
<table class="table table-bordered"> <thead> <tr> <th>#</th> <th>姓名</th> <th>年齡</th> <th>職業(yè)</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>李滿滿</td> <td>25</td> <td>運維開發(fā)工程師</td> </tr> </tbody> </table>
說明: BootStrap的table-bordered類在table類的基礎(chǔ)上設置了整體表格和單元格的邊框,不再附加圓角效果,簡潔許多.
# 高亮表格
<table class="table table-hover"> <thead> <tr> <th>#</th> <th>姓名</th> <th>年齡</th> <th>職業(yè)</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>李滿滿</td> <td>25</td> <td>運維開發(fā)工程師</td> </tr> </tbody> </table>
說明: BootStrap的table-hover類在table類的基礎(chǔ)上使用css3設置.table-hover > tbody> tr:hover {background-color: #f5f5f5;},常常需要自定義覆蓋樣式
# 緊湊表格
<table class="table table-condensed"> <thead> <tr> <th>#</th> <th>姓名</th> <th>年齡</th> <th>職業(yè)</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>李滿滿</td> <td>25</td> <td>運維開發(fā)工程師</td> </tr> </tbody> </table>
說明: BootStrap的table-condensed類在table類的基礎(chǔ)上減少了單元格的默認8px為5px
# 表行樣式
<table class="table table-condensed"> <thead> <tr> <th>#</th> <th>主機</th> <th>狀態(tài)</th> </tr> </thead> <tbody> <tr class="active"> <td>1</td> <td>1.1.1.1</td> <td>active</td> </tr> <tr class="success"> <td>2</td> <td>2.2.2.2</td> <td>success</td> </tr> <tr class="info"> <td>3</td> <td>3.3.3.3</td> <td>info</td> </tr> <tr class="warning"> <td>4</td> <td>4.4.4.4</td> <td>warning</td> </tr> <tr class="danger"> <td>5</td> <td>5.5.5.5</td> <td>danger</td> </tr> </tbody> </table>
說明: BootStrap為表格tr元素提供了5種額外樣式,控制tr的背景顏色,active類表示當前活動的信息,success類表示成功或者正確的行為,warning類表示警告需要特別注意,.danger類表示危險或可能錯過的原因,需要注意的是當要和table-hover類一起使用的時候,也設置了響應的鼠標懸停高亮顏色,所以自定義覆蓋時需要注意.
# 響應表格
<div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>選中</th> <th>#</th> <th>主機</th> <th>狀態(tài)</th> </tr> </thead> <tbody> <tr class="active"> <td><input type="checkbox" name="row"></td> <td>1</td> <td>1.1.1.1</td> <td>active</td> </tr> </tbody> </table> </div>
說明: BootStrap通過在t表格外部套一層table-responsive類容器即可創(chuàng)建響應式表格,在小于768px時容器會自動出現(xiàn)水平滾動條,大于768px時水平滾動條消失,還有一點兒是對外部容器添加了一個邊框的同時去掉了內(nèi)部table的table-bordered邊框,防止重疊
# 基礎(chǔ)表單
<div class="container"> <form action=""> <fieldset> <legend>用戶登錄</legend> <div class="form-group"> <label for="user">賬戶</label> <input type="email" id="user" name="user" class="form-control" placeholder="email"> </div> <div class="form-group"> <label for="pass">密碼</label> <input type="password" id="pass" name="pass" class="form-control" placeholder="pass"> </div> <div class="form-group"> <input type="checkbox" id="is_remember" name="is_remember"> 記住密碼 </div> <div class="form-group"> <button type="submit" class="btn btn-default">登陸</button> </div> </fieldset> </form> </div>
說明: BootStrap對基礎(chǔ)表單并沒做太多的定制化效果設計,默認都使用全局設置,只是對表單內(nèi)的fieldset/legend/label標簽進行了設定,select/input/textarea元素上應用form-control樣式顯示的寬度會變?yōu)?00%,并且placeholder的顏色會變?yōu)?999999;通常實際使用中會將label和input元素放在一個樣式為form-group的div里,form-group默認設置margin-bottom: 15px來保證清晰的看到每一組控件.
# 內(nèi)聯(lián)表單
<div class="container"> <form action="" class="form-inline"> <fieldset> <legend>用戶登錄</legend> <div class="form-group"> <label for="user">賬戶</label> <input type="email" id="user" name="user" class="form-control" placeholder="email"> </div> <div class="form-group"> <label for="pass">密碼</label> <input type="password" id="pass" name="pass" class="form-control" placeholder="pass"> </div> <div class="checkbox"> <label><input type="checkbox" id="is_remember" name="is_remember"> 記住密碼</label> </div> <div class="form-group"> <button type="submit" class="btn btn-default">登陸</button> </div> </fieldset> </form> </div>
說明: BootStrap的form-inline類使得所有表單都在一行,其實是設置了所有的form-group的display: inline-block;當然如果你想隱藏label標簽的話可直接給label加一個sr-only將其隱藏
# 橫向表單
<div class="container"> <form action="" class="form-horizontal" role="form"> <fieldset> <legend>用戶登錄</legend> <div class="form-group"> <label for="user" class="col-sm-1 control-label">賬戶</label> <div class="col-sm-11"> <input type="email" id="user" name="user" class="form-control" placeholder="email"> </div> </div> <div class="form-group"> <label for="pass" class="col-sm-1 control-label">密碼</label> <div class="col-sm-11"> <input type="password" id="pass" name="pass" class="form-control" placeholder="pass"> </div> </div> <div class="form-group"> <div class="col-sm-offset-1 col-sm-11"> <label><input type="checkbox" id="is_remember" name="is_remember"> 記住密碼</label> </div> </div> <div class="form-group"> <div class="col-sm-offset-1 col-sm-11"> <button type="submit" class="btn btn-default">登陸</button> </div> </div> </fieldset> </form> </div>
說明: BootStrap橫向表單和內(nèi)聯(lián)表單使用方式不太一樣,使用form的form-horizontal類不止是簡單的設置control-label等的padding-top:7px;text-align:right;保證標簽相對于輸入框垂直居中,如果使用text-right則會靠頂部,還需要配合預置刪欄系統(tǒng)以便將label和控件水平并排布局
# 表單控件
<div class="container"> <section id="login"> <form action="" class="form-horizontal"> <fieldset> <legend>注冊郵箱帳號</legend> <div class="form-group"> <label for="email" class="col-sm-2 control-label">郵箱帳號</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" name="email"> </div> </div> <div class="form-group"> <label for="name" class="col-sm-2 control-label">昵稱</label> <div class="col-sm-10"> <input type="text" class="form-control" id="name" name="name"> </div> </div> <div class="form-group"> <label for="password" class="col-sm-2 control-label">密碼</label> <div class="col-sm-10"> <input type="password" class="form-control" id="password" name="password"> </div> </div> <div class="form-group"> <label for="confirm_password" class="col-sm-2 control-label">確認密碼</label> <div class="col-sm-10"> <input type="password" class="form-control" id="confirm_password" name="confirm_password"> </div> </div> <div class="form-group"> <label for="sex" class="col-sm-2 control-label">性別</label> <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="sex" id="sex" checked="checked">男 </label> <label class="radio-inline"> <input type="radio" name="sex" id="sex">女 </label> </div> </div> <div class="form-group"> <label for="hobby" class="col-sm-2 control-label">愛好</label> <div class="col-sm-10"> <label class="checkbox-inline"> <input type="checkbox" name="hobby"> 寫代碼 </label> <label class="checkbox-inline"> <input type="checkbox" name="hobby"> 看電影 </label> <label class="checkbox-inline"> <input type="checkbox" name="hobby"> 看妹紙 </label> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">夢想</label> <div class="col-sm-2"> <div class="checkbox"> <label><input type="checkbox">全棧開發(fā)</label> </div> <div class="checkbox"> <label><input type="checkbox">桌球達人</label> </div> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">生日</label> <div class="col-sm-1"> <select name="rl" id="rl" class="form-control"> <option value="公歷">公歷</option> </select> </div> <div class="col-sm-2"> <select name="nf" id="nf" class="form-control"> <option value="2000年">2000年</option> </select> </div> <div class="col-sm-1"> <select name="yf" id="yf" class="form-control"> <option value="1月">1月</option> </select> </div> <div class="col-sm-1"> <select name="ts" id="ys" class="form-control"> <option value="1日">1日</option> </select> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">所在地</label> <div class="col-sm-1"> <select name="gj" id="gj" class="form-control"> <option value="中國">中國</option> </select> </div> <div class="col-sm-1"> <select name="sf" id="sf" class="form-control"> <option value="浙江">浙江</option> </select> </div> <div class="col-sm-1"> <select name="qy" id="qf" class="form-control"> <option value="杭州">杭州</option> </select> </div> </div> <div class="form-group"> <label for="desc" class="col-sm-2 control-label">個人簡介</label> <div class="col-sm-10"> <textarea name="desc" id="desc" rows="5" class="form-control" ></textarea> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">驗證碼</label> <div class="col-sm-10"> <input type="p_w_picpath" src="img/auth.png" name="auth" id="auth"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button class="btn btn-default">完成注冊</button> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <label for="agreen" class="checkbox-inline"> <input type="checkbox" name="agree" id="agree" checked="checked"> 我已閱讀并同意相關(guān)服務條款和隱私政策 <span class="glyphicon glyphicon-chevron-down" ></span> </label> </div> </div> </fieldset> </form> </section> </div>
說明: BootStrap的form-horizontal類和刪欄系統(tǒng)配合實現(xiàn)了橫向表單,input/select/textarea用法基本不變,當對它們附加form-control類時,寬度將變?yōu)?00%,所以此時就無需設置textarea的cols值,radio/checkbox比較特殊,支持通過外部附加一個擁有radio/checkbox類的div實現(xiàn)豎向單選/多選,也可通過對它們label附加radio-inline/checkbox-inline實現(xiàn)橫向單選/多選.
# 控件狀態(tài)
<div class="container"> <fieldset disabled="disabled"> <legend>平臺登錄</legend> <form action="" class="form-horizontal"> <div class="form-group has-warning has-feedback"> <label for="uname" class="col-sm-2 control-label">賬戶: </label> <div class="col-sm-10"> <input type="text" name="uname" id="uname" class="form-control"> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> </div> </div> <div class="form-group has-success has-feedback"> <label for="upass" class="col-sm-2 control-label">密碼: </label> <div class="col-sm-10"> <input type="text" name="upass" id="upass" class="form-control"> <span class="glyphicon glyphicon-ok-sign form-control-feedback"></span> </div> </div> <div class="form-group has-error"> <div class="col-sm-offset-2 col-sm-10"> <label for="" class="checkbox-inline"><input type="checkbox" name="is_remember" id="is_remember"> 是否記住密碼?</label> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button class="btn btn-default">登錄</button> </div> </div> </form> </fieldset> </div>
說明: BootStrap控件狀態(tài)分為焦點狀態(tài),禁用狀態(tài),驗證提示狀態(tài),焦點狀態(tài)其實是在:focus上設置outline為0然后添加了一個柔和的box-shadow,而對于radio/checkbox使其更加圓潤,禁用狀態(tài)用法不變,一旦對fieldset設置了disabled,那么內(nèi)部所有的表單都會被disabled,且background-color: #eee;驗證提示通過對附加form-group的div附加has-success/has-warning/has-error來改變label的和邊框的顏色實現(xiàn)對成功/警告/錯誤信息的提示.有時候在驗證狀態(tài)的時候提供小圖標提示,可通過繼續(xù)附加feedback類,.has-feedback {position: relative;} .has-feedback .form-control {padding-right: 42.5px} .has-feedback .form-control-feedback {position: absolute;top: 25px;right: 0;}其實就是先將表單父類容器設置為相對定位,然后把附加form-control-feedback的元素絕對定位到右邊來實現(xiàn)小圖標提示效果.
# 控件大小
<div class="container"> <fieldset> <legend>平臺登錄</legend> <form action="" class="form-horizontal"> <div class="form-group"> <label for="uname" class="col-sm-2 control-label">賬號: </label> <div class="col-sm-10"> <input type="text" class="form-control input-lg" name="uname" id="uname"> </div> </div> <div class="form-group"> <label for="upass" class="col-sm-2 control-label">密碼: </label> <div class="col-sm-10"> <input type="text" name="upass" id="upass" class="form-control input-sm" placeholder="密碼"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <label for="" class="checkbox-inline"><input type="checkbox" name="is_remember" id="is_remember"> 是否記住密碼?</label> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button class="btn btn-default">登錄</button> </div> </div> </form> </fieldset> </div>
說明: BootStrap默認為input/select/textarea分別提供了input-lg和input-sm附加類,前者高度和行高被設置到46px,字體和邊框都稍有調(diào)整,后者高度和行高被設置為30px,字體和邊框稍有修改,可以很方便的按照規(guī)則定義其它的樣式如.input-mini.
# 顯示幫助
<div class="container"> <fieldset> <legend>平臺登錄</legend> <form action="" class="form-horizontal"> <div class="form-group"> <label for="uname" class="col-sm-2 control-label">賬號: </label> <div class="col-sm-10"> <input type="text" class="form-control" name="uname" id="uname"> <span class="help-block">只能包含字母數(shù)字下劃線</span> </div> </div> <div class="form-group"> <label for="upass" class="col-sm-2 control-label">密碼: </label> <div class="col-sm-10"> <input type="text" name="upass" id="upass" class="form-control" placeholder="密碼"> <span class="help-block">必須包含字母數(shù)字下劃線</span> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <label for="" class="checkbox-inline"><input type="checkbox" name="is_remember" id="is_remember"> 是否記住密碼?</label> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button class="btn btn-default">登錄</button> </div> </div> </form> </fieldset> </div>
說明: BootStrap默認還為我們提供了一個help-block類,用于在表單中顯示塊兒級的幫助信息,其實就是display: block;margin-top: 5px; margin-bottom: 10px; color: #737373;如果要將幫助信息顯示在一行可設置一個.help-inline {display: inline-block; padding-left: 5px;color:#737373;}實現(xiàn).
# 按鈕樣式
<div class="container"> <form action=""> <div class="form-group"> <button class="btn btn-default">標準按鈕</button>qw <button class="btn btn-primary">重要按鈕</button> <button class="btn btn-success">成功按鈕</button> <button class="btn btn-info">提示按鈕</button> <button class="btn btn-warning">警告按鈕</button> <button class="btn btn-danger">錯誤按鈕</button> <button class="btn btn-link">鏈接按鈕</button> </div> </form> </div>
說明: BootStrap默認提供了7種樣式的按鈕風格,分別btn-default/btn-primary/btn-success/btn-info/btn-warning/btn-danger/btn-link,基于btn基礎(chǔ)樣式,也對默認的:foucs/:active/:hover/:disabled定義了相關(guān)變化.
# 按鈕大小
<div class="container"> <form action=""> <div class="form-group"> <button class="btn btn-default btn-lg">標準大按鈕</button> <button class="btn btn-default btn-sm">標準中按鈕</button> <button class="btn btn-default btn-xs">標準小按鈕</button> <button class="btn btn-default btn-block">標準寬按鈕</button> </div> </form> </div>
說明: BootStrap默認為按鈕提供了btn-lg/btn-sm/btn-xs附加類,分別表示大/中/小按鈕,主要差別就是padding/font-size/line-height/border-radius,但有時我們并不需要按鈕擁有padding和margin,希望寬度100%,好在BootStrap還為我們提供了一個block級的樣式btn-block,它不以文本多少自動伸縮,寬度由父容器決定.且多個btn-block之間還有5px的間隔.
# 活動狀態(tài)
<div class="container"> <button class="btn btn-default">激活的button按鈕</button> <br> <a href="" class="btn btn-default active">激活的a按鈕</a> <br> <a href="" class="btn btn-default disabled">禁用的a按鈕</a> </div>
說明: BootStrap的btn相關(guān)的類,不僅支持普通button按鈕,還支持a元素,也能顯示同樣的效果,但強烈建議使用button防止跨瀏覽器兼容問題,對于活動狀態(tài)active其實就是background-p_w_picpath: none;outline: 0;而disabled其實就是opacity: 65%;并不禁止按鈕的默認行為,需要JS代碼來阻止,當然可通過disabled屬性來一次性達到你想要的效果.
# 圖像形狀
<div class="row"> <div class="col-sm-1"> <img src="img/100.jpg" alt="girl" class="img-thumbnail"> <img src="img/100.jpg" alt="girl" class="img-circle"> <img src="img/100.jpg" alt="girl" class="img-rounded"> </div> </div>
說明: BootStrap為圖片默認提供了3個附加類img-rounded為圓角方形,img-circle為圓,img-thumbnail小型方塊縮略圖,但是都沒有控制圖片顯示大小,所以需要額外應用樣式或限制父元素大小來控制圖片顯示大小.
# 輔助樣式
<div class="container"> <!-- 文本字體顏色 --> <div class="row"> <p class="text-muted">柔和灰</p> <p class="text-primary">主要藍</p> <p class="text-success">成功綠</p> <p class="text-info">信息藍</p> <p class="text-warning">警告黃</p> <p class="text-danger">危險紅</p> </div> <!-- 文本背景顏色 --> <div class="row"> <p class="bg-primary">主要藍</p> <p class="bg-success">成功綠</p> <p class="bg-info">信息藍</p> <p class="bg-warning">警告黃</p> <p class="bg-danger">危險紅</p> </div> <!-- 輔助圖表 --> <div class="row"> <!-- 關(guān)閉圖標 --> <div class="row"> <button class="close">×</button> </div> <div class="row"> <a href="javascript:;" class="close">×</a> </div> <!-- 下拉圖標 --> <div class="row"> <span class="caret"></span> </div> </div> <!-- 內(nèi)容浮動 --> <div class="row"> <img src="img/100.jpg" alt="" class="img-circle pull-left"> <img src="img/100.jpg" alt="" class="img-circle pull-right"> <div class="clearfix"></div> <img src="img/100.jpg" alt="" class="img-circle center-block"> </div> <!-- 顯示隱藏 --> <div class="row"> <p class="show">顯示</p> <p class="invisible">隱藏,但占據(jù)文檔流</p> <p class="hidden">隱藏,但不占據(jù)文檔流</p> </div> </div>
說明: BootStrap默認還提供了一些細小的輔助樣式,文字顏色text-*類,文字背景顏色bg-*類,關(guān)閉圖標close類,下拉圖表caret類,左浮動pull-left類,右浮動pull-right類,清除浮動clearfix類,顯示show類,隱藏hidden類和invisiable類,前者是隱藏并不占文檔流,后者是隱藏但占據(jù)文檔流.
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼