代碼

在bootstrap主要提供了三種代碼風格：

1、使用<code></code>來顯示單行内聯代碼

<code>&lt;code&gt;</code>

2、使用<pre></pre>來顯示多行塊代碼

<pre>

&lt;ul&gt;

&lt;li&gt;...&lt;/li&gt;

&lt;li&gt;...&lt;/li&gt;

&lt;li&gt;...&lt;/li&gt;

&lt;/ul&gt;

</pre>

3、使用<kbd></kbd>來顯示用戶輸入代碼。

<div>請輸入<kbd>ctrl c</kbd>來複制代碼，然後使用<kbd>ctrl v</kbd>來粘貼代碼</div>

在使用代碼時，用戶可以根據具體的需求來使用不同的類型：

1、<code>：一般是針對于單個單詞或單個句子的代碼

2、<pre>：一般是針對于多行代碼（也就是成塊的代碼）

3、<kbd>:一般是表示用戶要通過鍵盤輸入的内容

不管使用哪種代碼風格，在代碼中碰到小于号（<）要使用硬編碼“&lt;”來替代，大于号(>)使用“&gt;”來替代。而且對于<pre>代碼塊風格，标簽前面留多少個空格，在顯示效果中就會留多少個空格。

<pre>有時候代碼太多想控制代碼塊的大小。Bootstrap隻需要在pre标簽上添加類名“.pre-scrollable”，就可以控制代碼塊區域最大高度為340px，一旦超出這個高度，就會在Y軸出現滾動條。

表格

表格是Bootstrap的一個基礎組件之一，Bootstrap為表格提供了1種基礎樣式和4種附加樣式以及1個支持響應式的表格。在使用Bootstrap的表格過程中，隻需要添加對應的類名就可以得到不同的表格風格。

Bootstrap還為表格的行元素<tr>提供了五種不同的類名，每種類名控制了行的不同背景顔色

其使用非常的簡單，隻需要在<tr>元素中添加上表對應的類名

<tr class="active">

<td>…</td>

</tr>

基礎表格 .table

對表格的結構，跟我們平時使用表格是一樣的,在Bootstrap基礎表格是通過類名“.table”來控制

<table class="table">

<thead>

<tr>

<th>表格标題</th>

</tr>

</thead>

<tbody>

<tr>

<td>表格單元格</td>

</tr>

</tbody>

</table>

基本表格圖

斑馬線表格 .table-striped

簡單點說就是讓表格帶有背景條紋效果。在Bootstrap中實現這種表格效果并不困難，隻需要在<table class="table">的基礎上增加類名“.table-striped”即可

<table class="table table-striped">

…

</table>

其效果與基礎表格相比，僅是在tbody隔行有一個淺灰色的背景色。

帶邊框的表格 .table-bordered

即所有單元格具有一條1px的邊框。隻需要在基礎表格<table class="table">基礎上添加一個“.table-bordered”類名即可

<table class="table table-bordered">

…

</table>

樣式如圖

鼠标懸浮高亮的表格 .table-hover

當鼠标懸停在表格的行上面有一個高亮的背景色，使用也簡單，僅需要<table class="table">元素上添加類名“table-hover”即可。

<table class="table table-hover">

…

</table>

注：其實，鼠标懸浮高亮表格，可以和Bootstrap其他表格混合使用。簡單點說，隻要你想讓你的表格具備懸浮高亮效果，你隻要給這個表格添加“table-hover”類名就好了。

<table class="table table-striped table-bordered table-hover">

…

</table>

緊湊型表格 .table-condensed

緊湊型表格的運用，也隻是需要在<table class="table">基礎上添加類名“table-condensed”

<table class="table table-condensed">

…

</table>

Bootstrap中緊湊型的表格與基礎表格差别不大，因為隻是将單元格的内距由8px調至5px。

響應式表格 .table-responsive

Bootstrap提供了一個容器，并且此容器設置類名“.table-responsive”,此容器就具有響應式效果，然後将<table class="table">置于這個容器當中，這樣表格也就具有響應式效果。

Bootstrap中響應式表格效果表現為：當你的浏覽器可視區域小于768px時，表格底部會出現水平滾動條。當你的浏覽器可視區域大于768px時，表格底部水平滾動條就會消失。

<div class="table-responsive">

<table class="table table-bordered">

…

</table>

</div>

寬屏效果

窄屏效果

不管制作哪種表格都離不開類名“table”。所以大家在使用Bootstrap表格時，千萬注意，你的<table>元素中一定不能缺少類名“table”。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部