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

随机推荐

.NET框架设计(高级框架架构模式)—钝化程序、逻辑冻结、冻结程序的延续、瞬间转移
阅读目录: 1.开篇介绍 2.程序书签(代码书签机制) 2.1ProgramBookmark 实现(使用委托来锚点代码书签) 2.2ProgramBookmarkManager书签管理器(对象化书签集 ...
activiti入门
一.Activiti简介 Activiti 是一个针对商务人士. 开发人员和系统管理员的轻量级的工作流和业务流程管理 (BPM) 平台.它的核心是Java的高速和可靠的 BPMN 2 流程引擎.它是开 ...
centos 安装maven
1.环境: 操作系统:centos7 maven:apache-maven-3.3.9-bin.tar.gz 2.安装JDK(1.7) 3.安装maven mkdir -p /opt/usr/loca ...
无法连接到WMI提供程序三种解决办法
无法连接到WMI 提供程序请注意,你只能使用SQL Server 配置管理器来管理SQL Server 2005服务器.找不到指定的模块.[0x8007007e] 解决方案1: 检查一下 windo ...
scalac error: bad option: '-make:transitive' on mvn package via command line
1 问题描述: ubuntu环境下用eclipse+maven开发Scala的时候出现错误:scalac error: bad option: '-make:transitive' on mvn pa ...
ELF Format 笔记（六）—— 字符串表
ilocker:关注 Android 安全(新入行,0基础) QQ: 2597294287 字符串表中包含若干以 null 结尾的字符串,这些字符串通常是 symbol 或 section 的名字.当 ...
ELF Format 笔记（七）—— 符号表
最是那一低头的温柔,像一朵水莲花不胜凉风的娇羞,道一声珍重,道一声珍重,那一声珍重里有蜜甜的忧愁 —— 徐志摩 ilocker:关注 Android 安全(新手) QQ: 2597294287 符号表 ...
Sql server2012连接Sql server 2008时出现的问题：已成功与服务器建立连接，但在登陆过程中发生错误。（provider:SSL Provider,error:0-接收到的消息异常，或格式不正确。）
以前连接是正常的,就这两天连不上了.(没有耐心的直接看末尾解决办法) 错误消息如下: 1.尝试读取或写入受保护的内存.这通常指示其他内存已损坏.(System.Data) 2.已成功与服务器建立连接, ...
网格弹簧质点系统模拟（Spring-Mass System by Euler Integration）
弹簧质点模型是利用牛顿运动定律来模拟物体变形的方法.如下图所示,该模型是一个由m×n个虚拟质点组成的网格,质点之间用无质量的.自然长度不为零的弹簧连接.其连接关系有以下三种: 1.连接质点[i, j] ...
洛谷P1538迎春舞会之数字舞蹈
题目背景 HNSDFZ的同学们为了庆祝春节,准备排练一场舞会. 题目描述在越来越讲究合作的时代,人们注意的更多的不是个人物的舞姿,而是集体的排列. 为了配合每年的倒计时,同学们决定排出——“数字舞蹈 ...

Bootstrap系列 -- 9. 表格

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

随机推荐

热门专题