zoukankan      html  css  js  c++  java
  • bootstrap-6

    表格: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,表格底部水平滚动条就会消失。

  • 相关阅读:
    简单测试AF3.0.4
    好玩的Mac键盘
    黑盒测试和白盒测试
    iOS开发之原生二维码生成与扫描
    Swift
    JavaScript null and undefined
    java防止表单重复提交
    Java http post
    Redhat 6.5 x64 下载地址
    Spring 官方下载地址(非Maven)
  • 原文地址:https://www.cnblogs.com/jodie-blog/p/5026565.html
Copyright © 2011-2022 走看看