出於學習需要，自覺得把基本的bootstrap用法自己敲一遍，對每個用法有個較清晰的印象，所以做了本篇總結，這也是一個鞏固的學習過程。
出於學習需要，自覺得把基本的bootstrap用法自己敲一遍，對每個用法有個較清晰的印象，所以做了本篇總結，這也是一個鞏固的學習過程。
可點擊左邊的目錄，方便速查。
按鈕
a,input,button都可以設置為按鈕
a標簽按鈕<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
