Bootstrap筆記（一）
Bootstrap：是一個前端庫，它提供了許多樣式給使用者使用。
一、Bootstrap的匯入
1、在Bootstrap中文網下相應的bootstrap檔案：css、fonts、js
2、由於bootstrap是在jquery的支援下，所以需要下載對應的jquery檔案，此處不表。
二、Bootstrap的標準模板
<!DOCTYPE html> <html> <head> <!--設定UTF編碼--> <meta charset="UTF-8"> <!--設定移動裝置優先--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <!--引入css，js，jq檔案（jq檔案要在js檔案之前引用）--> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/bootstrap.js" ></script> <script type="text/javascript" src="js/bootstrap.min.js" ></script> </head> <body> </body> </html>
三、Bootstrap的使用：大多在標籤內新增相應類名即可。
四、Bootstrap的佈局容器
container-fluid：佈滿容器
container：80容器，實現內容居中對齊
五、Bootstrap文字樣式
bg-primary：藍底白字
text-left 向左對齊文字 text-center 居中對齊文字 text-right 向右對齊文字 text-muted 本行內容是減弱的 text-primary 本行內容帶有一個 primary class text-success 本行內容帶有一個 success class text-info 本行內容帶有一個 info class text-warning 本行內容帶有一個 warning class text-danger 本行內容帶有一個 danger class text-justify 設定文字對齊,段落中超出螢幕部分文字自動換行 text-nowrap 段落中超出螢幕部分不換行 text-lowercase 設定文字小寫 text-uppercase 設定文字大寫 text-muted 文字樣式
六、列表樣式
list-unstyled 未定義樣式列表 list-inline 內聯列表，將列表內容（li標籤的內容）排成一行
七、表格樣式
注意：table是所有其它表格樣式的父類，若想新增其它樣式，先新增table,在table後面新增即可（使用空格分隔）
table 表格 table-striped 隔行變色 table-bordered 表格邊框線 table-hover 在 <tbody> 內的任一行啟用滑鼠懸停狀態 table-condensed 讓表格更加緊湊
以下狀態類只能由<tr>、<td>或者<th>標籤使用
active 滑鼠懸停在行或者單元格時所設定的顏色 success 表示成功的操作 info 表示資訊變化的操作 warning 表示一個警告的操作 danger 表示一個危險的操作
八、按鈕樣式 btn ：父類（與table相似），新增其它樣式前必須先新增此樣式
1、顏色樣式 btn-default 預設/標準按鈕（白色） btn-primary 原始按鈕樣式（藍色） btn-success 表示成功的動作（綠色） btn-info 該樣式可用於要彈出資訊的按鈕（淺藍色） btn-warning 表示需要謹慎操作的按鈕（橙色） btn-danger 表示一個危險動作的按鈕操作紅色） btn-link 讓按鈕看起來像個連結 (仍然保留按鈕行為)
2、大小樣式
btn-sm 小按鈕
btn-lg 超大按鈕
btn-xs 超小按鈕
3、其它樣式
btn-block 塊級按鈕(拉伸至父元素100%的寬度) active 按鈕被點選樣式 disabled 禁用按鈕
例如百度超連結新增按鈕樣式：
<a href="http://www.baidu.com" class="btn btn-success btn-lg">百度</a>九、圖片樣式
img-circle 橢圓型圖片 img-rounded 圓角圖片 img-thumbnail 新增一些內邊距（padding）和一個灰色的邊框 img-responsive 響應式圖片 （即隨著瀏覽器大小的變動而變動圖片大小）
十、背景顏色樣式
bg-primary：藍底白字 bg-success bg-info bg-warning bg-danger