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语句查询某表的所有字段及数据类型
SQL语句查询某表的所有字段及数据类型 SELECT name AS column_name , TYPE_NAME(system_type_id) AS column_type , max_leng ...
使用 jsoup 解析HTML
// 参考资料: // http://www.jb51.net/article/43485.htm @Test public void AnalysisHTMLByString() { String ...
Seq_file文件系统实例剖析
http://blog.chinaunix.net/uid-24432676-id-2607766.html 另 http://www.cnblogs.com/qq78292959/archive/2 ...
Altium Designer 出现错误提示(警告)adding items to hidden net GND/VCC
一般出现这个提示,不是错误. 可以取消net 网格标号这样就不会报这个警告了. 还可以设置规则,不让它报告. 点击确定,但是再次打开工程时有得警告这个错误了.我想,还是取消NET标注.
node js学习（一）
1.简介 JavaScript是一种运行在浏览器的脚本,它简单,轻巧,易于编辑,这种脚本通常用于浏览器的前端编程,但是一位开发者Ryan有一天发现这种前端式的脚本语言可以运行在服务器上的时候,一场席卷 ...
sql查询最大的见多了，查询第二的呢？？？
问题: 数据库中人表有三个属性,用户(编号,姓名,身高),查询出该身高排名第二的高度. 建表语句 create table users ( id ,) primary key, name ), he ...
System V IPC(2)-信号量
一.概述 System V信号量与System V消息队列不同.它不是用来在进程间传递数据.它主要 ...
ArrayList如何实现线程安全
一:使用synchronized关键字,这个大家应该都很熟悉了,不解释了: 二:使用Collections.synchronizedList();使用方法如下: 假如你创建的代码如下:List< ...
jmeter 和 ajax
https://bitbucket.org/blazemeter/ajax-sampler/downloads/blazemeter-ajax-sampler-1.0-SNAPSHOT.jar 下载一 ...
SQL2012连接字符串
安装了sqlserver2012数据库,测试一包代码,搜索网上的方法,死活连接不上,最后偶然测试通过,居然是连接字符串的问题. “如果开发软件的时候是在局域网或者是在本机,并且数据库不在远程计算机上面 ...

Bootstrap系列 -- 9. 表格

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

随机推荐

热门专题