zoukankan      html  css  js  c++  java
  • Bootstrap关于表格

    1.Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。

     ☑  .table:基础表格

      ☑  .table-striped:斑马线表格

      ☑  .table-bordered:带边框的表格

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

      ☑  .table-condensed:紧凑型表格

      ☑  .table-responsive:响应式表格

    2.Bootstrap还为表格的行元素<tr>提供了五种不同的类名,每种类名控制了行的不同背景颜色,具体说明如下表所示:

    .active 表示当前活动的信息

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

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

    .warning 表示警告,需要特别注意

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

    3.有时候为了让表格更具阅读性,需要将表格制作成类似于斑马线的效果。简单点说就是让表格带有背景条纹效果。在Bootstrap中实现这种表

    格效果并不困难,只需要在<table class="table">的基础上增加类名“.table-striped”即可.

    4.基础表格仅让表格部分地方有边框,但有时候需要整个表格具有边框效果。Bootstrap出于实际运用,也考虑这种表格效果,即所有单元格具有一条1px的边框。 Bootstrap中带边框的表格使用方法和斑马线表格的使用方法类似,只需要在基础表格<table class="table">基础上添加一个“.table-bordered”类名即可

    5. 表格--鼠标悬浮高亮的表格:当鼠标悬停在表格的行上面有一个高亮的背景色,这样的表格让人看起来就是舒服,时刻告诉用户正在阅读表格哪一行的数据。Bootstrap的确没有让你失望,他也考虑到这种效果,其提供了一个“.table-hover”类名来实现这种表格效果。

    6. 表格--紧凑型表格:要实现紧凑型表格只需要重置表格单元格的内距padding的值。那么在Bootstrap中,通过类名“table-condensed”重置

    了单元格内距值。

    7. 表格--响应式表格:Bootstrap中响应式表格效果表现为:当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失。设置类名“.table-responsive”。

  • 相关阅读:
    workerman需要的php模块posix、pcntl、sysvshm、sysvmsg缺少,怎么办
    Linux操作:
    推荐!手把手教你使用Git
    Ninject简介(转)
    新年奉献MVC+EF(CODEFIRST)+EASYUI医药MIS系统(转)
    微软开源代码
    .NET分布式事务处理(转)
    IIS负载均衡(转)
    借助LVS+Keepalived实现负载均衡(转)
    WCF和ASP.NET Web API在应用上的选择(转)
  • 原文地址:https://www.cnblogs.com/agile2011/p/4101865.html
Copyright © 2011-2022 走看看