2.標題(2)
<small>,class:small
3.段落 <p>
讓一個段落p突出顯示,能夠經過添加類名「lead」實現,其做用就是增大文本字號,加粗文本,並且對行高和margin也作相應的處理
4.使用<b>和<strong>標籤讓文本直接加粗。
5.使用標籤<em>或<i>來實現斜體
6.強調類
.text-muted:提示,使用淺灰色(#999)
.text-primary:主要,使用藍色(#428bca)
.text-success:成功,使用淺綠色(#3c763d)
.text-info:通知信息,使用淺藍色(#31708f)
.text-warning:警告,使用黃色(#8a6d3b)
.text-danger:危險,使用褐色(#a94442)
7.文本對齊風格(text-align)
.text-left:左對齊
.text-center:居中對齊
.text-right:右對齊
.text-justify:兩端對齊
8.列表結構主要有三種:有序列表、無序列表和定義列表
類名「.list-unstyled」,這樣就能夠去除默認的列表樣式的風格。
類名「.list-inline」來實現內聯列表,簡單點說就是把垂直列表換成水平列表
<dl>添加類名「.dl-horizontal」給定義列表實現水平顯示效果。
9.代碼
一、<code>:通常是針對於單個單詞或單個句子的代碼
二、<pre>:通常是針對於多行代碼(也就是成塊的代碼)。<pre>代碼塊風格,標籤前面留多少個空格,在顯示效果中就會留多少個空格
類名「.pre-scrollable」,就能夠控制代碼塊區域最大高度爲340px,一旦超出這個高度,就會在Y軸出現滾動條。
三、<kbd>:通常是表示用戶要經過鍵盤輸入的內容
10.表格table
☑ .table:基礎表格
☑ .table-striped:斑馬線表格
☑ .table-bordered:帶邊框的表格
☑ .table-hover:鼠標懸停高亮的表格
☑ .table-condensed:緊湊型表格
☑ .table-responsive:響應式表格
11.表格行tr:顏色不一樣
.active: 表示當前活動的信息
.success:表示成功或者正確的行爲
.info:表示中立的信息或行爲
.warning:表示警告,須要特別注意
.danger:表示危險或者多是錯誤的行爲
12.表單form
正常表單:是垂直分佈的。
水平表單:要實現水平表單效果,必須知足如下兩個條件:
在<form>元素是使用類名「form-horizontal」。
配合Bootstrap框架的網格系統。(後面講解)
內聯表單:要將表單的控件都在一行內顯示:<form>元素中添加類名「form-inline」
13.複選框和單選框
一、無論是checkbox仍是radio都使用label包起來了
二、checkbox連同label標籤放置在一個名爲「.checkbox」的容器內
三、radio連同label標籤放置在一個名爲「.radio」的容器內
在Bootstrap框架中,主要藉助「.checkbox」和「.radio」樣式,來處理複選框、單選按鈕與標籤的對齊方式。
14.水平排列複選框或單選框
一、若是checkbox須要水平排列,只須要在label標籤上添加類名「checkbox-inline」
二、若是radio須要水平排列,只須要在label標籤上添加類名「radio-inline」
15.按鈕button
.btn btn-default btn-primary btn-info btn-success btn-warning btn-danger btn-inverse btn-link
類定義按鈕的背景顏色:與text相似。
多標籤支持:a span div input的submit
按鈕大小:btn-lg btn-sm btn-xs
類名「btn-block」按鈕使用這個類名就可讓按鈕充滿整個容器:塊狀按鈕
活動狀態主要包括按鈕的懸浮狀態(:hover),點擊狀態(:active)和焦點狀態(:focus)。禁用狀態:disabled
16.表單的大小
input-sm:讓控件比正常大小更小
input-lg:讓控件比正常大小更大
17.form-control
<input><legend><fieldset><textarea>...類名`form-control`,也就是說表單元素使用了類名「form-control」。
將會實現一些設計上的定製效果 width:100% .<input>表單的類型type必須有。
產生焦點狀態的效果
表單控件:添加disabled屬性。 禁用手型變成了不許輸入的形狀。對於整個禁用的域中,若是legend中有輸入框的話,這個輸入框是沒法被禁用的 。
18.表單驗證
.has-warning:警告狀態(黃色)
.has-error:錯誤狀態(紅色)
.has-success:成功狀態(綠色)
表單驗證的時候,不一樣的狀態會提供不一樣的 icon。 添加類名「has-feedback」便可追加結果圖標.
<span class="glyphicon glyphicon-ok form-control-feedback"></span>圖標代碼
"help-block"樣式,將提示信息以塊狀顯示,而且顯示在控件底部。與表單在一個塊中。<span>標籤中寫提示信息。
"help-inline"樣式,行內提示信息。能夠用網格系統代替。
19.圖像
一、img-responsive:響應式圖片,主要針對於響應式設計
二、img-rounded:圓角圖片
三、img-circle:圓形圖片
四、img-thumbnail:縮略圖片
20.圖標
類名:glyphicon glyphicon-search...<span class="glyphicon glyphicon-search"></span>一種搜索圖標
21網格系統
一、數據行(.row)必須包含在容器(.container)中,以便爲其賦予合適的對齊方式和內距(padding)。如:
<div class="container">
<div class="row"></div>
</div>
二、在行(.row)中能夠添加列(.column),但列數之和不能超過平分的總列數,好比12
col-xs-* col-sm-* col-md-* col-lg-* 佔據*列
3.行容器(.row),其定義了「margin-left」和」margin-right」值爲」-15px」,用來抵消第一個列的左內距和最後一列的右內距
4.列元素上添加類名「col-md-offset-*」(其中星號表明要偏移的列組合數),那麼具備這個類名的列就會向右偏移
5.類名「col-md-push-*」 向右移動*列
「col-md-pull-*」 向左移動*列
6.網格嵌套 框架