```css -------網格系統 ---------- 柵格系統 /* 超小設備（手機，小于 768px） */ /* Bootstrap 中默認情況下沒有媒體查詢 */ /* 小型設備（平板電腦，768px 起） */ @media (min-width: @screen-sm-min) { ... } /* 中型設備（臺式電腦，992px 起） */ @media (min-width: @screen-md-min) { ... } /* 大型設備（大臺式電腦，1200px 起） */ @media (min-width: @screen-lg-min) { ... } <div class="row"> <div class="col-*-*"> </div> <div> 偏移列 .col-md-offset-* 列排序 .col-md-push-* .col-md-pull-* -----------排版---------------- .small 字號更小的顏色更淺的文本 .lead 更大更粗、行高更高的文本 .text-muted： 提示，使用淺灰色（#999） .text-primary： 主要，使用藍色（#428bca） .text-success： 成功，使用淺綠色(#3c763d) .text-info： 通知信息，使用淺藍色（#31708f） .text-warning： 警告，使用黃色（#8a6d3b） .text-danger： 危險，使用褐色（##a94442） .text-left 向左對齊文本 .text-center 居中對齊文本 .text-right 向右對齊文本 .text-justify 設定文本對齊,段落中超出屏幕部分文字自動換行 .text-nowrap 段落中超出屏幕部分不換行 .text-lowercase 設定文本小寫 .text-uppercase 設定文本大寫 .text-capitalize 設定單詞首字母大寫 .initialism 顯示在 <abbr> 元素中的文本以小號字體展示 .blockquote-reverse 設定引用右對齊 .list-unstyled 移除默認的列表樣式，列表項中左對齊 ( <ul> 和 <ol> 中)。 這個類僅適用于直接子列表項 (如果需要移除嵌套的列表項，你需要在嵌套的列表中使用該樣式) .list-inline 將所有列表項放置同一行 .dl-horizontal 該類設置了浮動和偏移，應用于 <dl> 元素和 <dt> 元素中，具體實現可以查看實例 .pre-scrollable 使 <pre> 元素可滾動 scrollable <abbr> 文本底部的一條虛線邊框 <address> 顯示聯系信息 <blockquote> 這是一個帶有源標題的引用 -----------表格-------------- 表格類 .table 為任意 <table> 添加基本樣式 (只有橫向分隔線) .table-striped 在 <tbody> 內添加斑馬線形式的條紋 ( IE8 不支持) .table-bordered 為所有表格的單元格添加邊框 .table-hover 在 <tbody> 內的任一行啟用鼠標懸停狀態 .table-condensed 讓表格更加緊湊 .table-responsive 讓表格水平滾動以適應小型設備（小于 768px） <tr>, <th> 和 <td> 類 .active 將懸停的顏色應用在行或者單元格上 .success 表示成功的操作 .info 表示信息變化的操作 .warning 表示一個警告的操作 .danger 表示一個危險的操作 ----------表單----------------- 一.垂直或基本表單 1.向父 <form> 元素添加 role="form"。 2.把標簽和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。 3.向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。 二.內聯表單 請向 <form> 標簽添加 class .form-inline 會變成一行 三.水平表單 向父 <form> 元素添加 class .form-horizontal。 把標簽和控件放在一個帶有 class .form-group 的 <div> 中。 向標簽添加 class .control-label。 表單元素 checkbox radio 當創建表單時，如果您想讓用戶從列表中選擇若干個選項時，請使用 checkbox。 如果您限制用戶只能選擇一個選項，請使用 radio。 對一系列復選框和單選框使用 .checkbox-inline 或 .radio-inline class，控制它們顯示在同一行上 select 當您想讓用戶從多個選項中進行選擇，但是默認情況下只能選擇一個選項時，則使用選擇框。 使用 <select> 展示列表選項，通常是那些用戶很熟悉的選擇列表，比如州或者數字。 使用 multiple="multiple" 允許用戶選擇多個選項 靜態控件 當您需要在一個水平表單內的表單標簽后放置純文本時，請在 <p> 上使用 class .form-control-static。 表單控件狀態 除了 :focus 狀態（即，用戶點擊 input 或使用 tab 鍵聚焦到 input 上）， Bootstrap 還為禁用的輸入框定義了樣式，并提供了表單驗證的 class。 輸入框焦點 當輸入框 input 接收到 :focus 時，輸入框的輪廓會被移除，同時應用 box-shadow。 禁用的輸入框 input 如果您想要禁用一個輸入框 input，只需要簡單地添加 disabled 屬性， 這不僅會禁用輸入框，還會改變輸入框的樣式以及當鼠標的指針懸停在元素上時鼠標指針的樣式。 禁用的字段集 fieldset 對 <fieldset> 添加 disabled 屬性來禁用 <fieldset> 內的所有控件。 驗證狀態 Bootstrap 包含了錯誤、警告和成功消息的驗證樣式。 只需要對父元素簡單地添加適當的 class（.has-warning、 .has-error 或 .has-success）即可使用驗證狀態。 表單控件大小 您可以分別使用 class .input-lg 和 .col-lg-* 來設置表單的高度和寬度。下面的實例演示了這點： --------------------按鈕----------------- 一 樣式 .btn 為按鈕添加基本樣式 .btn-default 默認/標準按鈕 .btn-primary 原始按鈕樣式（未被操作） .btn-success 表示成功的動作 .btn-info 該樣式可用于要彈出信息的按鈕 .btn-warning 表示需要謹慎操作的按鈕 .btn-danger 表示一個危險動作的按鈕操作 .btn-link 讓按鈕看起來像個鏈接 (仍然保留按鈕行為) .btn-lg 制作一個大按鈕 .btn-sm 制作一個小按鈕 .btn-xs 制作一個超小按鈕 .btn-block 塊級按鈕(拉伸至父元素100%的寬度) .active 按鈕被點擊 .disabled 禁用按鈕 二 按鈕大小 .btn-lg 這會讓按鈕看起來比較大。 .btn-sm 這會讓按鈕看起來比較小。 .btn-xs 這會讓按鈕看起來特別小。 .btn-block 這會創建塊級的按鈕，會橫跨父元素的全部寬度。 三 按鈕狀態 按鈕元素 添加 .active class 來顯示它是激活的。 錨元素 添加 .active class 到 <a> 按鈕來顯示它是激活的。 四 禁用按鈕 按鈕元素 添加 disabled 屬性 到 <button> 按鈕。 錨元素 添加 disabled class 到 <a> 按鈕。 注意：該 class 只會改變 <a> 的外觀，不會改變它的功能。在這里，您需要使用自定義的 JavaScript 來禁用鏈接。 ----------------圖片----------------- .img-rounded： 添加 border-radius:6px 來獲得圖片圓角。 .img-circle： 添加 border-radius:50% 來讓整個圖片變成圓形。 .img-thumbnail： 添加一些內邊距（padding）和一個灰色的邊框。 .img-responsive 圖片響應式 (將很好地擴展到父元素) ------------------輔助/背景------------- 背景 .bg-primary 表格單元格使用了 "bg-primary" 類 .bg-success 表格單元格使用了 "bg-success" 類 .bg-info 表格單元格使用了 "bg-info" 類 .bg-warning 表格單元格使用了 "bg-warning" 類 .bg-danger 表格單元格使用了 "bg-danger" 類 其他 .pull-left 元素浮動到左邊 .pull-right 元素浮動到右邊 .center-block 設置元素為 display:block 并居中顯示 .clearfix 清除浮動 .show 強制元素顯示 .hidden 強制元素隱藏 .sr-only 除了屏幕閱讀器外，其他設備上隱藏元素 .sr-only-focusable 與 .sr-only 類結合使用，在元素獲取焦點時顯示(如：鍵盤操作的用戶) .text-hide 將頁面元素所包含的文本內容替換為背景圖 .close 顯示關閉按鈕 .caret 顯示下拉式功能 關閉圖標 使用通用的關閉圖標來關閉模態框和警告框。使用 class close 得到關閉圖標。 插入符 使用插入符表示下拉功能和方向。使用帶有 class caret 的 <span> 元素得到該功能。 快速浮動 您可以分別使用 class pull-left 或 pull-right 來把元素向左或向右浮動。 下面的實例演示了這點。 內容居中 使用 class center-block 來居中元素 清除浮動 如需清除元素的浮動，請使用 .clearfix class。 顯示和隱藏內容 您可以通過使用 class .show 和 .hidden 來強行設置元素顯示或隱藏（包括屏幕閱讀器）。 ```