主要属性：
　　全屏宽度带水平线的表格　　.table
　　带边框的表格　　　　　　　.table-bordered

　　条纹状表格　　　　　　　　.table-striped

　　悬停变色表格　　　　　　　.table-hover

　　紧凑风格表格　　　　　　　.table-condensed
<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>表格</title>

        <link rel="stylesheet" href="css/bootstrap.min.css" />

    </head>

    <body>

        <table class="table" table-striped table-hover>

            <thead>

                <tr class="danger">

                    <th>标题一</th>

                    <th>标题二</th>

                    <th>标题三</th>

                    <th>标题四</th>

                    <th>标题五</th>

                </tr>

            </thead>

            <tbody>

                <tr class="warning">

                    <td>内容一</td>

                    <td>内容二</td>

                    <td>内容三</td>

                    <td>内容四</td>

                    <td>内容五</td>

                </tr>

                <tr class="success">

                    <td>内容一</td>

                    <td>内容二</td>

                    <td>内容三</td>

                    <td>内容四</td>

                    <td>内容五</td>

                </tr>

                <tr class="active">

                    <td>内容一</td>

                    <td>内容二</td>

                    <td>内容三</td>

                    <td>内容四</td>

                    <td>内容五</td>

                </tr>

            </tbody>

        </table>

        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>

        <script type="text/javascript" src="js/bootstrap.min.js" ></script>

    </body>

</html>

源码

效果图片：

 

bootstrap学习笔记细化(表格)的更多相关文章

  1. bootstrap学习笔记细化(按钮)

    button:btn 圆角灰色按钮 button:btn btn-default 圆角灰色边框按钮 button:btn btn-success 绿色 button:btn btn-primary 蓝 ...

  2. bootstrap学习笔记细化(表单)

    主要属性: class="form-inline" 水平排列 class="form-group" 组键 form-control 圆角方框发光 input-l ...

  3. bootstrap学习笔记细化(标题)

    bootstrap中的排版: 标题(h1~h6/.h1~.h6) h1:36px;h2:30px;h3:24px;h4:18px;h5:14px;h6:12px; 副标题(small) 小练习(标题大 ...

  4. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  5. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  6. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  7. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  8. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  9. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

随机推荐

  1. iOS中生成随机的UUID

    + (NSString *)uuidString { CFUUIDRef uuid_ref = CFUUIDCreate(NULL); CFStringRef uuid_string_ref= CFU ...

  2. QuantLib 金融计算——基本组件之 InterestRate 类

    目录 QuantLib 金融计算--基本组件之 InterestRate 类 InterestRate 对象的构造 一些常用的成员函数 如果未做特别说明,文中的程序都是 Python3 代码. Qua ...

  3. QuantLib 金融计算——数学工具之优化器

    目录 QuantLib 金融计算--数学工具之优化器 概述 Optimizer Constraint OptimizationMethod EndCriteria 示例 Rosenbrock 问题 校 ...

  4. SQL Full Join 的 Where条件

    SQL需求是损益视图串资产负债视图 用Excel透视表模拟出来的结果就是 用SQL查询如下: 当Where条件是左边的视图的时候 select 损益视图.年 ,损益视图.年月 ,损益视图.期间 ,损益 ...

  5. BurpSuite系列----Extender模块(扩展器)

    一.简介 Burp在软件中提供了支持第三方拓展插件的功能,方便使用者编写自己的自定义插件或从插件商店中安装拓展插件.Burp扩展程序可以以多种方式支持自定义Burp的行为,例如:修改HTTP请求和响应 ...

  6. sparksql连接mysql

    1.方法1:分别将两张表中的数据加载为DataFrame /* * 方法1:分别将两张表中的数据加载为DataFrame * */ /* Map<String,String> option ...

  7. python的copy模块

    python的copy模块 概念 Python中的赋值语句不复制对象,它们在目标和对象之间建立索引,这就是浅复制.对于一些对象或者集合,我们有时需要一个副本,以便可以更改一个副本中的值而不改变其原对象 ...

  8. abp angular 前端权限控制

    import { AppComponentBase } from '@shared/app-component-base'; this.permission.isGranted(menuItem.pe ...

  9. 编写一个算法，将非负的十进制整数转换为其他进制的数输出，10及其以上的数字从‘A’开始的字母表示

    编写一个算法,将非负的十进制整数转换为其他进制的数输出,10及其以上的数字从‘A’开始的字母表示. 要求: 1) 采用顺序栈实现算法: 2)从键盘输入一个十进制的数,输出相应的八进制数和十六进制数. ...

  10. 部署一个flask服务记录

    最近使用flask写了一些简单的服务. 服务部署到服务器上进行使用,这个过程会有一些问题,需要进行记录一下. 说明运行的环境情况.使用的是python3.6的虚拟环境,系统是centos7,其他的有u ...