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

随机推荐

编写Java应用程序。首先，定义一个Print类，它有一个方法void output(int x)，如果x的值是1，在控制台打印出大写的英文字母表；如果x的值是2，在控制台打印出小写的英文字母表。其次，再定义一个主类——TestClass，在主类的main方法中创建Print类的对象，使用这个对象调用方法output ()来打印出大小写英文字母表。
package zuoye; public class print1 { String a="abcdefghigklmnopqrstuvwxyz"; String B=" ...
Activiti之 Exclusive Gateway
一.Exclusive Gateway Exclusive Gateway(也称为XOR网关或更多技术基于数据的排他网关)经常用做决定流程的流转方向.当流程到达该网关的时候,所有的流出序列流到按照已定 ...
烂泥：更换ESXI5.0管理网卡及管理IP地址
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 公司的服务器基本上都是在IDC机房里面的,为了更有效的利用服务器性能.所以有几台服务器,安装的是ESXI5.0做成虚拟化. 注意目前这些服务器都是双网卡 ...
中科院分词ICTCLAS5.0_JNI 使用方法
1.简介中国科学院计算技术研究所在多年研究基础上,耗时一年研制出了基于多层隐码模型的汉语词法分析系统 ICTCLAS(Institute of Computing Technology, Chine ...
MMORPG大型游戏设计与开发（客户端架构 part11 of vegine）
从早年的无声电影到现在的逼真3D大片,人类在科技上可谓是一再突破.不知道有没有人经历过那无声的日子,没有声音的世界,咱们的耳朵也就失去了它本有的用途了.在游戏世界中,声音元素成了必不可少的一部分,一个 ...
hdu-5127------hdu5137
hdu-5127 思路: 本来正解好像是动态凸包,暴力10000+ms可以搞过去; hdu-5128 思路: 枚举两个长方形的对角线,然后判断是否不相交,更新答案就好; hdu-5130 思路: 将题 ...
XBOX ONE游戏开发常见问题
XBOX ONE游戏开发常见问题终于弄懂这个在Unity的sdk在Account Picker切换账号的机制了,一个手柄注册一个账号,在游戏里面的时候,只有另外一个手柄选择自己的账号,系统的Acti ...
ThreadLocal用法和实现原理
如果你定义了一个单实例的java bean,它有若干属性,但是有一个属性不是线程安全的,比如说HashMap.并且碰巧你并不需要在不同的线程中共享这个属性,也就是说这个属性不存在跨线程的意义.那么你不 ...
LFI漏洞利用总结
主要涉及到的函数 include(),require().include_once(),require_once() magic_quotes_gpc().allow_url_fopen().allo ...
将pdf文件通过itunes直接拖到ipad的ibooks里面
开始不太清楚进行过什么设置,使得以前可以直接通过拖动的方式复制pdf文件到ipad里面的方法不管用了.在帖子http://bbs.weiphone.com/read-htm-tid-864091-pa ...

Bootstrap系列 -- 9. 表格

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

随机推荐

热门专题