Bootstrap
- 概念：一個前端開發的框架，Bootstrap，來自Twitter，是目前很受歡迎的前端框架。Bootstrap是基於HTML、CSS、JavaScript的，它簡介靈活，使得Web開發更加的快捷。
- 框架：一個半成品軟件，開發人員可以在框架基礎上，在進行開發，簡化代碼。
- 好處：①、定義了很多的css樣式和js插件。②、響應式佈局。【同一套頁面可以兼容不同分別率的設備】
快速入門
- 下載：用於生產環境的 Bootstrap
- 複製這三個文件夾【css、fonts、js】到項目文件夾中。
然後再往js文件中導入jquery-3.2.1.min.js - 創建html頁面，引入必要的資源文件。在Bootstrap中文網中上面的菜單欄找到“ 起步 ”，然後往下找到" 基本模板 " 基本模板如下：
<!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 HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
響應式佈局
想要詳細瞭解響應式佈局，可參照文檔👉全局 CSS 樣式
- 同一套頁面可以兼容不同分別率的設備。
- 實現：依賴於柵格系統。柵格系統：將一行平均分成12個格子，可以指定元素佔幾個格子。
Boostrap柵格系統：
步驟：
- 定義容器。相當於之前的table。
容器分類：
①、container：兩邊留白。
②、container-fluid：每一種設備都是100%寬度。 - 定義行。相當於之前的 tr 樣式：row。
- 定義元素。 指定該元素在不同的設備上，所佔的格子數目。樣式：col - 設備 - 格子數目
![在這裏插入圖片描述]()
- 注意：
①、一行中如果格子數目超過12，則超出部分自動換行。
②、柵格類屬性可以向上兼容。柵格類適用於與屏幕寬度大於或等於分界點大小的設備。
③、如果真實設備寬度小於了設置柵格類屬性的代碼的最小值，一個元素會沾滿一整行。
通過下面的代碼我們可以觀察到PC端和手機端不同響應式的格局。
<body>
<!-- 1.定義容器 -->
<div class="container-fluid">
<!-- 2.定義行 -->
<div class="row">
<!-- 3.定義元素、在大顯示器上一行12個格子、在pad上一行6個格子-->
<div class="col-lg-1 col-sm-2 inner ">柵格</div>
<div class="col-lg-1 col-sm-2 inner ">柵格</div>
<div class="col-lg-1 col-sm-2 inner ">柵格</div>
<div class="col-lg-1 col-sm-2 inner ">柵格</div>
<div class="col-lg-1 col-sm-2 inner ">柵格</div>
<div class="col-lg-1 col-sm-2 inner ">柵格</div>
<div class="col-lg-1 col-sm-2 inner ">柵格</div>
<div class="col-lg-1 col-sm-2 inner ">柵格</div>
<div class="col-lg-1 col-sm-2 inner ">柵格</div>
<div class="col-lg-1 col-sm-2 inner ">柵格</div>
<div class="col-lg-1 col-sm-2 inner ">柵格</div>
<div class="col-lg-1 col-sm-2 inner ">柵格</div>
</div>
</div>
</body>
手機端的響應式格局：
PC端響應式格局：
CSS樣式和JS插件
全局CSS樣式：
- 按鈕：
class = " btn btn-default "其中的default可以修改爲以下內容
<button type="button" class="btn btn-default">（默認樣式）Default</button>
<button type="button" class="btn btn-primary">（首選項）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<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">（危險）Danger</button>
<button type="button" class="btn btn-link">（鏈接）Link</button>
- 圖片：
class="img-responsive"指的是圖片在任意模式都佔100%
<img src="banner_1.jpg" class="img-responsive">
圖片形狀：
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
- 表格：
①、條紋狀表格：通過.table-striped類可以給<tbody>之內的每一行增加斑馬條紋樣式。
<table class="table table-striped">
...
</table>
②、帶邊框的表格：添加 .table-bordered類爲表格和其中的每個單元格增加邊框。
<table class="table table-bordered">
...
</table>
③、鼠標懸停：通過添加 .table-hover類可以讓 <tbody>中的每一行對鼠標懸停狀態作出響應。
<table class="table table-hover">
...
</table>
- 表單：Bootstrap 通過一些簡單的 HTML 標籤和擴展的類即可創建出不同樣式的表單。
👉菜鳥教程Bootstrap 表單
JS組件導航條
- 默認樣式的導航條
導航條是在您的應用或網站中作爲導航頁頭的響應式基礎組件。它們在移動設備上可以摺疊（並且可開可關），且在視口（viewport）寬度增加時逐漸變爲水平展開模式。
導航條內所包含元素溢出，通過修改@grid-float-breakpoint變量實現，或者自己重寫相關的媒體查詢代碼，覆蓋 Bootstrap 的默認值。依賴 JavaScript 插件，如果 JavaScript 被禁用，並且視口（viewport）足夠窄，致使導航條摺疊起來，導航條將不能被打開，.navbar-collapse內所包含的內容也將不可見。導航條的可訪問性，務必使用<nav>元素，或者，如果使用的是通用的<div>元素的話，務必爲導航條設置role="navigation"屬性，這樣能夠讓使用輔助設備的用戶明確知道這是一個導航區域。
Bootstrap組件分頁條
Bootstrap中文網【分頁】
默認分頁：
<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>
禁用和激活狀態：
鏈接在不同情況下可以定製。你可以給不能點擊的鏈接添加 .disabled類、給當前頁添加 .active類。
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
我們建議將 active 或 disabled 狀態的鏈接（即<a>標籤）替換爲 <span> 標籤，或者在向前/向後的箭頭處省略<a> 標籤，這樣就可以讓其保持需要的樣式而不能被點擊。
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
JS插件Carousel【輪播圖】
Bootstrap中文網JS插件Carousel【輪播圖】
<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>