[Bootstrap]CSS重點整理(下) ─ 程式碼與元件篇

繼續重點整理


程式碼

1.內行程式碼
<code>...</code>  內部符號必須使用HTML name來表示才能正常顯示

2.使用者輸入
<kdd>...</kdd> 表示這是要經由鍵盤輸入的內容，內容可自訂

3.程式碼區塊
<pre>...</pre>程式碼區塊，呈現多行程式碼，同樣須轉譯符號

4.變數
<var>...</var>  指出變數
5.範例輸出
<sample>...</sample>  會被視為電腦程式輸出的文字

表格

.table 增加些許padding和水平分隔線

.table-striped 可在各row間加入斑馬紋 (不支援IE8)
.table-bordered 可在所有表格四邊加入邊框
.table-hover 在整row加入 hover效果
.table-condensed 儲存格padding減半，製作上下左右更加緊湊的表格

狀態類別

• .active 得到焦點時設置顏色


• .success 一個成功的動作顏色


• .info 


• .warning 需要注意的警告


• .danger 危險或是有害的行為

將表格包裝在.table-responsive的div內，建立響應式的表格
能讓表格在螢幕小於768px的設備進行水平滑動，其餘時候並不會有影響

表單

行內表單

• 將控制項用 .form-group包在一起獲得最佳排列組合。


• 行內表單使用.form-inline加入元素可得到靠左對其的行內元素

若是view小於768px則會恢復堆疊狀態，預設width為100%

控制項總是加入標籤來表示！

水平布局表單

• 在form加入.form-horm-horizontal類別使用Bootstrap3預設的格線


• 這會改變.form-group行為，會以格線系統的row呈現，不用另外定義row

支援的控制項

• .form-control變更文字輸入(text/textarea)區域的外觀

複選和單選

• chexkbox單選或多選/radio單選


• .checkbox disabled / .radio disabled套用「不可選」的類別

行內checkbox / radio

• 使用.checkbox-inline和.radio-inline 可讓一系列控制項水平排列

靜態控制

• 若要在後面加入請加上.form-control-static

禁用狀態

加入disable的布林屬性在input元素，可以防止使用者輸入並且改變外觀

<input class="form-control" type"text" disable>

若在

外圍使用元素包起來，則會禁用內部所有控制項

同樣的在input加入readonly布林屬性也會以禁用方式呈現

驗證狀態

在父元素加入

• .has-warning 棕色


• .has-error 紅色


• .has-success 綠色

任何.control-label .form-control .help-block內的元素都能接受樣式

加入.has-feedback屬性與正確的Glyphicons圖示可以增加直覺性

大小

 

輸入字體大小

• .input-lg


• .input-sm

水平form大小

• 在 .form-horizontal 下使用.form-group-lg或是.form-group-sm可快速調整form控制項大小


• 把input包入column或其他父元素中，便可以輕鬆調整寬度

按鈕

• 

• 大小：使用.btn-lg .btn-sm .btn-xs 來改變大小，使用.btn-block可以延伸至父元素100%大小


• 狀態：.active 表現按下去的效果，同CSS中設定:active 


• 連結：中套入btn對應class可以將連結以按鈕方式呈現


• 禁用：加入disabled="disabled"在內作為屬性

輔助類別

• 情境顏色：.text-*顏色內容參照button


• 背景顏色：bg-* 顏色內容參照button


• 圖示：X圖示 .sr-only 三角括號 .saret