1.標題
Bootstrap 和普通的 HTML 頁面一樣，定義標題都是使用標簽 <h1> ~ <h6> ，只不過 Bootstrap 覆蓋了其默認的樣式，使用其在所有瀏覽器下顯示的效果一樣，
為了讓非標題元素和標題使用相同的樣式，還特意定義了 .h1 ~ .h6 六個類名。同時后面可以緊跟着一行小的標題 <small></small> 或使用 .small
2.段落
-
段落是排版中的另一個重要元素之一。
-
通過.lead 來突出強調內容(其作用就是增大文本字號，加粗文本，而且對行高和margin也做相應的處理)。可以使用以下標簽給文本做突出樣式處理。
-
<small> ：小號字
-
<b><strong>：加粗
-
<i><em>: 斜體
3.強調
定義了一套類名，這里稱其為強調類名，這些強調嘞都是通過顏色來表示強調，具體說明如下：
-
.text-muted： 提示，使用淺灰色(#999)
-
.text.primary ：主要，使用藍色(#428bca)
-
.text-success：成功，使用淺綠色(#3c763d)
-
.text-info：通知信息，使用淺藍色(#31708f)
-
text-warning：警告，使用黃色(#8a6d3n)
-
text-danger：危險，使用褐色(#a94442)
4.對齊效果
在CSS中常常使用text-align 來實現文本的對齊風格的設置。
其中主要有4種風格
left 左對齊
right 右對齊
center 居中對齊
justify 兩端對齊
Bootstrap 中通過定義四個類名來控制文本的對齊風格
text-left 左對齊
text-right 右對齊
text-center 居中對齊
text-justify 兩端對齊
5.列表
-
無序列表（ul）有序列表（ol）
移除了默認的 list-style 樣式，也就是去掉了原無序列表前面的點 (去掉項目符號(編號))
給列表添加class="list-inline"，把垂直列表換成水平列表，而且去掉項目符號(編號)，將所有元素放置於同一行。也可以說內聯列表就是為了制作水平導航而生的。
給列表添加class="list-inline"，把垂直列表換成水平列表，而且去掉項目符號(編號)，將所有元素放置於同一行。也可以說內聯列表就是為了制作水平導航而生的。
-
自定義列表（dl <dt><dd>）
在原有的基礎加入了一些樣式，使用樣式class="dl-horizontal" 制作水平定義列表，當標題寬度超過 160px 時，將會顯示三個省略號。
6.代碼
一般在個人博客上使用的較為頻繁，用於顯示代碼的風格。在 Bootstrap 主要提供了三種代碼風格：
-
使用<code></code> 來顯示單行內聯代碼
-
使用<pre></pre> 來顯示多行塊代碼
-
樣式pre-scrollable(height，max-height 高度固定為340px，超過則存在滾動條)
-
使用<kbd></kbd> 來顯示鍵盤快捷鍵
-
顯示htmL標簽的代碼需要適應字符實體，小於號(<）要使用硬編碼“⁢”來替代，大於號(>)使用">”來替代
7.表格
class = "table" ： 基礎表格
|
table-striped
|
斑馬線表格
|
|
table-bordered
|
帶邊框的表格
|
|
table-hover
|
鼠標懸停高亮的表格
|
|
table-condensed
|
緊湊型表格，單元格沒內距或者內距較其他表格的內距小
|
tr、th、td樣式
|
active
|
將懸停的顏色應用在行或者單元格上
|
|
success
|
表示成功的操作
|
|
info
|
表示信息變化的操作
|
|
warning
|
表示一個警告的操作
|
|
danger
|
表示一個危險的操作
|
7.表單
文本框和下拉框
-
class="form-control" 表單元素的樣式 下拉選擇框select多個選擇設置multiple="multuple"
-
class="input-lg" ：表單控件較大
-
class="input-sm" ： 表單控件較小
單選框和復選框
-
垂直顯示(給input標簽加)：class="radio"
-
水平顯示(給label標簽加)：class="radio-inline"
-
垂直顯示(給div標簽加)：class="checkbox"
-
水平顯示(給div標簽加)：class="checkbox-inline"
按鈕
基礎樣式(給button標簽加)：class="btn"
-
class="btn btn-default" 默認樣式Default
-
class="btn btn-primary" 首選項Primary
-
class="btn btn-success" 成功Success
-
class="btn btn-info" 一般信息Info
-
class="btn btn-warning" 警告Warning
-
class="btn btn-danger" 危險Danger
-
class="btn btn-link" 鏈接Link
多標簽支持：使用 a div input 等制作按鈕
注意：
雖然按鈕類可以應用到 <a> 和 <button> 元素上，但是，導航和導航條組件只支持 <button> 元素。
如果 <a> 元素被作為按鈕使用 – 並用於在當前頁面觸發某些功能 – 而不是用於鏈接其他頁面或鏈接當前頁面中的其他部分，那么，務必為其設置 role="button" 屬性。
我們總結的最佳實踐是：強烈建議盡可能使用 <button> 元素來獲得在各個瀏覽器上獲得相匹配的繪制效果。
設置按鈕大小
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以獲得不同尺寸的按鈕
-
class="btn-lg" 大按鈕
-
class="btn-sm" 小按鈕
-
class="btn-xs" 超小按鈕
為 <button> 元素添加 disabled="disabled" 屬性，使其表現出禁用狀態，樣式添加disable看起來被禁用。
表單布局
基本的表單結構是 Bootstrap 自帶的，個別的表單控件自動接收一些全局樣式。下面列出了創建基本表單的步驟：
向父元素<form> 元素 添加 role="form"
把標簽和控件放在一個帶有 class="form-group" 的<div> 中。這是獲取最佳間距所必需的
向所有的文本元素 <input> 、<textarea> 、select 添加 class="form-control"
內聯表單（水平布局）, 它的所有元素是內聯的，向左對齊的，標簽是並排的 ，向 <form> 標簽添加 class="form-inline"
8.縮略圖
字體圖標
-
在我們下載的 Bootstrap 加壓文件中有 fonts 文件夾，里面就是我們的字體圖標
-
只需將 fonts 文件夾復制到我們的項目紅，我們就可以使用字體圖標了
-
字體圖標類名地址查看，需要時去復制即可： https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm
<span class="字體圖標類名"> 字體圖標 </span>
縮略圖的使用
-
大多數站點都需要在網格中布局圖像、視頻、文本等。Bootstrap 通過縮略圖為此提供了一種簡便的方式
-
使用 Bootstrap 創建縮略圖的步驟如下：
-
在圖像周圍添加帶有 class="thumbnail" 的 <a> 標簽。
-
這會添加四個像素的內邊距（padding）和一個灰色的邊框。
-
當鼠標懸停在圖像上時，會動畫顯示出圖像的輪廓。
<body> <div class="container"> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="img/timg.jpg" alt="通用的占位符縮略圖"> </a> </div> </div> </body>
自定義內容
-
現在我們有了一個基本的縮略圖，我們可以向縮略圖添加各種 HTML 內容，比如標題、段落或按鈕。具體步驟如下：
-
把帶有 class="thumbnail" 的 <a> 標簽改為 <div>。
-
在該 <div>內，您可以添加任何您想要添加的東西。由於這是一個 <div>，我們可以使用默認的基於 span 的命名規則來調整大小。
-
如果您想要給多個圖像進行分組，請把它們放置在一個無序列表中，且每個列表項向左浮動。
面板
面板組件用於把 DOM 組件插入到一個盒子中
創建一個基本的面板，只需要向 <div> 元素添加 class="panel panel-default" 即可
默認的 .panel 組件所做的只是設置基本的邊框 border 和 內補 padding 來包含內容
<div class="panel panel-default"> <div class="panel-body"> 這是一個基本的面板 </div> </div>
給盒子添加 class="panel-heading" 可以很簡單地向面板添加標題。
給盒子添加 class="panel-body" 可以向面板添加主題內容
<div class="panel panel-warning"> <div class="panel-heading"> <h2>明星合集</h2> </div> <div class="panel-body"> <div class="col-md-3"> <div class="thumbnail"> <img src="img/timg.jpg" alt="..."> <h3>高圓圓</h3> <p>出生於北京市，中國內地影視女演員、模特。</p> <button class="btn btn-default"> <span class="glyphicon glyphicon-heart"></span>喜歡</button> <button class="btn btn-info"> <span class="glyphicon glyphicon-pencil"></span>評論 </button> </div> </div> </div> </div>