BootStrap學習大綱：

1.css樣式

布局容器：container

1）柵格系統

　　柵格系統就是BootStrap把一個div最多分成12列，其中主要的樣式 col-md-數字 用的最多，其他（lg,sm,xs）基本不用，不太適合做PC和手機兼容的網站樣式。　　

　　.row 12列

　　.col-md-4 占4列的寬
2）排版

　　1.標題（.page-header）?標題

　　2.段落（.lead）

　　3.mark標記（<mark>背景高亮</mark>）

　　4.下劃線（<u>下劃線</u>）

　　5.刪除線（<del>刪除線</del>）

　　6.small小號字體（<small>副標題</small>）

　　7.斜體（<i>斜體字</i>）

　　8.文本對齊（.text-left .text-right .text-center）

　　9.文本大小寫（.text-lowercase .text-uppercase .text-captialize）

　　10.無樣式列表（.list-unstyled）

　　11.內連列表（.list-inline）　　

3）代碼

　　1.code（<code>代碼高亮</code>）

　　2.pre（<pre>按原格式輸出<pre>）

　　3.kdb（<kdb>鍵盤</kdb>）

4）表格

　　.table　　.table-striped　　.table-bordered　　.table-hover　　

　　表格顏色?　　.active　　.success　　.warning　　.info　　.danger

　　響應式滾動條（必須在table的外層Div中加該屬性）　　.table-responsive

5）表單

　　段落分割　　.form-group

　　輸入框　　.form-control　　placeholder="占位字符"

　　橫表單　　.form-inline

　　輸入框組　　.input-group　　.input-group-addon

　　表單框內文本圖標　　.has-feedback　　.form-control-feedback

　　表單框幫助提示　　.help-block

6）按鈕

　　.btn　　.btn-default　　.btn-primary　　.btn-success　　.btn-info　　.btn-waining　　.btn-danger　　.btn-link

　　.btn-lg　　.btn-sm　　.btn-xs　　.disabled

　　.btn-block　　

7）圖片

　　圓角　　.img-rounder

　　圓圖　　.img-circle

　　指甲蓋　.img-thumbnail　　（圖片背景不能是白色）　　

8）輔助類

　　文本顏色　　.text-muded　　.text-primary　　.text-success　　.text-info　　.text-warning　　.text-danger

　　背景顏色　　.bg-primary　　.bg-success　　.bg-info　　.bg-warning　　.bg-danger

　　關閉按鈕　　.close　　&times;(乘號)

　　下三角　　　.caret

　　浮動　　　　.pull-left　　.pull-right

　　清除浮動　　.clearfix

　　內容居中　　.center-block

　　顯示　　.show　　隱藏　　.hide

9）響應式工具

　　響應式圖片　　.img-responsive

?

轉載于:https://www.cnblogs.com/Kuleft/p/9605053.html

總結

以上是生活随笔為你收集整理的BootStrap 学习笔记（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。