[Bootstrap]CSS5j重點整理(上) ─ 排版篇

偏個人向的實做用重點

基本

1.最外層要包一個.container才有RWD

...

.container預設左右是有margin的，若要滿版請用.container-fluid

格線

1.應用12-column grid系統，row要在container內，內容放在column內
　同一row內column的前綴詞後面加的數字和要是12
2.只有column能作為row的直接子元素
3.一row內超過12column的話會以1column為最小單位換行

螢幕大小分類

• 超小螢幕(手機)<768px：.col-xs-
• 小螢幕(平板)≧768px：.col-sm-
• 中螢幕(桌面)≧992px：.col-md-
• 大螢幕(大桌面)≧1200px：col-lg-

4.column位移，要使column向後平移類似tab鍵的用法可以使用.col-md-offset-
5.巢狀column，一個row可以在12grid規則內新增更多的row，內層同樣使用12grid規則
6..col-md-push-*和 .col-md-pull-*可以改變排序

標題

1.標題

下可以建立稍微小一點的子標題，使用一組標籤，或是.small類別
2.前導主題(字形加大加粗)，使用.lead

對齊

• .text-left 置左
• .text-center 置中
• .text-right 置右
• .text-justify 平均對齊(預設只對英文有效，中文要在原始碼類別附加 text-justify:inter-ideograph屬性設定
• .text-nowrap 不換行文字 (?)

轉換類別

• .text-lowercase 全小寫
• .text-uppercase 全大寫
• .text-capitalize 字首大寫

縮寫

• attr，螢幕上只會顯示attr，滑鼠過去會顯示title的內容
• 在縮寫內加入.initialism屬性，會使用小一點的font-size

引用選項

1.用

包覆起來使引用更有整體感

2.加入

標示來源，來源名稱放在內，會斜體
範例：

是區塊元素，適用整段引用；是行內元素，用於短句

加入.blockquote-reverse類別到blockquote中會靠右對齊

清單

1.樣式：

• 無序清單
  • ...
• 有序清單
  ...
  2.移除樣式加入.list-style類別，會套用在子清單上
  3.行內清單：.list-inline類別設定display: inline-block和padding，讓清單為一行顯示
  4.描述清單：
  
  
  
  水平布局：讓描述標題和描述在同一行則加入.dl-horizontal類別：