JS组件引导表布局的详细说明

Bootstrap为创建表提供了清晰的布局。下表列出了Bootstrap支持的一些表元素：

表格类别表格中可以使用以下表格样式：

Tr、th和td类下表中的类可用于表格的行或单元格：

基本表如果您想要一个只有填充和水平划分的基本表，请添加类。表，如下例所示：

div class=' row ' table class=' table ' caption class=' text-center '基本表格布局/标题和第几个/第几个城市/第几个/第几个/第几个/第几个t body tr tdno . 1/TD TD TD Beijing/TD/tr tdno . 2/TD TD TD Shanghai/TD/tr/t body/table。

除了基本的表格标签和。表类，有一些可选的表类可以用来定义标签的样式。下面将向您介绍这些课程。

表通过添加。table-stripped类，您将在tbody中的行上看到条带，如下例所示：

class=' row ' table class=' table table-striped ' caption class=' text-center ' striped table layout/caption and tr th number/th city/th/tr/the d t body tr tdno . 1/Td Beijing/Td/tr tdno . 2/Td Td Shanghai/Td/tr tdno . 3/Td Td Suzhou/Td/tr tdno . 4/Td Td Nanjing/Td/tr/t body/table/div显示效果：

通过添加。类添加到表格中，您会看到每个元素周围都有一个边框，并且整个表格都是圆形的，如下例所示：

class=' row ' table class=' table table-bordered ' caption class=' text-center ' border table layout/caption and tr th number/th city/th/tr/the and t body tr tdno . 1/Td Beijing/Td/tr tdno . 2/Td Td Shanghai/Td/tr tdno . 3/Td Td Suzhou/Td/tr tdno . 4/Td Td Nanjing/Td/tr/t body/table/div显示效果：

通过添加悬停表。table-hover类，当指针悬停在一行上时，将出现浅灰色背景，如下例所示：

class=' row ' table class=' table table-hover ' caption class=' text-center ' hover table layout/caption and tr th number/th city/th/tr/the ad t body tr tdno . 1/TDT Beijing/Td/tr tdno . 2/Td Td Shanghai/Td/tr tdno . 3/Td Td Td Suzhou/Td/tr tdno . 4/Td Td Nanjing/Td/tr/t body/table/div显示效果：

为了简化表格，添加。table-condensed类，行中的填充被切成两半，使表看起来更紧凑，如下例所示。当您想要使信息看起来更紧凑时，这非常有用。

class=' row ' table class=' table table-condential ' caption class=' text-center '精简表格布局/标题和第几个/第几个城市/第几个/第几个/第几个t body tr TDno . 1/Td Beijing/Td/tr TDno . 2/Td Td Shanghai/Td/tr TDno . 3/Td Td苏州/Td/tr TDno . 4/Td Td南京/td /tr /tbody /table/div显示效果：

上下文类下表中列出的上下文类允许您更改表格行或单个单元格的背景颜色。

这些类可用于tr、td和th，如下例所示：

div class=' row ' table class=' table ' caption class=' text-center ' context table layout/caption and tr th number/th city/th/tr/the ad t body tr class=' active ' tdno . 1/Tdbbeijing/TD/tr class=' success ' tdno . 2/TD tdshanghai/TD/tr tr class=' warning ' tdno . 3/TDtd苏州/TD/tr tr tr tr class=' dancertain ' tdno . 4/TDtd南京/td /tr /tbody /table /div显示效果：

任意包装的响应形式。进来吧。表响应类，可以使表水平滚动以适应小设备(小于768px)。当在大于768px宽的大设备上查看时，您将看不到任何差异。

div=' table-responsive ' table class=' table ' caption class=' text-center ' responsive table布局/标题和第几个/第几个城市/第几个/第几个/第几个t body tr tdno . 1/Td Beijing/Td/tr tdno . 2/Td Td Shanghai/Td/tr tdno . 3/Td Td苏州/Td/tr tdno . 4/Td Td南京/td /tr /tbody /table /div显示效果：

如果你想继续学习，可以点击这里学习，然后附上一个精彩的话题：自举学习教程。

这是本文的全部内容，希望能帮助大家更好地学习JS表组件神器bootstrap表。