簡介：
前端開發框架，它由規范的css，javascript插件構成。
特點
簡單靈活可用於架構流行的用戶界面和交互接口的html、css、javascript工具集。
友好的學習曲線，卓越的兼容性，響應式設計，12列格網，樣式向導文檔。
自定義JQuery插件，完整的類庫，基於Less等
Bootstrap 響應式布局設w使用體驗。
用法：
1.顯示與隱藏 下面是現成的圖
介紹：就是在手機端或者平板切換的屏幕大小的時候，控制當前模塊是否顯示和隱藏。
借鑒地址：https://www.cnblogs.com/hgnulb/p/10042916.html
2.網格系統
描述：這個網格系統其實就是將當前的屏幕划分成12份，通過col-份數設置當前容器的大小 下面列出的是不同設備需要設置的屬性 col-md-1
如下所示：如果設置sm 不設置 md 那么將以sm的尺寸來顯示。
xs < 768
sm>768
md>992
lg>1200
2.1實例 手機和電腦顯示，還有這種流式布局，就像一鍋稀飯直接倒在幾個盆子里，有大盆子有小盆子
<body> <div class="row"><!--row表示一行，子集組成一行--> <div class="col-1 border border-primary" >1</div> <div class="col-1 border border-primary" >1</div> <div class="col-1 border border-primary" >1</div> <div class="col-1 border border-primary" >1</div> <div class="col-1 border border-primary" >1</div> <div class="col-1 border border-primary" >1</div> <div class="col-1 border border-primary" >1</div> <div class="col-1 border border-primary" >1</div> <div class="col-1 border border-primary" >1</div> <div class="col-1 border border-primary" >1</div> <div class="col-1 border border-primary" >1</div> <div class="col-1 border border-primary" >1</div> </div> <div class="row"> <div class="col-2 border border-success" >2</div> <div class="col-2 border border-success" >2</div> <div class="col-2 border border-success" >2</div> <div class="col-2 border border-success" >2</div> <div class="col-2 border border-success" >2</div> <div class="col-2 border border-success" >2</div> </div> <div class="row"> <div class=" col-md-3 col-sm-6 border border-warning">3</div> <div class=" col-md-3 col-sm-6 border border-warning">3</div> <div class=" col-md-3 col-sm-6 border border-warning">3</div> <div class=" col-md-3 col-sm-6 border border-warning">3</div> </div>
電腦顯示
手機顯示
2.2 實例
<body> <div class="row"> <div class="col-md-4 border border-primary"><p>計算機計算機計算機凄凄切切群群群群群凄凄切切群群群群群凄凄切切群群群群群凄凄切切群群群群群凄凄切切群群群群群凄凄切切群群群群群QQ群群群群群群群群計算機計算機計算機</p></div> <div class="col-md-4 border border-primary"><p>筆記本筆記版筆記本筆記本</p></div> <div class="col-md-4 border border-primary"><p>手機手機手機手機手機手機手機手機手機手機手機手機手機手機手機手機</p></div> </div> </body>
顯示
2.3偏移列 BootStrap4 寫法是 offset-md-5 其他版本是 col-md-offset-5 offset是關鍵字，后面的數字5是索引，row 12等分，0~11
<body> <div class="row"> <div class="col-md-1 border border-primary">index0</div> <div class="col-md-1 border border-primary">index1</div> <div class="col-md-1 border border-primary">index02</div> <div class="col-md-1 border border-primary">index3</div> <div class="col-md-1 border border-primary">index4</div> <div class="col-md-1 border border-primary">index5</div> <div class="col-md-1 border border-primary">index6</div> <div class="col-md-1 border border-primary">index7</div> <div class="col-md-1 border border-primary">index8</div> <div class="col-md-1 border border-primary">index9</div> <div class="col-md-1 border border-primary">index10</div> <div class="col-md-1 border border-primary">index11</div> </div> <div class="row"> <div class="col-md-1 offset-md-5 border border-warning"> 我在第五個位置 </div> </div> <div class="row"> <div class="col-md-1 offset-md-4 border border-warning"> 我在第四個位置 </div> </div> <div class="row"> <div class="col-md-1 offset-md-3 border border-warning"> 我在第三個位置我的長度是1 </div> </div> <div class="row"> <div class="col-md-2 offset-md-2 border border-warning"> 我在第二個位置，並且的我的長度是2 </div> </div> </body>
效果
2.3嵌套列 這個一般用於網站布局比較常用的
例如：
我想作出這個樣子
代碼
<div class="container"> <div class="row"> <div class="col-md-7 justify-content-center border-left border-right border-top border-dark " style="background-color: #ED7D31; height: 65px; "> <h2 class="align-self-center" style="text-align: center; color: white; line-height: 62px;"><b>單月活動共計費用</b></h2> </div> </div> <div class="row" > <div class="col-md-1 border-left border-top border-dark" style="background-color: #ED7D31; height:35px; text-align: center; line-height: 30px;"><p style="color: white">平台</p></div> <div class="col-md-2 border-left border-top border-dark" style="background-color: #ED7D31; height:35px; text-align: center; line-height: 30px;"><p style="color: white">物品名</p></div> <div class="col-md-1 border-left border-top border-dark" style="background-color: #ED7D31; height:35px; text-align: center; line-height: 30px;"><p style="color: white">數量</p></div> <div class="col-md-1 border-left border-top border-dark" style="background-color: #ED7D31; height:35px; text-align: center; line-height: 30px;"><p style="color: white">價值</p></div> <div class="col-md-1 border-left border-top border-dark" style="background-color: #ED7D31; height:35px; text-align: center; line-height: 30px;"><p style="color: white">合計</p></div> <div class="col-md-1 border-left border-top border-right border-dark " style="background-color: #ED7D31; height:35px; text-align: center; line-height: 30px;"><p style="color: white">共計</p></div> </div> <div class="row" style="height:100px;"> <div class="col-md-1 border-left border-top border-dark" style="text-align: center; height: 100px; line-height: 100px; "><p style="color: black">QQ</p></div> <div class="col-md-2 " style="text-align: center;"> <div class="row " style="height: 100px;line-height: 25px;"> <div class="col-md-12 border-left border-top border-dark" style="height: 25px;">100移動卡</div> <div class="col-md-12 border-left border-top border-dark" style="height: 25px;">500M流量</div> <div class="col-md-12 border-left border-top border-dark" style="height: 25px; background-color:#F4AF85"><p style="color:green">300M流量</p></div> <div class="col-md-12 border-left border-top border-dark" style="height: 25px;">100M流量</div> </div> </div> <div class="col-md-3 " style="text-align: center;"> <div class="row"> <div class="col-md-4 border-left border-top border-dark" style="height: 25px;">5</div> <div class="col-md-4 border-left border-top border-dark" style="height: 25px;">1001</div> <div class="col-md-4 border-left border-top border-dark" style="height: 25px;">3006</div> </div> <div class="row"> <div class="col-md-4 border-left border-top border-dark" style="height: 25px;">6</div> <div class="col-md-4 border-left border-top border-dark" style="height: 25px;">255</div> <div class="col-md-4 border-left border-top border-dark" style="height: 25px;">505</div> </div> <div class="row" style="background-color:#F4AF85;"> <div class="col-md-4 border-left border-top border-dark" style="height: 25px;"><p style="color:green">8</p></div> <div class="col-md-4 border-left border-top border-dark" style="height: 25px;"><p style="color:green">2068</p></div> <div class="col-md-4 border-left border-top border-dark" style="height: 25px;"><p style="color:green">1006</p></div> </div> <div class="row"> <div class="col-md-4 border-left border-top border-dark" style="height: 25px;">11</div> <div class="col-md-4 border-left border-top border-dark" style="height: 25px;">101</div> <div class="col-md-4 border-left border-top border-dark" style="height: 25px;">1101</div> </div> </div> <div class="col-md-1 border-left border-top border-right border-dark" style="text-align: center; line-height: 100px;">5524</div> </div> <div class="row"style="height:50px;"> <div class="col-md-1 border-left border-top border-dark" style="text-align: center; height: 50px; line-height: 50px; "><p style="color: black">論壇</p></div> <div class="col-md-2 " style="text-align: center;"> <div class="row " style="height: 50px;line-height: 25px;"> <div class="col-md-12 border-left border-top border-dark" style="height: 25px;">100移動卡</div> <div class="col-md-12 border-left border-top border-dark" style="height: 25px;">閱讀器</div> </div> </div> <div class="col-md-3 " style="text-align: center;"> <div class="row"> <div class="col-md-4 border-left border-top border-dark" style="height: 25px;">12</div> <div class="col-md-4 border-left border-top border-dark" style="height: 25px;">1001</div> <div class="col-md-4 border-left border-top border-dark" style="height: 25px;">3009</div> </div> <div class="row"> <div class="col-md-4 border-left border-top border-dark" style="height: 25px;">1</div> <div class="col-md-4 border-left border-top border-dark" style="height: 25px;">992</div> <div class="col-md-4 border-left border-top border-dark" style="height: 25px;">991</div> </div> </div> <div class="col-md-1 border-left border-top border-right border-dark" style="text-align: center; line-height: 50px;">4000</div> </div> <div class="row"> <div class="col-md-6 border-left border-top border-dark" style="text-align: left; background-color: #EC7C34; height: 27px;"><p style="color:white;">單月共計</p></div> <div class="col-md-1 border-left border-top border-right border-dark" style="text-align: left; background-color: #EC7C34; height: 27px"><p style="color:white;">9524</p></div> </div> <div class="row"> <div class="col-md-6 border-left border-top border-bottom border-dark" style="text-align: left; background-color: #EC7C34; height: 27px;"><p style="color:white;">7月共計</p></div> <div class="col-md-1 border-left border-top border-right border-bottom border-dark" style="text-align: left; background-color: #EC7C34; height: 27px"><p style="color:white;">4745</p></div> </div> </div> </body>
效果
3文字排版
3.1 h1~h6
3.2 Display 標題類 更大的問題
3.3 small 標簽顯示的更小顏色更淺的文本
<div class="container"> <h1>更小文本標題</h1> <p>small 元素用於字號更小的顏色更淺的文本:</p> <h1>h1 標題 <small>副標題</small></h1> <h2>h2 標題 <small>副標題</small></h2> <h3>h3 標題 <small>副標題</small></h3> <h4>h4 標題 <small>副標題</small></h4> <h5>h5 標題 <small>副標題</small></h5> <h6>h6 標題 <small>副標題</small></h6> </div>
樣式
3.4 <mark> 這個標簽黃色背景和一定的內邊距
3.5 abbr 文字下方一條虛線，光標放上去顯示文字
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
樣式
其他
4顏色
4.1其他 text-muted 文本樣式，bg-muted 背景顏色
5表格 table 類來設置基礎表格的樣式