主要属性：
　　全屏宽度带水平线的表格　　.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. Java实现BF算法

    package 串的算法; public class BF { public static void main(String[] args) { String a = "aaabbaaacc ...

  2. 性能测试 vs 负载测试 vs 压力测试

    在做一些软件测试工作时,常常会被提及性能测试.负载测试.压力测试,这也是在软件测试方面最容易混淆的三个概念.之前和一个测试大牛聊天,他和我说常常面试一些测试人员会问一些这样的问题,大多人认为负载测试等 ...

  3. 用 Hystrix 构建高可用服务架构

    1 hystrix是什么 在分布式系统中,每个服务都可能会调用很多其他服务,被调用的那些服务就是依赖服务,有的时候某些依赖服务出现故障也是很正常的. Hystrix 可以让我们在分布式系统中对服务间的 ...

  4. C基础《一》

    puts("第一个C语言程序输出了") C语言的编译和链接过程 C语言写的代码必须经过编译生成可执行文件才可以用, 编译就是把C语言写的代码进行识别,转换成计算机能够识别的二进制形 ...

  5. ArduinoNano卡在上传，无法烧录

    卡在“上传...”.过了很久被告知失败. 上午在开发版管理器中将Arduino AVR Boards从1.6.20升级到1.6.22,出现这个问题. 再安装回1.6.20,问题未被解决. 查阅资料无果 ...

  6. (转)2017年Linux运维人员必会开源运维工具体系

    标签:操作系统 中间件 千里马 Linux 技能 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://oldboy.blog.51ct ...

  7. php在单个文件内开启dbug

    1.在文件开头添加如下代码 ini_set('display_errors', true); error_reporting(E_ALL);

  8. CentOS 7 下 MySql5.7 主从配置

    演示用两台全新MySql服务器: mysql1:10.10.1.55 (主) mysql2:10.10.1.56 (从) 配置主从,步骤如下:   STEP 1:在mysql1上创建复制账号 repl ...

  9. Java 正则表达式 中的 任意字符

    原来正则表达式中的"."代表的是除换行以外的任意字符,如果要真正代表任意字符,需要把换行符也加进去,但是经过测试"[.\\n]"不生效,可以使用"\\ ...

  10. java的IO流，字节流和字符流

    java操作文件都是通过流来处理的,(其实其他很多语言也是这样) 第一:java的IO流,分为:输入流 和 输出流(这真是废话,这是从流向的角度来说的) 第二:java的所有IO流,只分为:字节流 和 ...