9-1 BOOTSTRAP安裝
9-2 格線系統
一、工作原理
-
頁面由row(列)、column(欄)所組成，資料放在由row、column所組成的框框裡
- 一列數據(row)必須包含在 .container(固定) 或 .container-fluid(滿版) 中，以便為其賦予合適的對齊方式與留白(padding)
- 使用 row，在水平方向創建 column
- column用來放置「具體的內容」，且只它可以作為 row 的直接子元素
- 格線系統：將畫面分成12格（等份），透過列 (row) 與欄 (column) 的組合建立頁面佈局。
超小屏幕 手機(<768px) 小屏幕 平板(≥768px) 中等屏幕 桌面顯示器(≥992px) 大屏幕 大桌面顯示器(≥1200px) 柵格系統行為 總是水平排列 開始是堆疊在一起的，當大於這些閾值時將變為水平排列C .container最大寬度None （自動） 750px 970px 1170px 類前綴 .col-xs-.col-sm-.col-md-.col-lg-列（column）數 12 最大列（column）寬 自動 ~62px ~81px ~97px 槽（gutter）寬 30px （每列左右均有15px） 可嵌套 是 偏移（Offsets） 是 列排序 是 - 練習
<div class="container"> <div class="row"> <div class="col-md-3"><h2>HTML</h2></div> <div class="col-md-3"><h2>CSS</h2></div> <div class="col-md-3"><h2>JS</h2></div> <div class="col-md-3"><h2>BOOTSTRAP</h2></div> </div> </div>
二、Media Queries的分段點
- 手機 – xs ( < 768px )
- 平板 – sm ( 768~991px )
- 桌機 – md ( 992~1200px )
- 大螢幕 - lg ( >= 1200px )
三、常用
- 超過12欄，則會在下方另起一列
- 只要是放在col-xx中，就一定會有所謂的gutter（欄和欄之間的間距）
- Bootstrap將<body>和所有段落元素的font-size預設為 14px，line-height預設為 1.428。<p>元素的margin-bottom預設了 1/2 行高（即 10px）
- 段落中內容對齊：.text-left（靠左對齊）；.text-center（置中對齊）；.text-right（靠右對齊）；.text-justify（分散對齊）；.text-nowrap（不換行）
- 向左浮動是.pull-left；向右浮動是.pull-right；要清除浮動則用.clearfix
- 顯示某元件可套用.show，隱藏某元件則用.hidden