前端學習筆記：bootstrap(2)
二、柵格系統
1.組成
bootstrap 提供了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。 柵格系統用於通過一系列的行（row）與列（column）的組合來建立頁面布局，你的內容就可以放入這些建立好的布局中。下面就介紹一下 bootstrap 柵格系統的特點：
(1)「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內間距（padding）。
(2)通過「行（row）」在水平方向建立一組「列（column）」。
(3)你的內容應當放置於「列（column）」內，並且，只有「列（column）」可以作為行（row）」的直接子元素。
(4)柵格系統中的列是通過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可以使用三個 .col-xs-4 來建立。
(5)如果一「行（row）」中包含了的「列（column）」大於 12，多餘的「列（column）」所在的元素將被作為乙個整體另起一行排列。
2.網頁布局的兩種容器
布局的兩種容器的類樣式名說明
container 在不同的解析度下顯示不同的固定寬度
container-fluid 始終以100%的寬度顯示頁面
案例**：
container容器：固定大小
container-fluid：100%寬度
3.**查詢@media
通過不同的**型別和條件定義樣式表規則。**查詢讓css可以更精確作用於不同的**(裝置)型別和同一**的不同條件。**查詢的大部分**特性都接受min和max用於表達「大於或等於」和「小於或等於」。 開啟檔案：bootstrap.css，可以看到以下**：
/* 當裝置的最小寬度大於或等於768時，容器的寬度是750px */
@media (min‐width: 768px)
}/* 當裝置的最小寬度大於或等於992時，容器的寬度是970px */
@media (min‐width: 992px)
}4.基本寫法
柵格系統 描述 類似於**
.container或.container-fluid 整個布局的容器 table
.row 容器中的一行 tr
.col-xx-n xx有四個取值：1)lg大型裝置，如電視。2)md中型裝置，如電腦。3)sm小型裝置，如平板。4)xs微型裝置，如手機。n這一列佔幾格，一行最多12格。 表示row中的一列，如：1)col-md-4中型裝置上佔4列。2)col-xs-6微型裝置上佔6列。 td
5.柵格的引數
超小裝置手機(<768px) 小型裝置平板電腦(>=768px) 中型裝置台式電腦(>=992px) 大型裝置台式電腦(>=1200px)
最大容器寬度 none(auto) 750px 970px 1170px
class 字首 .col-xs- .col-sm- .col-md- .col-lg-
列# 12 12 12 12
最大列寬 auto 60px 78px 95px
間隙寬度 30px(乙個列的每邊分別15px) 30px(乙個列的每邊分別15px) 30px(乙個列的每邊分別15px) 30px(乙個列的每邊分別15px)
可巢狀 yes yes yes yes
前端學習筆記 bootstrap 7
前端學習筆記 bootstrap 7 4.1 與 有關的類樣式 的樣式 類名 基本例項 table 條紋狀 table striped類可以給之內的每一行增加斑馬條紋樣式。帶邊框的 table bordered類為 和其中的每個單元格增加邊框。滑鼠懸停 table hover類可以讓中的每一行對滑鼠...
bootstrap學習筆記
學習 然後對bootstrap進行引用 柵格系統中，列數是12，行數不固定 例項 手機 平板 桌面 在上面案例的基礎上，通過使用針對平板裝置的 col sm 類，我們來建立更加動態和強大的布局吧。col xs 12 col sm 6 col md 8 col xs 6 col md 4 col xs...
bootstrap學習筆記
1 引入的檔案 script script 2 柵格系統布局 bootstrap把頁面設定為12列，通過改變列的數字來進行布局。col xs 4 指小於768px的小裝置 11 col sm 4 指 768px的裝置 22 col md 4 指 992px裝置 33 col lg 4 值1200px...