Bootstrap3.0中有哪些表格-創(chuàng)新互聯(lián)

本篇內容介紹了“Bootstrap3.0中有哪些表格”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

創(chuàng)新互聯(lián)企業(yè)建站,十多年網站建設經驗，專注于網站建設技術，精于網頁設計，有多年建站和網站代運營經驗，設計師為客戶打造網絡企業(yè)風格，提供周到的建站售前咨詢和貼心的售后服務。對于成都網站建設、成都做網站中不同領域進行深入了解和探索，創(chuàng)新互聯(lián)在網站建設中充分了解客戶行業(yè)的需求，以靈動的思維在網頁中充分展現(xiàn)，通過對客戶行業(yè)精準市場調研，為客戶提供的解決方案。

基本案例

為任意<table>標簽添加.table可以為其賦予基本的樣式—少量的內補（padding）和水平方向的分隔線。這種方式看起來很多余??？但是我們覺得，表格元素使用的很廣泛，如果我們?yōu)槠滟x予默認樣式可能會影響例如日歷和日期選擇之類的插件，所以我們選擇將其樣式獨立出來。

Bootstrap3.0中有哪些表格

一個簡單的Table示例

代碼如下:

<div class="container">
<table class="table">
<caption>Table基本案例</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>User Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>aehyok</td>
<td>leo</td>
<td>@aehyok</td>
</tr>
<tr>
<td>lynn</td>
<td>thl</td>
<td>@lynn</td>
</tr>
</tbody>
</table>
</div>

Bootstrap3.0中有哪些表格

條紋狀表格

利用.table-striped可以給<tbody>之內的每一樣增加斑馬條紋樣式。

在上面示例的table元素上再添加一個樣式類

代碼如下:

看現(xiàn)在的效果，還是有點變化的。

Bootstrap3.0中有哪些表格

帶邊框的表格

利用.table-bordered為表格和其中的每個單元格增加邊框。

還是將第一個示例中的table元素上再添加一個樣式類

代碼如下:

Bootstrap3.0中有哪些表格

鼠標懸停

利用.table-hover可以讓<tbody>中的每一行響應鼠標懸停狀態(tài)。

代碼如下:

將鼠標移到那一行那一行就會有效果的

Bootstrap3.0中有哪些表格

緊縮表格

利用.table-condensed可以讓表格更加緊湊，單元格中的內部（padding）均會減半。

代碼如下:

這個效果沒那么明顯，主要就是單元格中內容padding減半了。

狀態(tài)Class

通過這些狀態(tài)class可以為行貨單元格設置顏色。

Bootstrap3.0中有哪些表格

代碼如下:

<table class="table table-condensed">
<caption>Table</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>User Name</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>aehyok</td>
<td>leo</td>
<td>@aehyok</td>
</tr>
<tr class="success">
<td>2</td>
<td>lynn</td>
<td>thl</td>
<td>@lynn</td>
</tr>
<tr class="warning">
<td>3</td>
<td>Amdy</td>
<td>Amy</td>
<td>@Amdy</td>
</tr>
<tr class="danger">
<td>4</td>
<td>Amdy</td>
<td>Amy</td>
<td>@Amdy</td>
</tr>
<tr >
<td class="success">5</td>
<td class="danger">Amdy</td>
<td class="warning">Amy</td>
<td class="active">@Amdy</td>
</tr>
</tbody>
</table>

Bootstrap3.0中有哪些表格

響應式表格

將任何.table包裹在.table-responsive中即可創(chuàng)建響應式表格，其會在小屏幕設備上（小于768px）水平滾動。當屏幕大于768px寬度時，水平滾動條消失。

代碼如下:

<div class="table-responsive">
<table class="table">
<caption>Table</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>User Name</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>aehyok</td>
<td>leo</td>
<td>@aehyok</td>
</tr>
<tr class="success">
<td>2</td>
<td>lynn</td>
<td>thl</td>
<td>@lynn</td>
</tr>
<tr class="warning">
<td>3</td>
<td>Amdy</td>
<td>Amy</td>
<td>@Amdy</td>
</tr>
<tr class="danger">
<td>4</td>
<td>Amdy</td>
<td>Amy</td>
<td>@Amdy</td>
</tr>
<tr >
<td class="success">5</td>
<td class="danger">Amdy</td>
<td class="warning">Amy</td>
<td class="active">@Amdy</td>
</tr>
</tbody>
</table>
</div>

Bootstrap3.0中有哪些表格

看滾動條出現(xiàn)了額。

“Bootstrap3.0中有哪些表格”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網站，小編將為大家輸出更多高質量的實用文章！

當前標題：Bootstrap3.0中有哪些表格-創(chuàng)新互聯(lián)
URL地址：http://muchs.cn/article2/djgpoc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供全網營銷推廣、關鍵詞優(yōu)化、網站設計、網頁設計公司、網站建設、網站排名

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容