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”来 ...

随机推荐

【JSP】JSP基础学习记录（三）—— JSP的9个内置对象
本节说一下JSP中的9个内置对象.这9个内置对象都是Servlet API接口的实例,只是JSP规范对他们进行了默认初始化(由JSP页面对应Servlet的_jspService()方法来创建这些实例 ...
Oracle not in子连接查询不到值的问题（not in 不能查询null数据）
前几天在项目中,做数据导入时,发现not in和in 查出来的条数不互补.ATABLE2明明中有些记录在ATABLE3中不存在,但是not in时查不出记录. CREATE TABLE ATABLE2 ...
查询数据过多页面反应慢引入缓存解决方案（Redis、H2）
问题:原系统查询接口不支持分页也不可能加入分页支持,导致Ajax查询数据过多,返回数据达到2W多条记录时响应已经极慢,查询功能不要求数据实时性,页面反应速度极慢.体验不好:经排查是由于数据量过大导 ...
在Myeclipse中将maven程序部署到tomcat中
用新版的m2e插件就可以了,而且发布后修改jsp是不需要重新发布的.MyEclipse10.6自带新版m2e,只需在Run Configuration的Maven Build中new一个输入confi ...
Android setTag()/getTag()-（转）
(转自:http://www.cnblogs.com/topcoderliu/archive/2011/06/07/2074419.html) [自己经历:要getTag前提是要有setTag] se ...
[引] Security tips for web developers
Source :Security tips for web developers
使用Bootstrap v3.3.4注意细节box-sizing
一.bootstrap样式在Bootstrap v3.3.4中有下面一条重置样式: * { -webkit-box-sizing: border-box; -moz-box-sizing: bord ...
[c] base64
/ * Program: * base64 encode & decode * Author: * brant-ruan * Date: * 2016-02-29 * Usage: * Enc ...
POJ1276Cash Machine[多重背包可行性]
Cash Machine Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 32971 Accepted: 11950 De ...
第16章调色板管理器_16.4 一个DIB位图库的实现（1）
16.4.1自定义的 DIBSTRUCT结构体字段含义 PBYTE *ppRow ①指向位图视觉上最上面的一行像素.(不管是自下而上,还是自上而下) ②放在第一个字段,为的是后面定义宏时可方便访问 ...

Bootstrap系列 -- 9. 表格

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

随机推荐

热门专题