Bootstrap 是一個(gè)由 Twitter 開源的前端框架窝剖，是目前最受歡迎的前端框架落蝙，也是 github 上最火的前端框架胰锌。Bootstrap 基于 HTML、CSS芹血、JavaScript 贮泞，它簡(jiǎn)潔靈活，使 Web 開發(fā)更加的快捷幔烛。
在構(gòu)建 Web 應(yīng)用時(shí)啃擦，一個(gè)最頭疼的問題就是各種瀏覽器的兼容性，同時(shí)還要考慮各種手機(jī)的頁面的適配饿悬，而使用 Bootstrap 可以快速搭建出一個(gè)簡(jiǎn)潔美觀的界面令蛉。只要你具備 HTML 和 CSS 的基礎(chǔ)知識(shí)，就可以開始學(xué)習(xí) Bootstrap乡恕。
下載
可以訪問 bootatrap 的英文官方網(wǎng)站言询，
也可以訪問 bootstrap 的中文網(wǎng)站
下載哪個(gè)呢？筆者用的是用于生產(chǎn)環(huán)境的 Bootstrap
下載成功后可以得到一個(gè) bootstrap-3.3.7-dist.zip 的文件傲宜，解壓后我們可以得到一個(gè)包含css、fonts和js的文件夾夫啊。
bootstrap-3.3.7-dist
├── css
│ ├── bootstrap-theme.css //主題的樣式
│ ├── bootstrap-theme.css.map //map 是映射
│ ├── bootstrap-theme.min.css //.min 是壓縮版本
│ ├── bootstrap.css //我們將要用到的主要的部分
│ ├── bootstrap.css.map
│ └── bootstrap.min.css
├── fonts //字體
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
└── js //腳本
├── bootstrap.js //我們將要用到的主要的部分
├── bootstrap.min.js
demo
根據(jù)官網(wǎng)上的示例函卒，做了個(gè)簡(jiǎn)單的測(cè)試頁面：
第一步：導(dǎo)入 bootstrap.css、 bootstrap.js 和 jquery-1.12.4.js
bootstrap的js必須依賴Jquery撇眯。所以在導(dǎo)入JS的時(shí)候报嵌，得先導(dǎo)入Jquery.
第二步：根據(jù)示例做一下簡(jiǎn)單修改
Bootstrap 的響應(yīng)式 CSS 能夠自適應(yīng)于臺(tái)式機(jī)、平板電腦和手機(jī)熊榛。當(dāng)你用不同的設(shè)備打開時(shí)锚国，能夠根據(jù)平臺(tái)的不同自動(dòng)調(diào)節(jié)樣式：
效果圖：
筆者使用了兩個(gè)組件，一個(gè)是 jumbotron（超大屏幕）玄坦；一個(gè)是 checkout （表單）血筑；
jumbotron 是使被修飾的部分以超大的字體顯示，可以很明顯的看出 h1 字體變得巨大煎楣；
其中 h1 small 是指被修飾的是 h1 的副標(biāo)題豺总，以淺灰色的小號(hào)字體顯示；
checkout 表單中有兩部分择懂，左邊的購物車和右邊的賬單地址喻喳，很普通的表單。當(dāng)你的平臺(tái)變化時(shí)困曙，
表單的位置和大小自動(dòng)適應(yīng)表伦；
下面的效果更加明顯：屏幕小時(shí)只能看到圖標(biāo)谦去，屏幕大時(shí)可以看到圖標(biāo)加文字
源碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一個(gè)網(wǎng)頁</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron container">
<div >
<h1>Hello, world! <small>hello</small></h1>
</div>
</div>
<div class="container">
<div class="py-5 text-center">
<h2>訂單確認(rèn)</h2>
<p class="lead">這是一個(gè)測(cè)試用的表單</p>
</div>
<div class="row">
<div class="col-md-4 order-md-2 mb-4">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">購物車</span>
<span class="badge badge-secondary badge-pill">2</span>
</h4>
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">水杯 500ml</h6>
<small class="text-muted">小馬哥水杯自營(yíng)</small>
</div>
<span class="text-muted">￥50</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-condensed">
<div>
<h6 class="my-0">背包</h6>
<small class="text-muted">威爾仕專營(yíng)</small>
</div>
<span class="text-muted">￥380</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>合計(jì)：</span>
<strong>￥430</strong>
</li>
</ul>
<form class="card p-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="優(yōu)惠碼">
<div class="input-group-append">
<button type="submit" class="btn btn-secondary">兌換</button>
</div>
</div>
</form>
</div>
<div class="col-md-8 order-md-1">
<h4 class="mb-3">賬單地址</h4>
<form class="needs-validation" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName">會(huì)員號(hào)</label>
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
<div class="invalid-feedback">
會(huì)員號(hào)不能為空
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName">聯(lián)系電話</label>
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
<div class="invalid-feedback">
聯(lián)系電話不能為空
</div>
</div>
</div>
<br/>
<div class="mb-3">
<label for="username">真實(shí)姓名</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"></span>
</div>
<input type="text" class="form-control" id="username" placeholder="" required>
<div class="invalid-feedback" style="width: 100%;">
姓名不能為空
</div>
</div>
</div>
<br/>
<div class="mb-3">
<label for="address">地址</label>
<input type="text" class="form-control" id="address" placeholder="深圳市羅湖區(qū)" required>
<div class="invalid-feedback">
請(qǐng)輸入收貨地址
</div>
</div>
<br/>
<div class="mb-3">
<label for="address2">地址 2 <span class="text-muted">(可選)</span></label>
<input type="text" class="form-control" id="address2" placeholder="深圳市龍崗區(qū)">
</div>
<div class="row">
<div class="col-md-5 mb-3">
<label for="country">省份</label>
<select class="custom-select d-block w-100" id="country" required>
<option value="">請(qǐng)選擇</option>
<option>廣東省</option>
<option>湖南省</option>
</select>
<div class="invalid-feedback">
請(qǐng)選擇一個(gè)省份
</div>
</div>
<div class="col-md-4 mb-3">
<label for="state">State</label>
<select class="custom-select d-block w-100" id="state" required>
<option value="">請(qǐng)選擇</option>
<option>羅湖區(qū)</option>
<option>龍崗區(qū)</option>
</select>
<div class="invalid-feedback">
請(qǐng)選擇一個(gè)地區(qū)
</div>
</div>
<div class="col-md-3 mb-3">
<label for="zip">郵編</label>
<input type="text" class="form-control" id="zip" placeholder="" required>
<div class="invalid-feedback">
郵編不能為空
</div>
</div>
</div>
<hr class="mb-4">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="save-info">
<label class="custom-control-label" for="save-info">保存地址</label>
</div>
<hr class="mb-4">
<h4 class="mb-3">付款</h4>
<div class="d-block my-3">
<div class="custom-control custom-radio">
<input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked required>
<label class="custom-control-label" for="credit">信用卡</label>
</div>
<div class="custom-control custom-radio">
<input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required>
<label class="custom-control-label" for="debit">銀聯(lián)卡</label>
</div>
<div class="custom-control custom-radio">
<input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required>
<label class="custom-control-label" for="paypal">支付寶</label>
</div>
<div>
<input id="wechat" name="paymentMethod" type="radio" class="custom-control-input" required>
<label class="custom-control-label" for="wechat">微信</label>
</div>
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">確認(rèn)提交</button>
</form>
</div>
</div>
<footer class="my-5 pt-5 text-muted text-center text-small">
<p class="mb-1">© 2017-2018 版權(quán)所有</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">隱私條款</a></li>
<li class="list-inline-item"><a href="#">幫助中心</a></li>
<li class="list-inline-item"><a href="#">技術(shù)支持</a></li>
</ul>
</footer>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
