bootstrap表格

先來(lái)看一下表格的基本結(jié)構(gòu):

<table >
    <thead>
            <tr>
                    <th>學(xué)號(hào)</th>
                    <th>姓名</th>
            </tr>
    </thead>
    <tbody>
            <tr>
                    <td>1297263791</td>
                    <td>張三</td>
            </tr>
            <tr>
                    <td>1297263792</td>
                    <td>趙四</td>
            </tr>
    </tbody>
</table>
表格默認(rèn)樣式.png

一、常用標(biāo)簽

1、table標(biāo)簽包含整個(gè)表格
2、thead標(biāo)簽包含表格頭部
3、表格的每一排內(nèi)容使用tr標(biāo)簽
4、表格頭部的每個(gè)單元格使用th標(biāo)簽
5、tbody包含表格的主體
6、表格主體的每個(gè)單元格使用td標(biāo)簽

二、常用類

1.table標(biāo)簽
1)加table類(為表格加基本樣式)

加table類后的表格.png

2)加table table-striped類(在基本表格基礎(chǔ)上給表格加條紋)
加table table-striped類后的條紋表格.png

3)加table table-bordered類(在基本表格基礎(chǔ)上給表格加邊框)
加table table-bordered類后的邊框表格.png

4)加table table-condensed類(在基本表格基礎(chǔ)上縮小表格內(nèi)邊距)
加table table-condensed類后的壓縮表格.png

以上的類還可以根據(jù)樣式需要,搭配使用。
例如:加table table-striped table-bordered table-condensed 類

加table table-striped table-bordered table-condensed 類后的表格.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容