bootstrap中,可用“.table-striped”表格類實(shí)現(xiàn)隔行變色,該表格類用于在tbody標(biāo)簽內(nèi)將奇數(shù)行的背景設(shè)為灰色,只需要給表格元素添加“class=\”table table-striped\””樣式即可。
本教程操作環(huán)境:windows7系統(tǒng)、bootsrap3.3.7版、dell g3電腦
bootstrap什么可以實(shí)現(xiàn)隔行變色
通過添加 .table-striped class,將在 <tbody> 內(nèi)的行上看到條紋。
可用“.table-striped”表格類實(shí)現(xiàn)隔行變色,只需要給表格元素添加“class=\”table table-striped\””樣式即可。
示例如下:
<html><head><meta charset=\”utf-8\”> <title>bootstrap 實(shí)例 – 條紋表格</title><link rel=\”stylesheet\” href=\”https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css\”> <script src=\”https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js\”></script><script src=\”https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js\”></script></head><body><table class=\”table table-striped\”><caption>條紋表格布局</caption><thead><tr><th>名稱</th><th>城市</th><th>郵編</th></tr></thead><tbody><tr><td>tanmay</td><td>bangalore</td><td>560001</td></tr><tr><td>sachin</td><td>mumbai</td><td>400003</td></tr><tr><td>uma</td><td>pune</td><td>411027</td></tr></tbody></table></body></html>
輸出結(jié)果:
推薦學(xué)習(xí):《bootstrap使用教程》