主要属性：
　　全屏宽度带水平线的表格　　.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. Kafka入门学习--基础

    Kafka是什么 Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特性就可 ...

  2. BZOJ_3224 Tyvj 1728 普通平衡树 【离散化+权值线段树】

    一 题面 Tyvj 1728 普通平衡树 二 分析 比较明显是可以用平衡二叉搜索树(splay)做的. 用权值线段树做,前提就是要先离散化,因为权值线段树维护的值域信息. 板子. 三 AC代码 #in ...

  3. php正则验证邮箱、手机号、姓名、身份证、特殊符号等

    1.邮箱验证 1 $email='1515212@qq'; 2 $preg_email='/^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@([a-zA-Z0-9]+[-.])+( ...

  4. Mac 10.12安装SVN工具SmartSVM 7.6

    说明:SVN工具没有最好的,只有用的最顺手的. 下载: (链接: https://pan.baidu.com/s/1dFGqEsT 密码: uyjx)

  5. 不好意思啊，我上周到今天不到10天时间，用纯C语言写了一个小站！想拍砖的就赶紧拿出来拍啊

    花10天时间用C语言做了个小站 http://tieba.yunxunmi.com/index.html 简称: 云贴吧 不好意思啊,我上周到今天不到10天时间,用纯C语言写了一个小站!想拍砖的就赶紧 ...

  6. 使用NHibernate（2）-- 让程序跑起来

    1, 创建一个MVC的程序,NHibernateDemo,并用NuGet安装NHibernate. 安装引用后,NuGet会自动安装NHibernate所依赖的类库 Iesi.Collections  ...

  7. jQuery对象扩展方法(Extend)深度解析

    1.这几天在写自己的Js工具类库,所以在编写对象扩展方法,参考了jQuery的对象扩展方法,在编写该方法前,需要掌握js深拷贝和浅拷贝的相关知识,下面是jQuery3.2.1版本对象扩展方法的源码: ...

  8. ifram的使用 左边是<a>链接 右边是对应网页嵌套的显示网页链接内容 和toggle的收放用法

    1.ifram的使用 左边是<a>链接  右边是对应网页嵌套的显示网页链接内容 <div class="container"> <div class= ...

  9. java7之Special Methods

    1.关于<init>与<clinit> At the level of the Java Virtual Machine, every constructor written ...

  10. linux mint 19安装最新社区版docker

    sudo apt-get update sudo apt-get install \ apt-transport-https \ ca-certificates \ curl \ software-p ...