功能強(qiáng)大的Bootstrap使用手冊（一）

更新時(shí)間：2016年08月02日 14:16:45 作者：qq_32198277

這篇文章主要為大家詳細(xì)介紹了功能強(qiáng)大的Bootstrap使用手冊，分享了Bootstrap使用步驟和常用用法，感興趣的小伙伴們可以參考一下

BootStrap對開發(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">
 <!--針對響應(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)
簡單的使用如下

<div class="row">
 <!--xs表示在手機(jī)上，sm表示在平板上，md表示在桌面上。后面的數(shù)字表示占多少列，滿屏為12列-->
 <!--內(nèi)容超過柵格高度，則會增加高度，不會增加寬度-->
 <!--offset表示向右移動幾列-->
 <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向后移動，pull向前移動-->
 <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)容太長可以左右移動-->
 <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對應(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>

我們通常在注冊賬號時(shí)，信息錯誤或者正確他會在旁邊提示，而且輸入框的顏色會不同
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>
 <!--錯誤狀態(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è)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: