BootStrap對開發者來說最大的好處就是響應式佈局和一些優秀的樣式。
現在我給大家介紹一些使用BootStrap的步驟和一些常用的東西。
1.編寫頭部
<head> <meta charset="UTF-8"> <!--為了讓ie採用最新的渲染模式，要把這個標籤添加上--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--針對響應式佈局，首先獲取設備的物理寬度，根據設備物理寬度設置網頁寬度，按照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" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!--為了支持ie9以下，要加上這些--> <!--[if lt IE 9]> <!--讓他支持h5標籤--> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <!--讓他支持媒體查詢，也就是響應式--> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <!--[endif]--></head>
2.引入js
這個可以寫在body
<!-- jQuery文件。務必在bootstrap.min.js 之前引入--><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- 最新的Bootstrap 核心JavaScript 文件--><script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
3.使用container類
container類是一個常用的div類
主要是用居中功能
<div>hello</div>
4.使用柵格化系統
柵格化系統是BootStrap一個非常常用的一個佈局系統
簡單的使用如下
<div> <!--xs表示在手機上，sm表示在平板上，md表示在桌面上。後面的數字表示佔多少列，滿屏為12列--> <!--內容超過柵格高度，則會增加高度，不會增加寬度--> <!--offset表示向右移動幾列--> <div>.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>.col-xs-6 .col-md-4</div></div><div> <!--push向後移動，pull向前移動--> <div>.col-xs-12 .col-sm-6 .col-md-8</div> <div>.col-xs-6 .col-md-4</div></div>
可以看到柵格化系統可以根據不同設備調整不同寬度
5.使用表格
<div> <!--響應式表格，內容太長可以左右移動--> <div> <!--table 後幾個分別是表格有邊框，鼠標經過tbody行時顏色加深，表格緊縮--> <table> <thead> <tr> <th>表格標題</th> <th>表格標題</th> <th>表格標題</th> </tr> </thead> <tbody> <!--該行顏色為淺綠--> <tr> <th>表格內容</th> <th>表格內容</th> <th>表格內容</th> </tr> <!--該行顏色為淺藍--> <tr> <th>表格內容</th> <th>表格內容</th> <th>表格內容</th> </tr> <!--該行顏色為米白--> <tr> <th>表格內容</th> <th>表格內容</th> <th>表格內容</th> </tr> </tbody> </table> </div></div>
如果是想某一格變顏色也可以在th標籤內加類像tr一樣
6.使用表單
最基本的用法如下
<div> <form> <!--的部分項是一個form-group的父佈局，裡面有label和input--> <div> <!--label的for要和input的id對應--> <label for="exampleInputEmail1">Email address</label> <!--input的class要設為form-control--> <input type="email" id="exampleInputEmail1" placeholder="Email"> </div> <div> <label for="exampleInputPassword1">Password</label> <input type="password" id="exampleInputPassword1" placeholder="Password"> </div> <div> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <!--幫助提示文字--> <p>Example block-level help text here.</p> </div> <div> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit">Submit</button> </form></div>
如果將form的類設為form-inline則將所有元素顯示在同一行
如果將form的類設為form-horizontal則每個form-group顯示一行，不過要自己設置寬度
如
<div> <!--讓每一個form-group顯示一行，不過每個form-group的子項都要規定寬度--> <form> <div> <label for="Emai">Email</label> <!--input-group讓提示和補充顯示在同一行--> <div> <input type="email" placeholder="Email" id="Emai"> </div> </div> <div> <label for="Passwor">Password</label> <div> <input type="password" placeholder="Password" id="Passwor"> </div> </div> <button type="submit">summit</button> </form></div>
我們通常在註冊賬號時，信息錯誤或者正確他會在旁邊提示，而且輸入框的顏色會不同
Bootstrap給我們提供了這個很實用的功能
<div> <form> <!--父div的類要增加兩項--> <!--成功狀態--> <div> <label for="inputSuccess2">Input with success</label> <input type="text" id="inputSuccess2" aria-describedby="inputSuccess2Status"> <!--右邊的圖標--> <span aria-hidden="true"></span> <!--這個信息隱藏，增加了代碼的可讀性--> <span id="inputSuccess2Status">(success)</span> </div> <!--警告狀態--> <div> <label for="inputWarning2">Input with warning</label> <input type="text" id="inputWarning2" aria-describedby="inputWarning2Status"> <span aria-hidden="true"></span> <span id="inputWarning2Status">(warning)</span> </div> <!--錯誤狀態--> <div> <label for="inputError2">Input with error</label> <input type="text" id="inputError2" aria-describedby="inputError2Status"> <span aria-hidden="true"></span> <span id="inputError2Status">(error)</span> </div> </form></div>
7.按鈕
按鈕是必不可少的一樣東西
<!-- 白色背景--><button type="button">（默認樣式）Default</button><!-- 藍色背景--><button type="button">（首選項）Primary</button><!-- 綠色背景--><button type="button">（成功）Success</button><!-- 淺藍色背景--><button type="button">（一般信息）Info</button><!-- 橙黃色背景--><button type="button">（警告）Warning</button><!-- 紅色背景--><button type="button">（危險）Danger</button>
類中還可以添加尺寸
<button type="button">（大按鈕）Large button</button> <button type="button">（默認尺寸）Default button</button> <button type="button">（小按鈕）Small button</button> <button type="button">（超小尺寸）Extra small button</button>
以上就是Bootstrap的使用步驟和常用用法
用上這個框架後不僅開發的速度上去了，質量也提升了。
如果大家還想深入學習，可以點擊這裡進行學習，再為大家附3個精彩的專題：
Bootstrap學習教程
Bootstrap實戰教程
Bootstrap插件使用教程
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。