美文网首页
bootstrap表格

bootstrap表格

作者: 迷人的洋葱葱 | 来源:发表于2017-07-20 10:49 被阅读0次

先来看一下表格的基本结构:

<table >
    <thead>
            <tr>
                    <th>学号</th>
                    <th>姓名</th>
            </tr>
    </thead>
    <tbody>
            <tr>
                    <td>1297263791</td>
                    <td>张三</td>
            </tr>
            <tr>
                    <td>1297263792</td>
                    <td>赵四</td>
            </tr>
    </tbody>
</table>
表格默认样式.png

一、常用标签

1、table标签包含整个表格
2、thead标签包含表格头部
3、表格的每一排内容使用tr标签
4、表格头部的每个单元格使用th标签
5、tbody包含表格的主体
6、表格主体的每个单元格使用td标签

二、常用类

1.table标签
1)加table类(为表格加基本样式)

加table类后的表格.png
2)加table table-striped类(在基本表格基础上给表格加条纹)
加table table-striped类后的条纹表格.png
3)加table table-bordered类(在基本表格基础上给表格加边框)
加table table-bordered类后的边框表格.png
4)加table table-condensed类(在基本表格基础上缩小表格内边距)
加table table-condensed类后的压缩表格.png
以上的类还可以根据样式需要,搭配使用。
例如:加table table-striped table-bordered table-condensed 类 加table table-striped table-bordered table-condensed 类后的表格.png

相关文章

  • 你可能会用到的Bootstarp 库

    1. 表格 Bootstrap Table 支持 Bootstrap 3 和 Bootstrap 2 自适应界面 ...

  • 2018-04-09

    1. 表格 Bootstrap Table 支持 Bootstrap 3 和 Bootstrap 2 自适应界面 ...

  • 我喜欢的页面插件

    BootStrap metisMenu (菜单树) bootstrap-table(表格) select2 (下拉...

  • Bootstrap - 排版4

    表格 表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个...

  • bootstrap表格

    先来看一下表格的基本结构: 一、常用标签 1、table标签包含整个表格2、thead标签包含表格头部3、表格的每...

  • Bootstrap - 表格

    Bootstrap中的表格 示例: 表格居中对齐:http://blog.csdn.net/win_turn/ar...

  • 初识Bootstrap-table表格简操作-2018.07.0

    重点:对于Bootstrap的理解,表格的掌握难点:Bootstrap命令的实际操作 Bootstrap简介 Bo...

  • Bootstrap学习笔记(3)--表格\表单\图片

    Bootstrap表格 表格类: .table只会在表行之间增加横线; .table-striped会在表格行...

  • bootstrap table 基本使用

    前言 bootstrap tabel是基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以...

  • 表格

    表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了一种基础样式和4种附加样式以及1个支持响...

网友评论

      本文标题:bootstrap表格

      本文链接:https://www.haomeiwen.com/subject/utilkxtx.html