當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）

發(fā)布時間：2023/12/31 HTML 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

? ? ? ?在網(wǎng)頁制作中，通常會用到表格的鼠標懸停、隔行變色等功能。Bootstrap中提供了一系列表格布局樣式，利用該樣式可以幫助開發(fā)者快速開發(fā)出美觀的表格，作用于<table>元素的表格樣式如下表所示。

上表中，.table是表格的一個基類，如果想要加其他的樣式，都要在.table的基礎(chǔ)上去添加。表內(nèi)的樣式可以組合使用，多個樣式之間只需使用空格隔開即可，并且都支持.table-dark樣式，適用于反轉(zhuǎn)色調(diào)。

Bootstrap對表格進行了優(yōu)化，通過給<table>元素應(yīng)用.table類樣式便可以得到一個優(yōu)化的基本的表
格。

1.基本實例
例:給<table>添加.table類樣式，顯示優(yōu)化后的表格。

結(jié)果圖：

2.表頭選項

?例:給表頭<thead>添加.thead-light類樣式示例。

?結(jié)果圖：

3.條紋狀表格

例:給<table>添加.table-striped類樣式示例。

結(jié)果圖：

4.帶邊框的表格

例：給<table>元素添加.table-bordered類樣式。

?結(jié)果圖：

5.無邊框的表格

例：給<table>元素添加.table-boardeless類樣式。

?結(jié)果圖：

?6.鼠標指針懸停

例：給<table>元素添加.table-hover類樣式示例。

結(jié)果圖：

7.緊湊表格

例：給<table>元素添加.table-sm類樣式。

?結(jié)果圖：

8.狀態(tài)類

? ? ? ?Bootstrap為表格提供了多種狀態(tài)的樣式類，這些狀態(tài)類的主要作用是為表格中的行或單元格設(shè)置不同的背景顏色。
? ? ? ?狀態(tài)類設(shè)置的是<tr>、<td>或<th>元素樣式，使用.table-*來設(shè)置，可選值包括success、active、primary、secondary、danger、warning、info、light、dark等，同時狀態(tài)類也適用于反轉(zhuǎn)色調(diào)。

例：表格背景顏色示例。

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><table class="table"><thead><tr><th scope="col">序號</th><th scope="col">學(xué)號</th><th scope="col">姓名</th><th scope="col">專業(yè)</th><th scope="col">課程</th></tr></thead><tbody><tr class="table-success"><th scope="row">1</th><td>21090401001</td><td>李莉</td><td>計算機科學(xué)與技術(shù)</td><td>操作系統(tǒng)</td></tr><tr class="table-active"><th scope="row">2</th><td>21090401002</td><td>張雷</td><td>計算機科學(xué)與技術(shù)</td><td>操作系統(tǒng)</td></tr><tr class="table-primary"><th scope="row">3</th><td>21090401003</td><td>周冰</td><td>計算機科學(xué)與技術(shù)</td><td>操作系統(tǒng)</td></tr><tr class="table-warning"><th scope="row">4</th><td>21090401004</td><td>王穗</td><td>計算機科學(xué)與技術(shù)</td><td>操作系統(tǒng)</td></tr><tr class="table-danger"><th scope="row">5</th><td>21090401005</td><td>周利</td><td>計算機科學(xué)與技術(shù)</td><td>操作系統(tǒng)</td></tr><tr class="table-info"><th scope="row">6</th><td>21090401006</td><td>何琪</td><td>計算機科學(xué)與技術(shù)</td><td>操作系統(tǒng)</td></tr><tr class="table-secondary"><th scope="row">7</th><td>21090401007</td><td>付偉</td><td>計算機科學(xué)與技術(shù)</td><td>操作系統(tǒng)</td></tr></tbody></table></div></body> </html>

結(jié)果圖：

?9.響應(yīng)式表格

? ? ? ?通過把任意的table包裝在.table-responsive類內(nèi)，可以創(chuàng)建響應(yīng)式表格。即當表格水平溢出時出現(xiàn)水平滾動條。

例：

?結(jié)果圖：

小屏幕效果：

大屏幕效果：

總結(jié)

以上是生活随笔為你收集整理的Bootstrap——表格（基本实例、表头选项、条纹状表格、带边框的表格、无边框的表格、鼠标指针悬停、紧凑表格、状态类、响应式表格）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： MATLAB实现传递函数
下一篇： MSP430驱动DDS模块AD9851