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

  • 相关阅读:
    友盟上报 IOS
    UTF8编码
    Hill加密算法
    Base64编码
    Logistic Regression 算法向量化实现及心得
    152. Maximum Product Subarray(中等, 神奇的 swap)
    216. Combination Sum III(medium, backtrack, 本类问题做的最快的一次)
    77. Combinations(medium, backtrack, 重要, 弄了1小时)
    47. Permutations II(medium, backtrack, 重要, 条件较难思考)
    3.5 find() 判断是否存在某元素
  • 原文地址:https://www.cnblogs.com/jodie-blog/p/5026565.html
Copyright © 2011-2022 走看看