1.bootstrap的安裝
（1）使用在線文件或下載引入使用
在線使用
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
本地引入
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<title>Bootstrap Template</title>
<!-- Bootstrap -->
<link href="lib/css/bootstrap.css" rel="stylesheet">
</head>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="lib/JS/jquery.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
<script src="lib/JS/bootstrap.js"></script>
（2）通過npm方式安裝
$ npm install bootstrap@3
require('bootstrap') 代碼的作用是加載 Bootstrap 的所有 jQuery 插件。其中，bootstrap 模塊自身並不導出任何內容。你可以通過加載安裝包頂級目錄下的 /js/*.js文件的方式手動加載單個的 Bootstrap 插件。
Bootstrap 的 package.json文件包含了一些額外的元數據：
less - Bootstrap源碼的入口 Less 文件的路徑
style - Bootstrap 的未壓縮 CSS 文件的路徑
（3）基本模板示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
<!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
2.全局樣式
（1）Bootstrap 是移動設備優先的
爲了確保適當的繪製和觸屏縮放，需要在 之中添加 viewport 元數據標籤。
<meta name="viewport" content="width=device-width, initial-scale=1">
在移動設備瀏覽器上，通過爲視口（viewport）設置 meta 屬性爲 user-scalable=no 可以禁用其縮放（zooming）功能。這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓網站看上去更像原生應用的感覺。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
（2）佈局和容器
.container類用於固定寬度並支持響應式佈局的容器。
<div class="container">
...
</div>
.container-fluid類用於 100% 寬度，佔據全部視口（viewport）的容器。
<div class="container">
...
</div>
（3）柵格系統
柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面佈局。
<div class="row">
<div class="col-md-1">bootstrap1</div>
<div class="col-md-1">bootstrap1</div>
<div class="col-md-1">bootstrap1</div>
<div class="col-md-1">bootstrap1</div>
<div class="col-md-1">bootstrap1</div>
<div class="col-md-1">bootstrap1</div>
<div class="col-md-1">bootstrap1</div>
<div class="col-md-1">bootstrap1</div>
<div class="col-md-1">bootstrap1</div>
<div class="col-md-1">bootstrap1</div>
<div class="col-md-1">bootstrap1</div>
<div class="col-md-1">bootstrap1</div>
</div>
<div class="row">
<div class="col-md-8">bootstrap-8</div>
<div class="col-md-4">bootstrap-4</div>
</div>
<div class="row">
<div class="col-md-4">bootstrap-4</div>
<div class="col-md-4">bootstrap-4</div>
<div class="col-md-4">bootstrap-4</div>
</div>
<div class="row">
<div class="col-md-6">bootstrap-6</div>
<div class="col-md-6">bootstrap-6</div>
</div>
（4）表格
爲任意<table> 標籤添加 .table類可以爲其賦予基本的樣式 — 少量的內補（padding）和水平方向的分隔線。
<table class="table">
...
</table>
添加 .table-bordered 類爲表格和其中的每個單元格增加邊框。
<table class="table table-bordered">
...
</table>
通過添加 .table-hover 類可以讓 中的每一行對鼠標懸停狀態作出響應。
<table class="table table-hover">
...
</table>
通過這些狀態類可以爲行或單元格設置顏色。
| Class | 描述 |
|---|---|
| .active | 鼠標懸停在行或單元格上時所設置的顏色 |
| .success | 標識成功或積極的動作 |
| .info | .info |
| .warning | 標識警告或需要用戶注意 |
| .danger | 標識危險或潛在的帶來負面影響的動作 |
（5）表單
單獨的表單控件會被自動賦予一些全局樣式。所有設置了.form-control類的 <input>、<textarea> 和<select>元素都將被默認設置寬度屬性爲 width: 100%;。 將label元素和前面提到的控件包裹在.form-group中可以獲得最好的排列。
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<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>
1.內聯表單
爲 <form> 元素添加.form-inline類可使其內容左對齊並且表現爲inline-block級別的控件。只適用於視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單摺疊）。
2.水平排列的表單
通過爲表單添加.form-horizontal 類，並聯合使用Bootstrap 預置的柵格類，可以將label 標籤和控件組水平並排佈局。這樣做將改變.form-group的行爲，使其表現爲柵格系統中的行（row），因此就無需再額外添加.row了。
3.內聯單選和多選框
通過將.checkbox-inline或 .radio-inline類應用到一系列的多選框（checkbox）或單選框（radio）控件上，可以使這些控件排列在一行。
4.靜態控件
如果需要在表單中將一行純文本和label元素放置於同一行，爲<p> 元素添加 .form-control-static 類即可。
5.焦點狀態
我們將某些表單控件的默認outline樣式移除，然後對:focus 狀態賦予 box-shadow 屬性。
6.禁用狀態
爲輸入框設置disabled屬性可以禁止其與用戶有任何交互（焦點、輸入等）。被禁用的輸入框顏色更淺，並且還添加了not-allowed鼠標狀態。
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
7.被禁用的 fieldset
爲<fieldset> 設置 disabled 屬性,可以禁用<fieldset> 中包含的所有控件。
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
8.按鈕
爲 <a>、<button>或 <input>元素添加按鈕類（button class）即可使用 Bootstrap 提供的樣式。
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
預定義樣式
<!-- Standard button -->
<button type="button" class="btn btn-default">（默認樣式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首選項）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危險）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（鏈接）Link</button>
使用.btn-lg、.btn-sm或.btn-xs 就可以獲得不同尺寸的按鈕。
通過給按鈕添加.btn-block類可以將其拉伸至父元素100%的寬度，而且按鈕也變爲了塊級（block）元素。
激活狀態
當按鈕處於激活狀態時，其表現爲被按壓下去（底色更深、邊框夜色更深、向內投射陰影）。對於<button>元素，是通過 :active 狀態實現的。對於 <a> 元素，是通過 .active 類實現的。然而，你還可以將 .active 應用到 <button>上（包含 aria-pressed="true" 屬性)），並通過編程的方式使其處於激活狀態。
button 元素
由於 :active 是僞狀態，因此無需額外添加，但是在需要讓其表現出同樣外觀的時候可以添加 .active 類。
鏈接（<a>）元素
可以爲基於<a>元素創建的按鈕添加 .active 類。
禁用狀態
通過爲按鈕的背景設置 opacity 屬性就可以呈現出無法點擊的效果。
button 元素
爲<button> 元素添加 disabled 屬性，使其表現出禁用狀態。
鏈接（<a>）元素
爲基於<a>元素創建的按鈕添加.disabled 類。
（6）圖片
在 Bootstrap 版本 3 中，通過爲圖片添加 .img-responsive 類可以讓圖片支持響應式佈局。其實質是爲圖片設置了 max-width: 100%;、 height: auto; 和 display: block; 屬性，從而讓圖片在其父元素中更好的縮放。
如果需要讓使用了 .img-responsive 類的圖片水平居中，請使用 .center-block 類，不要用 .text-center。
通過爲 <img>元素添加以下相應的類，可以讓圖片呈現不同的形狀。
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
3.組件
（1）Glyphicons 字體圖標
（2）下拉菜單
將下拉菜單觸發器和下拉菜單都包裹在 .dropdown 裏，或者另一個聲明瞭 position: relative; 的元素。然後加入組成菜單的 HTML 代碼。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
爲下拉菜單中的 <li>元素添加 .disabled 類，從而禁用相應的菜單項。
（3）按鈕組
把一組 <div class="btn-group">組合進一個 <div class="btn-toolbar">中就可以做成更復雜的組件。
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
（4）導航
Bootstrap 中的導航組件都依賴同一個 .nav 類，狀態類也是共用的。改變修飾類可以改變樣式。
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
注意 .nav-tabs 類依賴 .nav 基類。
（5）分頁
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
（6）徽章
給鏈接、導航等元素嵌套 元素，可以很醒目的展示新的或未讀的信息條目。
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
（7）警告框
將任意文本和一個可選的關閉按鈕組合在一起就能組成一個警告框，.alert 類是必須要設置的，另外我們還提供了有特殊意義的4個類（例如，.alert-success），代表不同的警告信息。
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
（8）進度條
將設置了 .sr-only 類的 標籤從進度條組件中移除 類，從而讓當前進度顯示出來。
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
爲 .progress-bar-striped 添加 .active 類，使其呈現出由右向左運動的動畫效果。IE9 及更低版本的瀏覽器不支持。
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
4.JavaScript插件
（1）模態框
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
（2）彈出框
靜態彈出框
4個可能的彈出方向：頂部、右側、底部和左側。
點擊並讓彈出框消失
通過使用 focus 觸發器可以在用戶點擊彈出框是讓其消失。
（3）手風琴
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<title>Bootstrap Template</title>
<!-- Bootstrap -->
<link href="lib/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
手風琴系列 #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
手風琴（accordion)是一種既能夠獨奏，又能伴奏的鍵盤樂器，不僅能夠演奏單聲部的優美旋律，還可以演奏多聲部的樂曲，更可以如鋼琴一樣雙手演奏豐富的和聲。手風琴聲音宏大，音色變化豐富，手指與風箱的巧妙結合，能夠演奏出多種不同風格的樂曲，這是許多樂器無法比擬的；除了獨立演奏外，也可參加重奏、合奏，可以說一架手風琴就是一個小型樂隊。加之音高固定，易學易懂，體積小，攜帶方便，因此，手風琴很適合不同年齡的演奏者自娛自樂，也可以很方便地攜帶到學校、劇場參加演出。
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
手風琴系列 #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
手風琴（accordion)是一種既能夠獨奏，又能伴奏的鍵盤樂器，不僅能夠演奏單聲部的優美旋律，還可以演奏多聲部的樂曲，更可以如鋼琴一樣雙手演奏豐富的和聲。手風琴聲音宏大，音色變化豐富，手指與風箱的巧妙結合，能夠演奏出多種不同風格的樂曲，這是許多樂器無法比擬的；除了獨立演奏外，也可參加重奏、合奏，可以說一架手風琴就是一個小型樂隊。加之音高固定，易學易懂，體積小，攜帶方便，因此，手風琴很適合不同年齡的演奏者自娛自樂，也可以很方便地攜帶到學校、劇場參加演出。
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
手風琴系列 #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
手風琴（accordion)是一種既能夠獨奏，又能伴奏的鍵盤樂器，不僅能夠演奏單聲部的優美旋律，還可以演奏多聲部的樂曲，更可以如鋼琴一樣雙手演奏豐富的和聲。手風琴聲音宏大，音色變化豐富，手指與風箱的巧妙結合，能夠演奏出多種不同風格的樂曲，這是許多樂器無法比擬的；除了獨立演奏外，也可參加重奏、合奏，可以說一架手風琴就是一個小型樂隊。加之音高固定，易學易懂，體積小，攜帶方便，因此，手風琴很適合不同年齡的演奏者自娛自樂，也可以很方便地攜帶到學校、劇場參加演出。
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="lib/JS/jquery.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
<script src="lib/JS/bootstrap.js"></script>
</body>
</html>
（4）輪播圖
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<title>Bootstrap Template</title>
<!-- Bootstrap -->
<link href="lib/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="lib/JS/jquery.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
<script src="lib/JS/bootstrap.js"></script>
</body>
</html>