Bootstrap系列 -- 9. 表格

一. Bootstrap 表格样式支持

　　Bootstrap提供了六种不同风格的样式支持,其中一个基础样式，4个附件样式,1个响应式设计样式

　　1. .table：基础表格

　　2. .table-striped：斑马线表格

　　3. .table-bordered：带边框的表格

　　4. .table-hover：鼠标悬停高亮的表格

　　5. .table-condensed：紧凑型表格

　　6. .table-responsive：响应式表格

二. Bootstrap 行样式

<table class="table table-bordered">

  <thead>

    <tr>

      <th>类名</th>

      <th>描述</th>

    </tr>

  </thead>

  <tbody>

    <tr class="active">

      <td>.active</td>

      <td>表示当前活动的信息</td>

    </tr>

    <tr class="success">

      <td>.success</td>

      <td>表示成功或者正确的行为</td>

    </tr>

    <tr class="info">

      <td>.info</td>

      <td>表示中立的信息或行为</td>

    </tr>

    <tr class="warning">

      <td>.warning</td>

      <td>表示警告，需要特别注意</td>

    </tr>

    <tr class="danger">

      <td>.danger</td>

      <td>表示危险或者可能是错误的行为</td>

    </tr>

  </tbody>

行样式代码显示

　　其实现效果如下：

三. 基础表格样式

<table class="table">

        <thead>

            <tr>

                <th>表格标题</th>

                <th>表格标题</th>

                <th>表格标题</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

        </tbody>

    </table>

基础表格样式

四. 斑马线表格

<table class="table table-striped">

        <thead>

            <tr>

                <th>表格标题</th>

                <th>表格标题</th>

                <th>表格标题</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

        </tbody>

    </table>

斑马线表格样式

五. 带边框表格

<table class="table table-bordered">

        <thead>

            <tr>

                <th>表格标题</th>

                <th>表格标题</th>

                <th>表格标题</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

        </tbody>

    </table>

带边框表格样式

六. 鼠标浮动样式

<table class="table table-bordered table-hover">

        <thead>

            <tr>

                <th>表格标题</th>

                <th>表格标题</th>

                <th>表格标题</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

        </tbody>

    </table>

鼠标浮动样式

七. 紧凑型样式

<table class="table table-condensed table-hover">

        <thead>

            <tr>

                <th>表格标题</th>

                <th>表格标题</th>

                <th>表格标题</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

            <tr>

                <td>表格单元格</td>

                <td>表格单元格</td>

                <td>表格单元格</td>

            </tr>

        </tbody>

    </table>

紧凑型表格样式

八. 响应式表格样式

<div class="table-responsive">

        <table class="table table-condensed table-hover">

            <thead>

                <tr>

                    <th>表格标题</th>

                    <th>表格标题</th>

                    <th>表格标题</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                </tr>

                <tr>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                </tr>

                <tr>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                </tr>

                <tr>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                </tr>

                <tr>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                </tr>

                <tr>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                    <td>表格单元格</td>

                </tr>

            </tbody>

        </table>

    </div>

响应式样式

　　这个有点小小的区别，这个响应式样式是在外面嵌套了一个div,单屏幕分辨率较小的时候会出现滚动条

Bootstrap系列 -- 9. 表格的更多相关文章

Bootstrap <基础五>表格
Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签描述 <table> 为表格添加基础样式. <thead> 表格 ...
【Bootstrap】 bootstrap-table表格组件
[Bootstrap-table] 顾名思义,这个组件专注于bootstrap风格的表格的设计,并且提供了很多表格的基础和进阶的功能,给我们开发前端的表格省下很多力气. 本文主要参考这位博主的系列文章 ...
反爬虫：利用ASP.NET MVC的Filter和缓存（入坑出坑） C#中缓存的使用 C#操作redis WPF 控件库——可拖动选项卡的TabControl 【Bootstrap系列】详解Bootstrap-table AutoFac event 和delegate的分别常见的异步方式async 和 await C# Task用法 c#源码的执行过程
反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑) 背景介绍: 为了平衡社区成员的贡献和索取,一起帮引入了帮帮币.当用户积分(帮帮点)达到一定数额之后,就会“掉落”一定数量的“帮帮 ...
ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件
阅读目录 Bootstrap 导航条列表组徽章媒体对象页头路径导航分页输入框组按钮式下拉菜单警告框进度条小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...
bootstrap中给表格设置display之后表格宽度变小问题解决
问题描述:bootstrap中给表格设置display之后表格宽度变小了解决方案:给表格加上 display:table样式就可以了.
Bootstrap 响应式表格
响应式表格通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px).当在大于 768px 宽的大型设备上查看时,您 ...
Bootstrap系列 -- 10. 网格布局
一. 实现原理网格布局是通过容器的大小,平均分为12份(可以修改),再调整内外边距,和表格布局有点类似但是也存在区别. 实现步骤如下: (1) 数据行.row 必须包含在容器.container 中 ...
Bootstrap系列 -- 41. 带表单的导航条
有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个“navbar-form”,使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单.navbar-left”让 ...
Bootstrap系列 -- 39. 导航条添加标题
在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来 ...

随机推荐

SQL Server：数据库角色
除了上述固定数据库角色之外,还有一种特殊的固定数据库角色,名为public. 数据库的每个合法用户都必须属于public角色,它为数据库中的用户提供了所有默认权限. 一般情况下,public角色允许用 ...
Cloudera5.8.3:Flume+Morphline+Solr开发小技巧
1.Flume和Morphline添加日志打印 log4j.logger.org.apache.flume.sink.solr=DEBUG log4j.logger.org.kitesdk.morph ...
将一列包含多个ID拆分多行
看到个不常见的问题~然后在 Inner Sql Server2008 里面找到一个思路. 如果下面的表结构,如何拆分多行并对应员工号呢? 首先创建测试表 CREATE TABLE Department ...
IIS7配置PHP图解(转)
IIS7+PHP_5.2.17 于之前安装IIS的时候已经选上了isapi扩展和isapi筛选,这里就不用另外再添加角色服务了,直接开始先修改php.ini文件.. 把c:\php下的php.ini ...
HBase应用开发回顾与总结系列之二：RowKey行键设计规范
2. RowKey行键设计规范 2.1. RowKey四大特性 2.1.1 字符串类型虽然行键在HBase中是以byte[]字节数组的形式存储的,但是建议在系统开发过程中将其数据类型设置为Strin ...
spring多数据源的处理 mybatis实现跨库查询
实现Myibatis动态sql跨数据库的处理 Spring动态配置多数据源,即在大型应用中对数据进行切分,并且采用多个数据库实例进行管理,这样可以有效提高系统的水平伸缩性.而这样的方案就会不同于常见 ...
模块module
python中的Module相当于C++中头文件和命名空间的组合体,便于代码的组织,任何一个python代码的文件都是一个Module,都可以被其他模块import import,from...imp ...
Debian deb源方法升级PHP软件包
学习Linxu以来,一直坚持编译方式安装软件包,貌似圈子里面也是都倾向于编译,可是搜索到的编译方法都是一堆复制粘贴来的指令, 每个人都这么编译, 却几乎没有人去写明那些五花八门的编译指令代表了什么,是 ...
KEIL MDK STM32如何建立工程
2. 3 4 5 6 7 QQ 463431476 8 9
设置SecureCRT配色和解决乱码问题
SecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序,简单的说是Windows下登录UNIX或Linux服务器主机的软件. 一.配色第一步: Options => Sessi ...

Bootstrap系列 -- 9. 表格

Bootstrap系列 -- 9. 表格的更多相关文章

随机推荐

热门专题