前端之bootstrap-常用類名
阿新 • • 發佈：2019-01-26
1.網格選項 row :行 col-*-*: 列 (第一個*可以為xs[超小]/sm[小型]/md[中型]/lg[大型]第二個*必須為12以內的[列數]) col-*-offset-* :列偏移(第一個*和上面一樣,第二個*範圍是1到11,表示把該列的左外邊距(margin)增加*列) col-*-*-*:列排序(第一個*和上面一樣,第二個*可以為push[向右]/pull[向左],第三個*範圍是1到11[列數]) 2.排版 small:內聯子標題 lead:引導主體副本 text-*:文字樣式(*號可以為 left[左對齊]/center[居中對齊]/right[右對齊]/muted[減弱文字] /primary/success/info/warning/danger /justify[自動換行]/nowrap[不換行] /lowercase[小寫]/uppercase[大寫]/capitalize[首字母大寫]) list-inline:列表置於同一行 3.表格 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對應顏色 4.表單 建立基本表單(垂直表單)的步驟 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) 5.按鈕 btn:基本樣式 btn-*:其他樣式(*可以為default/primary/success/info/warning/danger /link[讓按鈕看起來像個連結] /lg/sm/xs/ block[塊級按鈕,拉伸至父元素100%的寬度]/active/disabled) 6.圖片 img-*:圖片樣式(*可以為rounded[圓角6px] /circle[圓形] /thumbnail[新增內邊距和一個灰色的邊框]/responsive) 7.輔助類 Bootstrap裡的一些輔助類,除了上面的active/success/info/warning/danger 還有 pull-left/right 元素浮動到左邊/右邊 center-block 設定元素為 display:block 並居中顯示 clearfix 清除浮動 show/hidden 強制顯示/隱藏 close 顯示關閉按鈕 caret 顯示下拉式功能 divider 分隔線 8.字型圖示 在 fonts 資料夾內可以找到字型圖示，它包含了下列這些檔案： glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff 9.下拉選單 dropdown:下拉選單 dropdown-menu: 下拉選單 dropdown-header:下拉選單區域標題 10.按鈕組 btn-group:裡面放置一系列btn btn-toolbar:裡面放置幾組btn-group btn-group-*:調整按鈕組的樣式(*可以為xs/sm/lg/vertical) .btn-group 容器新增 .dropup實現按鈕上拉選單 11.輸入框組 向 .form-control 新增字首或字尾元素的步驟如下： 1.把字首或字尾元素放在一個帶有 class .input-group 的 <div> 中。 2.接著，在相同的 <div> 內，在 class 為 .input-group-addon 的 <span> 內放置額外的內容。 3.把該 <span> 放置在 <input> 元素的前面或者後面。  為了保持跨瀏覽器的相容性，請避免使用 <select> 元素，因為它們在 WebKit 瀏覽器中不能完全渲染出效果。也不要直接向表單組應用輸入框組的 class，輸入框組是一個孤立的元件。 12.導航元素 nav nav-tabs :標籤式的導航選單 nav nav-pills: 膠囊式的導航選單 //同時使用nav-stacked 讓膠囊垂直堆疊 //同時使用nav-justified 讓標籤式或膠囊式導航選單與父元素等寬 13.導航欄 建立一個預設的導航欄的步驟如下： 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 :帶有黑色背景白色文字的導航欄 14.麵包屑導航 breadcrumb breadcrumb 15.分頁 `pagination`:分頁 `disabled/active` :不可點選/當前頁面 `pager`:翻頁 `previous/next`:把連結向左/向右對齊 16.標籤 label-*:標籤(*可以為default/primary/success/info/warning/danger) 17.徽章 badgebadge 18.超大螢幕 jumbotron 19.頁面標題 page-header 20.縮圖 thumbnail 21.新增自定義的內容 現在我們有了一個基本的縮圖，我們可以向縮圖新增各種 HTML 內容，比如標題、段落或按鈕。具體步驟如下： 1.把帶有 class .thumbnail 的 <a> 標籤改為 <div>。 2.在該 <div> 內，您可以新增任何您想要新增的東西。由於這是一個 <div>，我們可以使用預設的基於 span 的命名規則來調整大小。 3.如果您想要給多個影象進行分組，請把它們放置在一個無序列表中，且每個列表項向左浮動。 22.警告 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.新增一個關閉按鈕。 23.進度條 建立一個基本的進度條的步驟如下： 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% 的位置。 24.多媒體物件 media:允許將媒體物件裡的多媒體（影象、視訊、音訊）浮動到內容區塊的左邊或者右邊。 .media-list：如果你需要一個列表，各項內容是無序列表的一部分，可以使用該 class。可用於評論列表與文章列表 25.列表組 建立一個基本的列表組的步驟如下： 向元素 <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 26.面板 panel panel-default:面板 panel-heading:面板頭部 panel-title:面板標題 panel-body:面板內容 panel-footer:面板腳註