一. 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. 表格的更多相关文章

  1. Bootstrap &lt;基础五&gt;表格

    Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. <thead> 表格 ...

  2. 【Bootstrap】 bootstrap-table表格组件

    [Bootstrap-table] 顾名思义,这个组件专注于bootstrap风格的表格的设计,并且提供了很多表格的基础和进阶的功能,给我们开发前端的表格省下很多力气. 本文主要参考这位博主的系列文章 ...

  3. ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

  4. Bootstrap系列 -- 10. 网格布局

    一. 实现原理 网格布局是通过容器的大小,平均分为12份(可以修改),再调整内外边距,和表格布局有点类似但是也存在区别. 实现步骤如下: (1) 数据行.row 必须包含在容器.container 中 ...

  5. Bootstrap系列 -- 41. 带表单的导航条

    有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个“navbar-form”,使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单.navbar-left”让 ...

  6. Bootstrap系列 -- 39. 导航条添加标题

    在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来 ...

  7. 一步一步学习Bootstrap系列--表单布局

    前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳 ...

  8. Bootstrap系列 -- 1. 如何使用Bootstrap

    一. Bootstrap 简介 Bootstrap 是一个前端框架,使用Bootstrap可以做出很多漂亮的页面,中文官网:http://www.bootcss.com/ 二. Bootstrap核心 ...

  9. Bootstrap系列 -- 2. 标题

    一. Bootstrap标题 在Bootstrap中使用标题和Html本身没有太大的区别使用h1-h6, 而Bootstrap只是默认修改了H1-h6的样式,网上找到如下资料参考 二. Bootstr ...

随机推荐

  1. Android Ormlite 学习笔记1 -- 基础

    Ormlite 是一个开源Java数据实体映射框架.其中依赖2个核心类库: 1.ormlite-android-4.48.jar 2.ormlite-core-4.48.jar 新建项目,引用上面2个 ...

  2. Python3.5 Day1作业:实现用户密码登录,输错三次锁定。

    作业需求: 1.输入用户名密码 2.认证成功后显示欢迎信息 3.输错三次后锁定 实现思路: 1.判断用户是否在黑名单,如果在黑名单提示账号锁定. 2.判断用户是否存在,如果不存在提示账号不存在. 3. ...

  3. Redis 连接问题

    .NET 中使用 StackExchange.Redis 我为什么想写这个,总感觉很多介绍相应技术的博客,只是把内容从官网搬到自己的博客中,没有任何的实践,这样会给想学的人,没有任何好处,也可能我是自 ...

  4. 关于js性能

    1,声明变量要赋初值2,尽量避免声明全局变量,可以减少与系统的重名3,当编写大量js代码时,难免会遇到命名冲突,这是可以通过模拟命名空间方式     来避免冲突4,尽量避免使用全局变量,搜索全局变量是 ...

  5. Adobe CS6 全系列官方下载地址 (迅雷无效) Win Mac

    https://helpx.adobe.com/x-productkb/policy-pricing/cs6-product-downloads.html CS6 Design & Web P ...

  6. Android 之计算控件颜色透明度

    Android 之计算控件颜色透明度 1.UI会给一个数值,例如:#EFE000,透明度30% 2.用255乘以30%等于76.5,然后四舍五入等于77 3.用计算器将十进制的77转成十六进制的数据为 ...

  7. IE6 IE7 不支持 JSON

    最近发现ie6.7不支持json,解决方法:引入json2.js     <script type="text/javascript" src="json2.js& ...

  8. java将数组中的零放到末尾

    package com.shb.java; /** * 将数组中的0放到数组的后边,然后原来的非零数的顺序不改变 * @author BIN * */ public class Demo2{ publ ...

  9. 关于【bootstrap】中,【tooltip】的不算bug的bug的个人看法

    先说下遇到这个问题的背景吧. 就是在页面中有个div,这个div右上角(或者其他位置)有个 × 的图标(这个图标添加tooltip工具提示),光标移到这个图标时,触发tooltip,提示“点击移除”这 ...

  10. 最短路径之Dijkstra算法及实例分析

    Dijkstra算法迪科斯彻算法 Dijkstra算法描述为:假设用带权邻接矩阵来表示带权有向图.首先引进一个辅助向量D,它的每个分量D[i]表示当前所找到的从始点v到每个终点Vi的最短路径.它的初始 ...