BootStrap對(duì)開發(fā)者來說最大的好處就是響應(yīng)式布局和一些優(yōu)秀的樣式。
現(xiàn)在我給大家介紹一些使用BootStrap的步驟和一些常用的東西。
1.編寫頭部
<head> <meta charset="UTF-8"> <!--為了讓ie采用最新的渲染模式，要把這個(gè)標(biāo)簽添加上--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--針對(duì)響應(yīng)式布局，首先獲取設(shè)備的物理寬度，根據(jù)設(shè)備物理寬度設(shè)置網(wǎng)頁寬度，按照1:1縮放--> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>LearnBootstrap</title> <!--直接引用文件--> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <!--引用cdn地址--> <link rel="stylesheet" > <!--為了支持ie9以下，要加上這些--> <!--[if lt IE 9]> <!--讓他支持h5標(biāo)簽--> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <!--讓他支持媒體查詢，也就是響應(yīng)式--> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <!--[endif]--></head>
2.引入js
這個(gè)可以寫在body
<!-- jQuery文件。務(wù)必在bootstrap.min.js 之前引入 --><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
3.使用container類
container類是一個(gè)常用的div類
主要是用居中功能
<div class="container">hello</div>
4.使用柵格化系統(tǒng)
柵格化系統(tǒng)是BootStrap一個(gè)非常常用的一個(gè)布局系統(tǒng)
簡(jiǎn)單的使用如下
<div class="row"> <!--xs表示在手機(jī)上，sm表示在平板上，md表示在桌面上。后面的數(shù)字表示占多少列，滿屏為12列--> <!--內(nèi)容超過柵格高度，則會(huì)增加高度，不會(huì)增加寬度--> <!--offset表示向右移動(dòng)幾列--> <div class="col-xs-12 col-sm-6 col-md-8 col-md-offset-4">.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div><div class="row"> <!--push向后移動(dòng)，pull向前移動(dòng)--> <div class="col-xs-12 col-sm-6 col-md-8 col-md-push-4">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4 col-md-pull-8">.col-xs-6 .col-md-4</div></div>
可以看到柵格化系統(tǒng)可以根據(jù)不同設(shè)備調(diào)整不同寬度
5.使用表格
<div class="container"> <!--響應(yīng)式表格，內(nèi)容太長(zhǎng)可以左右移動(dòng)--> <div class="table-responsive"> <!--table 后幾個(gè)分別是表格有邊框，鼠標(biāo)經(jīng)過tbody行時(shí)顏色加深，表格緊縮--> <table class="table table-bordered table-hover table-condensed"> <thead> <tr> <th>表格標(biāo)題</th> <th>表格標(biāo)題</th> <th>表格標(biāo)題</th> </tr> </thead> <tbody> <!--該行顏色為淺綠--> <tr class="success"> <th>表格內(nèi)容</th> <th>表格內(nèi)容</th> <th>表格內(nèi)容</th> </tr> <!--該行顏色為淺藍(lán)--> <tr class="info"> <th>表格內(nèi)容</th> <th>表格內(nèi)容</th> <th>表格內(nèi)容</th> </tr> <!--該行顏色為米白--> <tr class="warning"> <th>表格內(nèi)容</th> <th>表格內(nèi)容</th> <th>表格內(nèi)容</th> </tr> </tbody> </table> </div></div>
如果是想某一格變顏色也可以在th標(biāo)簽內(nèi)加類像tr一樣
6.使用表單
最基本的用法如下
<div class="container"> <form> <!--的部分項(xiàng)是一個(gè)form-group的父布局，里面有l(wèi)abel和input--> <div class="form-group"> <!--label的for要和input的id對(duì)應(yīng)--> <label for="exampleInputEmail1">Email address</label> <!--input的class要設(shè)為form-control--> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <!--幫助提示文字--> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form></div>
如果將form的類設(shè)為form-inline則將所有元素顯示在同一行
如果將form的類設(shè)為form-horizontal則每個(gè)form-group顯示一行，不過要自己設(shè)置寬度
如
<div class="container"> <!--讓每一個(gè)form-group顯示一行，不過每個(gè)form-group的子項(xiàng)都要規(guī)定寬度--> <form class="form-horizontal"> <div class="form-group"> <label for="Emai" class="col-md-2 control-label">Email</label> <!--input-group讓提示和補(bǔ)充顯示在同一行--> <div class="col-md-10"> <input class="form-control" type="email" placeholder="Email" id="Emai"> </div> </div> <div class="form-group"> <label for="Passwor" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input class="form-control" type="password" placeholder="Password" id="Passwor"> </div> </div> <button type="submit" class="btn btn-primary col-md-offset-2">summit</button> </form></div>
我們通常在注冊(cè)賬號(hào)時(shí)，信息錯(cuò)誤或者正確他會(huì)在旁邊提示，而且輸入框的顏色會(huì)不同
Bootstrap給我們提供了這個(gè)很實(shí)用的功能
<div class="container"> <form> <!--父div的類要增加兩項(xiàng)--> <!--成功狀態(tài)--> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess2">Input with success</label> <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status"> <!--右邊的圖標(biāo)--> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <!--這個(gè)信息隱藏，增加了代碼的可讀性--> <span id="inputSuccess2Status" class="sr-only">(success)</span> </div> <!--警告狀態(tài)--> <div class="form-group has-warning has-feedback"> <label class="control-label" for="inputWarning2">Input with warning</label> <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status"> <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span> <span id="inputWarning2Status" class="sr-only">(warning)</span> </div> <!--錯(cuò)誤狀態(tài)--> <div class="form-group has-error has-feedback"> <label class="control-label" for="inputError2">Input with error</label> <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status"> <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> <span id="inputError2Status" class="sr-only">(error)</span> </div> </form></div>
7.按鈕
按鈕是必不可少的一樣?xùn)|西
<!-- 白色背景 --><button type="button" class="btn btn-default">（默認(rèn)樣式）Default</button><!-- 藍(lán)色背景 --><button type="button" class="btn btn-primary">（首選項(xiàng)）Primary</button><!-- 綠色背景 --><button type="button" class="btn btn-success">（成功）Success</button><!-- 淺藍(lán)色背景 --><button type="button" class="btn btn-info">（一般信息）Info</button><!-- 橙黃色背景 --><button type="button" class="btn btn-warning">（警告）Warning</button><!-- 紅色背景 --><button type="button" class="btn btn-danger">（危險(xiǎn)）Danger</button>
類中還可以添加尺寸
<button type="button" class="btn btn-primary btn-lg">（大按鈕）Large button</button> <button type="button" class="btn btn-primary">（默認(rèn)尺寸）Default button</button> <button type="button" class="btn btn-primary btn-sm">（小按鈕）Small button</button> <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
以上就是Bootstrap的使用步驟和常用用法
用上這個(gè)框架后不僅開發(fā)的速度上去了，質(zhì)量也提升了。
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
