bootstrap-6

时间:2022-01-24 03:31:24

表格:bootstrap为表格提供了1种基础样式和4种附加样式以及一个支持响应式的表格。主要包括:

  .table:基础表格

  .table-striped:斑马线表格

  .table-bordered:带边框的表格

  .table-hover:鼠标悬停高亮的表格

  .table-condensed:紧凑型表格

  .table-responsive:响应式表格

表格行的类:bootstrap还为表格行元素tr提供了五种不同的类名,每种类名控制了行的不同背景颜色:

  .active:表示当前活动的颜色,#f5f5f5;

  .success:表示成功或者正确的行为

  .info:表示中立的信息或者行为

  .warning:表示警告,需要特别提醒

  .danger:表示危险或者可能是错误的行为

  注意:除了.active之外,其他的四种类型和".table-hover"配合使用时,Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置,所以如果需要的tr元素添加其他颜色的样式时,在.table-hover表格中也要做相应的调整。

  要实现悬浮状态,需要在table标签上加上.table-hover类。

表格----基础表格:

  在bootstrap中,对于基础表格是通过类名.table来控制,.table主要有三个作用:

  1.给表格设置margin-bottom:20px以及设置单元内距

  2.在thead底部设置了一个2px的浅灰色实线

  3.每个单元格顶部设置了一个1px的浅灰色实线 

表格----斑马线表格

  斑马线表哥就是让表格带有背景条纹效果,在bootstrap中实现这种表格效果并不困难,只需要在<table class="table">的基础上增加类名".table-striped"即可。

  其效果与基础表格相比,仅仅是在tbody隔行有一个浅灰色的背景色。

表格---带边框的表格:

  即所有的单元格具有一条1px的边框。只需要在<table class="table">基础上添加一个.table-bordered

表格----鼠标悬浮在高亮的表格

  当鼠标悬停在表格的行上面有一个高亮的背景色,这样的表格让人看起来就是舒服,只要在<table class="table">添加类名.table-hover即可,

  其效果就是当你鼠标悬停在某一个单元格上是,单元格所在的行的背景色都虎变成浅灰色。

表格----紧凑型表格:

  就是单元格内距或者内距较其他表格的内距更小。只需要在<table class="table">中添加了table-condensed

  注意:大家在使用bootstrap表格时,千万注意,<table>元素中一定不能缺少类名table

表格----响应式表格:

  只需要在<table class="table">中添加.table-responsive,此容器就是响应式容器,当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条,当你的浏览器可视区域大于768px,表格底部水平滚动条就会消失。

相关文章