zoukankan      html  css  js  c++  java
  • Bootstrap学习笔记系列2-------Bootstrap简单表格处理

    标签

    • <table> 为表格添加基础样式
    • <thead> 表格标题行的容器元素,用来识别列
    • <tbody> 表格主提中的表格行的容器元素
    • <tr> 单行的容器元素,用来存放
    • <th> 在中使用,用来存放列名单元格
    • <td> 表数据单元格
    • <caption> 关于表格存储内容的描述或者总结

    应用于表格样式的类(全部都是在中添加)
    • .table 为表格添加基本的样式(只有横向的分隔线)
    • .table-striped 形成斑马纹
    • .table-bordered 为所有的单元格添加边框
    • .table-hover<tbody>内鼠标悬停会赋予该行不同的颜色
    • .table-condensed 让表格变得更紧凑

    <tr>,<th><td>类样式

    • .active 将表示悬停的颜色用在目标的行或者单元格上
    • .success 表示成功的操作(绿色)
    • .info 表示信息变化的操作(蓝色)
    • .warning 表示一个警告的操作(黄色)
    • .danger表示一个危险的操作(红色)

    响应式表格

    通过把任意的.table包括在.table-responsive内,就可以通过水平滚动条来兼容小型的设备(小于768px),在其他类型的设备上看则不会有区别。

    <div class= "table-responsive ">
          <table class="table">
                ...
          </table>
    </div>
    
  • 相关阅读:
    数组对象---数据存储
    运行vue项目时,无法自动打开页面怎么办?
    数组扁平化
    数组去重
    CSS-----------text-transform
    CSS3-----width:max-content,min-content和fit_content属性
    可迭代对象
    bit和byte的 区别?
    前端常见跨域问题?
    HackerRank "Lucky Numbers"
  • 原文地址:https://www.cnblogs.com/MaFeng0213/p/6057654.html
Copyright © 2011-2022 走看看