bootstrap經常使用類名

時間 2019-11-13

原文原文鏈接

Bootstrap經過給標籤賦予一個類名(class name),來生成對應類名的效果標籤

網格選項

row :行

col-*-*: 列 (第一個*能夠爲xs[超小]/sm[小型]/md[中型]/lg[大型]第二個*必須爲12之內的[列數])

col-*-offset-* :列偏移(第一個*和上面同樣,第二個*範圍是1到11,表示把該列的左外邊距(margin)增長*列)

col-*-*-*:列排序(第一個*和上面同樣,第二個*能夠爲push[向右]/pull[向左],第三個*範圍是1到11[列數])

排版

small:內聯子標題

lead:引導主體副本

text-*:文本樣式(*號能夠爲
left[左對齊]/center[居中對齊]/right[右對齊]/muted[減弱文本]
/primary/success/info/warning/danger
/justify[自動換行]/nowrap[不換行]
/lowercase[小寫]/uppercase[大寫]/capitalize[首字母大寫])

list-inline:列表置於同一行

表格

table:基本樣式(只有橫向分隔線)

table-*:表格樣式(*能夠爲striped[添加條紋]/bordered[添加邊框]/hover[啓用懸停]/condensed[更加緊湊])

tr/th/td 有active/success/info/warning/danger來改變背景顏色

將任意的table放在table-responsive內,實現響應式表格

bootstrap裏active/success/info/warning/danger對應的背景顏色
active/success/info/warning/danger對應顏色

表單

建立基本表單(垂直表單)的步驟
1.向父 <form> 元素添加 role="form"。
2. 把標籤和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
3. 向全部的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

建立水平表單的步驟
1.向父 <form> 元素添加 class .form-horizontal。
2.把標籤和控件放在一個帶有 class .form-group 的 <div> 中。
3.向標籤添加 class .control-label。

常見的表單控件主要是 input、textarea、checkbox、radio 和 select。
input: 聲明type有text、password、datetime、datetime-local、date、month、time、week、
number、email、url、search、tel 和 color。

textarea: row決定高度

checkbox: 複選框

radio:單選框

checkbox-inline:內聯的複選框和單選框

select:選擇框

對父元素添加驗證狀態has-*:驗證樣式(*能夠爲warning/error/success)

按鈕

btn:基本樣式

btn-*:其餘樣式(*能夠爲default/primary/success/info/warning/danger
/link[讓按鈕看起來像個連接]
/lg/sm/xs/
block[塊級按鈕,拉伸至父元素100%的寬度]/active/disabled)

圖片

img-*:圖片樣式(*能夠爲rounded[圓角6px]
/circle[圓形]
/thumbnail[添加內邊距和一個灰色的邊框]/responsive)

輔助類

Bootstrap裏的一些輔助類,除了上面的active/success/info/warning/danger 還有
pull-left/right 元素浮動到左邊/右邊
center-block 設置元素爲 display:block 並居中顯示
clearfix 清除浮動
show/hidden 強制顯示/隱藏

close 顯示關閉按鈕
caret 顯示下拉式功能
divider 分隔線

字體圖標

在 fonts 文件夾內能夠找到字體圖標，它包含了下列這些文件：

1 glyphicons-halflings-regular.eot
2 glyphicons-halflings-regular.svg
3 glyphicons-halflings-regular.ttf
4 glyphicons-halflings-regular.woff

更多圖標參考http://www.runoob.com/bootstrap/bootstrap-glyphicons.html

下拉菜單

dropdown:下拉菜單

dropdown-menu: 下拉菜單

dropdown-header:下拉菜單區域標題

按鈕組

btn-group:裏面放置一系列btn

btn-toolbar:裏面放置幾組btn-group

btn-group-*:調整按鈕組的樣式(*能夠爲xs/sm/lg/vertical)

.btn-group 容器添加 .dropup實現按鈕上拉菜單

輸入框組

向 .form-control 添加前綴或後綴元素的步驟以下：
1.把前綴或後綴元素放在一個帶有 class .input-group 的 <div> 中。
2.接着，在相同的 <div> 內，在 class 爲 .input-group-addon 的 <span> 內放置額外的內容。
3.把該 <span> 放置在 <input> 元素的前面或者後面。

爲了保持跨瀏覽器的兼容性，請避免使用 <select> 元素，由於它們在 WebKit
瀏覽器中不能徹底渲染出效果。也不要直接向表單組應用輸入框組的 class，輸入框組是一個孤立的組件。
導航元素

nav nav-tabs :標籤式的導航菜單
nav nav-pills: 膠囊式的導航菜單
//同時使用nav-stacked 讓膠囊垂直堆疊
//同時使用nav-justified 讓標籤式或膠囊式導航菜單與父元素等寬

導航欄

建立一個默認的導航欄的步驟以下：
1.向 <nav> 標籤添加 class .navbar、.navbar-default。
2.向上面的元素添加 role="navigation"，有助於增長可訪問性。
3.向 <div> 元素添加一個標題 class .navbar-header，內部包含了帶有 class navbar-brand 的 <a> 元素。這會讓文本看起來更大一號。

爲了嚮導航欄添加連接，只須要簡單地添加帶有 class .nav、.navbar-nav 的無序列表便可。

navbar-btn: 導航欄中的按鈕
navbar-text:導航欄中的文本
navbar-link:非標準導航連接

navbar-left/right:向左/向右對齊

navbar-fixed-top/bottom:固定在頂部/底部(爲了防止導航欄與頁面主體中的其餘內容的頂部相交錯，請向 <body>標籤添加至少 50 像素的內邊距（padding），內邊距的值能夠

根據您的須要進行設置)

navbar-static-top:能隨着頁面一塊兒滾動的導航欄

nav-inverse :帶有黑色背景白色文本的導航欄

麪包屑導航

breadcrumb

分頁

`pagination`:分頁
`disabled/active` :不可點擊/當前頁面
`pager`:翻頁
`previous/next`:把連接向左/向右對齊

標籤

label-*:標籤(*能夠爲default/primary/success/info/warning/danger)

徽章

badge

超大屏幕

jumbotron

頁面標題

page-header

縮略圖

thumbnail

添加自定義的內容
如今咱們有了一個基本的縮略圖，咱們能夠向縮略圖添加各類 HTML 內容，好比標題、段落或按鈕。具體步驟以下：
1.把帶有 class .thumbnail 的 <a> 標籤改成 <div>。
2.在該 <div> 內，您能夠添加任何您想要添加的東西。因爲這是一個 <div>，咱們可使用默認的基於 span 的命名規則來調整大小。
3.若是您想要給多個圖像進行分組，請把它們放置在一個無序列表中，且每一個列表項向左浮動。

警告

alert alert-*:警告框(*能夠爲success/info/warning/danger)

建立一個可取消的警告（Dismissal Alert）步驟以下：
1.經過建立一個 <div>，並向其添加一個 .alert class 和四個上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，來添加一個基本的警
告框。
2.同時向上面的 <div> class 添加可選的 .alert-dismissable。
3.添加一個關閉按鈕。

進度條

建立一個基本的進度條的步驟以下：
1.添加一個帶有 class .progress 的 <div>。
//同時添加.progress-striped來實現條紋樣式的進度條
//而後添加active會使條紋具備從右向左的運動感
2.接着，在上面的 <div> 內，添加一個帶有 class .progress-bar 的空的 <div>。
//同時添加class progress-bar-*來實現交替樣式的進度條,其中，* 能夠是success、info、warning、danger。
3.添加一個帶有百分比表示的寬度的 style 屬性，例如 style="60%"; 表示進度條在 60% 的位置。

多媒體對象

media:容許將媒體對象裏的多媒體（圖像、視頻、音頻）浮動到內容區塊的左邊或者右邊。

.media-list：若是你須要一個列表，各項內容是無序列表的一部分，可使用該 class。可用於評論列表與文章列表

列表組

建立一個基本的列表組的步驟以下：
向元素 <ul> 添加 class .list-group。
向 <li> 添加 class .list-group-item。
list-group-item-heading:每一個item的頂部,相似於ios裏cell的text
list-group-item-text:每一個item的文字,相似於ios裏cell的subtitle text

面板

panel panel-default:面板
panel-heading:面板頭部
panel-title:面板標題
panel-body:面板內容
panel-footer:面板腳註

原文連接：https://blog.csdn.net/fuckof/article/details/52402344html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。