BootStrap總結

本週咱們學習了BootStrap，BootStrap包括：

1. 設置全局 CSS 樣式；基本的 HTML 元素都可以經過 class 設置樣式並獲得加強效果；還有先進的柵格系統。
2. 無數可複用的組件，包括字體圖標、下拉菜單、導航、警告框、彈出框等更多功能。
3. jQuery 插件爲 Bootstrap 的組件賦予了「生命」。能夠簡單地一次性引入全部插件，或者逐個引入到你的頁面中
4. 經過自定義 Bootstrap 組件、Less 變量和 jQuery 插件，定製一份屬於你本身的 Bootstrap 版本

 

柵格佈局

container，固定寬度的容器。

container-fluid，百分百寬度的容器。

使用行（row）在水平方向上建立一組列（colmun）。

每一行中最多可以包含12列，超出的列則另起一行排列

內容應該放置到列（colmun）中，只有列（colmun）能夠做爲行（row）的直接子元素。

列偏移

使用col-*-offset-*類能夠將列向右偏移，例如，col-xs-offset-4表示在超小屏幕上時，將元素向右偏移4列。

嵌套列

經過在列中嵌套行（row），能夠將原有的列再分紅12列，如此就實現了列的嵌套。

列排序

使用col-*-push-* 將列向右推，col-*-pull-*將列向左拉。例以下面的代碼將box1向右推了6列，將box3向左拉了6列，結果是它們調換了位置。

表格

.table 必須的基類

.table-bordered 帶邊框的表格

.table-striped 帶條紋的表格（隔行變色）

.table-hover 鼠標懸浮時爲整行添加背景色

.table-condensted 緊湊的表格（減小了單元格padding）

按鈕的尺寸

按鈕的尺寸被分紅，.btn-lg、.btn-sm、默認尺寸、.btn-xs

響應式的表格

當屏幕寬度不足以顯示全部的表格內容時，表格內容會出現摺疊甚至溢出的現象。爲了解決這個問題，咱們能夠將.table元素放到一個具備.table-responsive類的元素內容。

 

圖片形狀

.img-rounded 圓角的圖片              .img-circle  圓形圖片                                  .img-thumbnail 縮略圖