Bootstrap3 CSS樣式基本用法總結
按鈕
a,input,button均可以設置爲按鈕
<a class="btn btn-default" href="#" role="button">a標籤按鈕</a>
<input type="button" class="btn btn-default" value="input的button標籤按鈕" />
<input type="submit" class="btn btn-default" value="input的submit標籤按鈕" />
<button class="btn btn-default">button標籤按鈕</button>
預置樣式
<button class="btn btn-default">default樣式</button>
<button class="btn btn-primary">primary樣式</button>
<button class="btn btn-success">success樣式</button>
<button class="btn btn-info">info樣式</button>
<button class="btn btn-warning">warning樣式</button>
<button class="btn btn-danger">danger樣式</button>
<button class="btn btn-link">link樣式</button>
按鈕大小
<button class="btn btn-info btn-lg">大按鈕btn-lg</button>
<button class="btn btn-info">默認按鈕</button>
<button class="btn btn-info btn-sm">小按鈕btn-sm</button>
<button class="btn btn-info btn-xs">超小按鈕btn-xs</button>
塊級按鈕-btn-block
<button class="btn btn-success btn-block">塊級按鈕，與父元素等寬</button>
<button class="btn btn-warning btn-lg btn-block">塊級按鈕，與父元素等寬</button>
禁用狀態 class="disabled"
<button class="btn btn-success disabled">被禁用的按鈕</button>
激活狀態 class="active"
<button class="btn btn-success active">激活狀態的按鈕</button>
圖片
響應式圖片-img-responsive
<img class="img-responsive" src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/783931/o_%e8%83%8c%e6%99%af%e5%9b%be1.png" />
圖片的三種形狀
<img class="img-rounded" src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/601951/o_img05.jpg" />
<img class="img-thumbnail" src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/601951/o_img05.jpg" />
<img class="img-circle" src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/601951/o_img05.jpg" />
表格
基本表格 .table
| 表格標題 | 表格標題 | 表格標題 |
|---|---|---|
| 表格單元 | 表格單元 | 表格單元 |
| 表格單元 | 表格單元 | 表格單元 |
| 表格單元 | 表格單元 | 表格單元 |
<table class="table">
<thead>
<tr>
<th>表格標題</th>
<th>表格標題</th>
<th>表格標題</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
</tbody>
</table>
斑馬線表格 .table .table-striped
| 表格標題 | 表格標題 | 表格標題 |
|---|---|---|
| 表格單元 | 表格單元 | 表格單元 |
| 表格單元 | 表格單元 | 表格單元 |
| 表格單元 | 表格單元 | 表格單元 |
<table class="table table-striped">
<thead>
<tr>
<th>表格標題</th>
<th>表格標題</th>
<th>表格標題</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
</tbody>
</table>
帶邊框表格 .table .table-bordered
| 表格標題 | 表格標題 | 表格標題 |
|---|---|---|
| 表格單元 | 表格單元 | 表格單元 |
| 表格單元 | 表格單元 | 表格單元 |
| 表格單元 | 表格單元 | 表格單元 |
<table class="table table-bordered">
<thead>
<tr>
<th>表格標題</th>
<th>表格標題</th>
<th>表格標題</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
</tbody>
</table>
鼠標懸停表格 .table .table-hover
| 表格標題 | 表格標題 | 表格標題 |
|---|---|---|
| 表格單元 | 表格單元 | 表格單元 |
| 表格單元 | 表格單元 | 表格單元 |
| 表格單元 | 表格單元 | 表格單元 |
<table class="table table-hover">
<thead>
<tr>
<th>表格標題</th>
<th>表格標題</th>
<th>表格標題</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
</tbody>
</table>
緊湊表格 .table .table-condensed
| 表格標題 | 表格標題 | 表格標題 |
|---|---|---|
| 表格單元 | 表格單元 | 表格單元 |
| 表格單元 | 表格單元 | 表格單元 |
| 表格單元 | 表格單元 | 表格單元 |
<table class="table table-condensed">
<thead>
<tr>
<th>表格標題</th>
<th>表格標題</th>
<th>表格標題</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
</tbody>
</table>
響應式表格 .table .table-responsive
| 表格標題 | 表格標題 | 表格標題 |
|---|---|---|
| 表格單元 | 表格單元 | 表格單元 |
| 表格單元 | 表格單元 | 表格單元 |
| 表格單元 | 表格單元 | 表格單元 |
<div class="myborder">
<table class="table table-responsive">
<thead>
<tr>
<th>表格標題</th>
<th>表格標題</th>
<th>表格標題</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
<tr>
<td>表格單元</td>
<td>表格單元</td>
<td>表格單元</td>
</tr>
</tbody>
</table>
狀態類
| 表格標題 | 表格標題 | 表格標題 |
|---|---|---|
| 狀態active | 狀態active | 狀態active |
| 狀態success | 狀態success | 狀態success |
| 狀態info | 狀態info | 狀態info |
| 狀態warning | 狀態warning | 狀態warning |
| 狀態danger | 狀態danger | 狀態danger |
<table class="table">
<thead>
<tr>
<th>表格標題</th>
<th>表格標題</th>
<th>表格標題</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>狀態active</td>
<td>狀態active</td>
<td>狀態active</td>
</tr>
<tr class="success">
<td>狀態success</td>
<td>狀態success</td>
<td>狀態success</td>
</tr>
<tr class="info">
<td>狀態info</td>
<td>狀態info</td>
<td>狀態info</td>
</tr>
<tr class="warning">
<td>狀態warning</td>
<td>狀態warning</td>
<td>狀態warning</td>
</tr>
<tr class="danger">
<td>狀態danger</td>
<td>狀態danger</td>
<td>狀態danger</td>
</tr>
</tbody>
</table>
表單
基本表單-.from-control 和.from-group搭配
<form>
<div class="form-group">
<label for="userName">用戶名</label>
<input type="text" class="form-control" name="userName" placeholder="請輸入用戶名"/>
</div>
<div class="form-group">
<label for="password">密碼</label>
<input type="password" class="form-control" name="password" placeholder="請輸入密碼"/>
</div>
<div class="checkbox">
<label>
<input type="checkbox">記住密碼</input>
</label>
</div>
<button type="submit" class="btn btn-info">肯定</button>
</div>
</form>
內聯表單-.from-inline
<form class="form-inline">
<div class="form-group">
<label for="userName">用戶名</label>
<input type="text" class="form-control" name="userName" placeholder="請輸入用戶名"/>
</div>
<div class="form-group">
<label for="password">密碼</label>
<input type="password" class="form-control" name="password" placeholder="請輸入密碼"/>
</div>
<div class="checkbox">
<label>
<input type="checkbox">記住密碼</input>
</label>
</div>
<button type="submit" class="btn btn-info">肯定</button>
</div>
</form>
移動端注意(隱藏label)
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="userName">用戶名</label>
<input type="text" class="form-control" name="userName" placeholder="請輸入用戶名"/>
</div>
<div class="form-group">
<label class="sr-only" for="password">密碼</label>
<input type="password" class="form-control" name="password" placeholder="請輸入密碼"/>
</div>
<div class="checkbox">
<label>
<input type="checkbox">記住密碼</input>
</label>
</div>
<button type="submit" class="btn btn-info">肯定</button>
</div>
</form>
input的內聯組合
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">前面</div>
<input class="form-control" type="text" placeholder="輸入測試" />
<div class="input-group-addon">後面</div>
</div>
<button type="submit" class="btn btn-default">提交</button>
</div>
</form>
水平排列表單(用柵格系統)
<form class="form-horizontal">
<div class="form-group">
<label for="userName" class="control-label col-sm-2">用戶名</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="userName" placeholder="請輸入用戶名"/>
</div>
</div>
<div class="form-group">
<label for="password" class="control-label col-sm-2">密碼</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" placeholder="請輸入密碼"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">記住密碼</input>
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-info">肯定</button>
</div>
</div>
</form>
單選框和複選框的內聯形式
<label class="checkbox-inline">
<input type="checkbox">選擇1
</label>
<label class="checkbox-inline">
<input type="checkbox">選擇2
</label>
<label class="checkbox-inline">
<input type="checkbox">選擇3
</label>
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="myradio">選擇1
</label>
<label class="radio-inline">
<input type="radio" name="myradio">選擇2
</label>
<label class="radio-inline">
<input type="radio" name="myradio">選擇3
</label>
</div>
靜態控件 .form-control-static
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">用戶名</label>
<div class="col-sm-10">
<p class="form-control-static">Tab Weng</p>
</div>
</div>
</form>
標題
（提示：因爲默認的h1~h7在博客園編輯器中受默認樣式的影響，因此沒法顯示bootstrap的樣式，其具體樣式與下面的class="h1"等相同）前端
h1標題樣式
h4標題樣式
h5標題樣式
h6標題樣式
<h1>h1標題樣式</h1>
<h4>h4標題樣式</h4>
<h5>h5標題樣式</h5>
<h6>h6標題樣式</h6>
標題也可用class="h1"設置
經過class="h1"來設置樣式
經過class="h4"來設置樣式
經過class="h5"來設置樣式
經過class="h6"來設置樣式
<div class="h1">經過class="h1"來設置樣式</div>
<div class="h4">經過class="h4"來設置樣式</div>
<div class="h5">經過class="h5"來設置樣式</div>
<div class="h6">經過class="h6"來設置樣式</div>
副標題-<small>(或class="small")
設置樣式h1
這裏是副標題
設置樣式h4
這裏是副標題
設置樣式h5
這裏是副標題
設置樣式h6
這裏是副標題
<div class="h1">設置樣式h1<small>這裏是副標題</small></div>
<div class="h4">設置樣式h4<small>這裏是副標題</small></div>
<div class="h5">設置樣式h5<small>這裏是副標題</small></div>
<div class="h6">設置樣式h6<small>這裏是副標題</small></div>
頁面內容
p標籤
Web前端開發工程師，主要職責是利用(X)HTML/CSS/JavaScript/DOM/Flash等各類Web技術進行產品的界面開發。 製做標準優化的代碼，並增長交互動態功能，開發JavaScript以及Flash模塊，同時結合後臺開發技術模擬總體 效果，進行豐富互聯網的Web開發，致力於經過技術改善用戶體驗。數據庫
<p>
Web前端開發工程師，主要職責是利用(X)HTML/CSS/JavaScript/DOM/Flash等各類Web技術進行產品的界面開發。
製做標準優化的代碼，並增長交互動態功能，開發JavaScript以及Flash模塊，同時結合後臺開發技術模擬總體
效果，進行豐富互聯網的Web開發，致力於經過技術改善用戶體驗。
</p>
突出段落-class="lead"
Web前端開發工程師，主要職責是利用(X)HTML/CSS/JavaScript/DOM/Flash等各類Web技術進行產品的界面開發。 製做標準優化的代碼，並增長交互動態功能，開發JavaScript以及Flash模塊，同時結合後臺開發技術模擬總體 效果，進行豐富互聯網的Web開發，致力於經過技術改善用戶體驗。bootstrap
<p class="lead">
Web前端開發工程師，主要職責是利用(X)HTML/CSS/JavaScript/DOM/Flash等各類Web技術進行產品的界面開發。
製做標準優化的代碼，並增長交互動態功能，開發JavaScript以及Flash模塊，同時結合後臺開發技術模擬總體
效果，進行豐富互聯網的Web開發，致力於經過技術改善用戶體驗。
</p>
內聯文本元素
標記-<mark>
使用mark來標記一下
使用mark來<mark>標記</mark>一下
刪除線-<del>或<s>
用del標籤來刪除這段話後端
用s標籤來刪除這段話api
<p><del>用del標籤來刪除這段話</del></p>
<p><s>用s標籤來刪除這段話</s></p>
下劃線-<ins>或<u>
ins標籤表示插入文本微信
u標籤表示加上下劃線 <p><ins>ins標籤表示插入文本</ins></p>
<u>u標籤表示加上下劃線</u>
小號文本-<small>
這是小號文本
<small>這是小號文本</small>
強調-<strong>
這是增強字體，用strong
<strong>這是增強字體，用strong</strong>
斜體-<em>
這是斜體，用em
<em>這是斜體，用em</em>
對齊
居左對齊框架
居中對齊編輯器
居右對齊學習
[兩端對齊] 現代項目的開發，須要掌握多種技術。互聯網項目，須要用到後端開發、 前端開發、界面設計、產品設計、數據庫、各類移動客戶端、三屏兼容、restFul API設計 和OAuth等等，比較前衛的項目，還會用到Single Page Application、Web Socket、HTML5/CSS3 這些技術以及像第三方開發像微信公衆號微博應用等等。
[沒有對齊] 現代項目的開發，須要掌握多種技術。互聯網項目，須要用到後端開發、 前端開發、界面設計、產品設計、數據庫、各類移動客戶端、三屏兼容、restFul API設計 和OAuth等等，比較前衛的項目，還會用到Single Page Application、Web Socket、HTML5/CSS3 這些技術以及像第三方開發像微信公衆號微博應用等等。
<p class="text-left">居左對齊</p>
<p class="text-center">居中對齊</p>
<p class="text-right">居右對齊</p>
<p class="text-justify">
[兩端對齊] 現代項目的開發，須要掌握多種技術。互聯網項目，須要用到後端開發、
前端開發、界面設計、產品設計、數據庫、各類移動客戶端、三屏兼容、restFul API設計
和OAuth等等，比較前衛的項目，還會用到Single Page Application、Web Socket、HTML5/CSS3
這些技術以及像第三方開發像微信公衆號微博應用等等。
</p>
<p class="text-nowrap">
[沒有對齊] 現代項目的開發，須要掌握多種技術。互聯網項目，須要用到後端開發、
前端開發、界面設計、產品設計、數據庫、各類移動客戶端、三屏兼容、restFul API設計
和OAuth等等，比較前衛的項目，還會用到Single Page Application、Web Socket、HTML5/CSS3
這些技術以及像第三方開發像微信公衆號微博應用等等。
</p>
改變大小寫
LowerCase HahaHa
UpperCase Hahaha
capitalize haHaha
<p class="text-lowercase">LowerCase HahaHa</p>
<p class="text-uppercase">UpperCase Hahaha</p>
<p class="text-capitalize">capitalize haHaha</p>
縮略語 <abbr>標籤
bootstrap是一個高度集成化的開發框架 此處縮略
bootstrap是一個高度集成化的開發框架 此處縮略
<p class="lead">
bootstrap是一個高度集成化的開發框架 <abbr title="這裏顯示了縮略語的內容">此處縮略</abbr><br />
bootstrap是一個高度集成化的開發框架 <abbr class="initialism" title="這裏加了類.initialism因此變小了">此處縮略</abbr>
</p>
引用
基本引用
這是html的基本引用標籤blockquote，bootstrap爲它左邊添加了一個灰色帶
<blockquote>
<p>這是html的基本引用標籤blockquote，bootstrap爲它左邊添加了一個灰色帶</p>
</blockquote>
引用來源<footer>
這世界並不會在乎你的自尊。這世界期望你在自我感受良好以前先要有所成就。
比爾蓋茨
<blockquote>
<p>這世界並不會在乎你的自尊。這世界期望你在自我感受良好以前先要有所成就。</p>
<footer>比爾蓋茨</footer>
</blockquote>
居右的引用，添加類.blockquote-reverse
這世界並不會在乎你的自尊。這世界期望你在自我感受良好以前先要有所成就。
比爾蓋茨
<blockquote class="blockquote-reverse">
<p>這世界並不會在乎你的自尊。這世界期望你在自我感受良好以前先要有所成就。</p>
<footer>比爾蓋茨</footer>
</blockquote>
列表
無樣式列表.list-unstyled
- 這裏是列表
- 這裏是列表
- 這裏是二級列表
- 這裏是二級列表
- 這裏是二級列表
- 這裏是二級列表
- 這裏是列表
- 這裏是列表
- 這裏是列表
<ul class="list-unstyled">
<li>這裏是列表</li>
<li>這裏是列表</li>
<ul>
<li>這裏是二級列表</li>
<li>這裏是二級列表</li>
<li>這裏是二級列表</li>
<li>這裏是二級列表</li>
</ul>
<li>這裏是列表</li>
<li>這裏是列表</li>
<li>這裏是列表</li>
</ul>
內聯列表-同一行顯示.list-inline
- 這裏是列表
- 這裏是列表
- 這裏是二級列表
- 這裏是二級列表
- 這裏是二級列表
- 這裏是二級列表
- 這裏是列表
- 這裏是列表
- 這裏是列表
<ul>
<li>這裏是列表</li>
<li>這裏是列表</li>
<ul class="list-inline">
<li>這裏是二級列表</li>
<li>這裏是二級列表</li>
<li>這裏是二級列表</li>
<li>這裏是二級列表</li>
</ul>
<li>這裏是列表</li>
<li>這裏是列表</li>
<li>這裏是列表</li>
</ul>
普通描述
- 名言
- 若是你陷入困境，那不是你父母的過錯，因此不要尖聲抱怨咱們的錯誤，要從中吸收教訓。
- 比爾蓋茨的名人名言是這樣描述的
- 在你出生以前，你的父母並不是像他們如今這樣乏味。 他們變成今天這個樣子是由於這些年來他們一直在爲你付帳單，給你洗衣服，聽你大談你是如何的酷。 因此，若是你想消滅你父母那一輩中的"寄生蟲"來拯救雨林的話，仍是先去清除你房間衣櫃裏的蟲子吧。
<dl>
<dt>名言</dt>
<dd>若是你陷入困境，那不是你父母的過錯，因此不要尖聲抱怨咱們的錯誤，要從中吸收教訓。</dd>
<dt>比爾蓋茨的名人名言是這樣描述的</dt>
<dd>在你出生以前，你的父母並不是像他們如今這樣乏味。
他們變成今天這個樣子是由於這些年來他們一直在爲你付帳單，給你洗衣服，聽你大談你是如何的酷。
因此，若是你想消滅你父母那一輩中的"寄生蟲"來拯救雨林的話，仍是先去清除你房間衣櫃裏的蟲子吧。
</dd>
</dl>
水平排列描述.dl-horizontal
- 名言
- 若是你陷入困境，那不是你父母的過錯，因此不要尖聲抱怨咱們的錯誤，要從中吸收教訓。
- 比爾蓋茨的名人名言是這樣描述的
- 在你出生以前，你的父母並不是像他們如今這樣乏味。 他們變成今天這個樣子是由於這些年來他們一直在爲你付帳單，給你洗衣服，聽你大談你是如何的酷。 因此，若是你想消滅你父母那一輩中的"寄生蟲"來拯救雨林的話，仍是先去清除你房間衣櫃裏的蟲子吧。
<dl class="dl-horizontal">
<dt>名言</dt>
<dd>若是你陷入困境，那不是你父母的過錯，因此不要尖聲抱怨咱們的錯誤，要從中吸收教訓。</dd>
<dt>比爾蓋茨的名人名言是這樣描述的</dt>
<dd>在你出生以前，你的父母並不是像他們如今這樣乏味。
他們變成今天這個樣子是由於這些年來他們一直在爲你付帳單，給你洗衣服，聽你大談你是如何的酷。
因此，若是你想消滅你父母那一輩中的"寄生蟲"來拯救雨林的話，仍是先去清除你房間衣櫃裏的蟲子吧。
</dd>
</dl>
代碼
內聯代碼 code
Let's add a headFile
#include<stdio>
Let's add a headFile <code>#include<stdio></code>
用戶輸入 kbd
請按
F5 刷新
請按 <kbd>F5</kbd> 刷新
代碼塊 pre
<div>This is a tag name div </div>
<pre><div>This is a tag name div </div></pre>
變量 var
a
<var>a</var>
程序輸出 samp
Hello World!
<samp>Hello World!</samp>
本篇總結了一些經常使用的bootstrap3 的Css樣式，但並不是全部。
詳細的學習請參考bootstrap官網：http://getbootstrap.com
bootstrap4 即將到來，期待！
相關文章
- 1. CSS文本樣式總結
- 2. css樣式總結
- 3. CSS樣式總結
- 4. Bootstrap3 正文文本樣式
- 5. bootstrap3 - 導航（基礎樣式）
- 6. css基本樣式
- 7. CSS樣式居中總結
- 8. css樣式踩坑總結
- 9. CSS字體樣式總結
- 10. css的基本使用-文本樣式
- 更多相關文章...
- • Lua 基本語法 - Lua 教程
- • C# 基本語法 - C#教程
- • Kotlin學習（一）基本語法
- • 算法總結-回溯法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. CSS文本樣式總結
- 2. css樣式總結
- 3. CSS樣式總結
- 4. Bootstrap3 正文文本樣式
- 5. bootstrap3 - 導航（基礎樣式）
- 6. css基本樣式
- 7. CSS樣式居中總結
- 8. css樣式踩坑總結
- 9. CSS字體樣式總結
- 10. css的基本使用-文本樣式