bootstrap 學習筆記（3）---- 代碼

這節講的是代碼：

一、基本實例

<code></code>  <pre></pre> <kbd></kbd>

 應用以下

　　　一、For example, <code>section</code> should be wrapped as inline.
　　    二、To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
　　    三、<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

　　結果如圖：

二、表格

　　a、爲任意 <table> 標籤添加 .table 類能夠爲其賦予基本的樣式 — 少許的內補（padding）和水平方向的分隔線。這種方式看起來不少餘！？可是咱們以爲，表格元素使用的很普遍，若是咱們爲其賦予默認樣式可能會影響例如日曆和日期選擇之類的插件，因此咱們選擇將此樣式獨立出來。

 代碼：<table class="table"> ... </table>

　　b、條紋裝表格：經過 .table-striped 類能夠給 <tbody> 以內的每一行增長斑馬條紋樣式。

　　****跨瀏覽器兼容性：條紋狀表格是依賴 :nth-child CSS 選擇器實現的，而這一功能不被 Internet Explorer 8 支持

　　代碼：<table class="table table-striped"> ... </table>

如圖：

　　c、帶邊框的表格：添加 .table-bordered 類爲表格和其中的每一個單元格增長邊框。

　　代碼:<table class="table table-bordered"> ... </table>

　　d、鼠標懸停：經過.table-hover類，可讓鼠標懸停每一列作出響應

　　代碼:<table class="table table-hover"> ... </table>

　　e、緊縮表格：經過.table-condensed類可讓表格更加緊湊，單元格的內補（padding）均會減半。

　　代碼：<table class="table table-condensed"> ... </table>

　　f、表格顏色：能夠爲單元格或行設置顏色。success（綠色），active（灰色系），info（青色系），warning(黃色系)，danger(紅色系)

                              顏色如圖：                                                                                 

 

三、相應式表格：

將任何 .table 元素包裹在 .table-responsive 元素內，便可建立響應式表格，其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於 768px 寬度時，水平滾動條消失。

代碼：<div class="table-responsive"> <table class="table"> ... </table> </div>