主要属性：
　　全屏宽度带水平线的表格　　.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. js及Java中对于两个时间日期的判断脚本

    JS脚本: function checkDateIsEdited(createDate) { var compareDate = createDate.replace("-",&q ...

  2. c++之随堂笔记

    1.指针篇 给指针赋值时,只能等号右边只能使用&符号将一个对象的地址赋值给指针,不能直接把一个具体的数或者字符串直接赋值给指针. 举例: int* ptr_num = 100;  //这种写法 ...

  3. 2016级算法期末上机-G.中等·Bamboo's Fight with DDLs II

    中等·Bamboo's Fight with DDLs II 分析 一句话:给定字符串,求最长回文子序列长度,动态规划LCS思想的进阶应用 具体思路如下: 对于任意字符串,如果头尾字符相同,那么字符串 ...

  4. 解决织梦dedecms文档关键字(自动内链)php5.5以上失效的问题 urf-8版本的

    找到include/arc.archives.class 在里面需要修改两次地方 在1230行 // 这里可能会有错误 if (version_compare(PHP_VERSION, '5.5.0' ...

  5. 20190417 CentOS 7下安装ActiveMQ

    前言 用VMware安装CentOS 7.6,创建一个新的用户lihailin9073,并使用这个用户登陆CentOS系统 安装和启动 登陆ActivieMQ官网http://activemq.apa ...

  6. 全网最全的Windows下Anaconda2 / Anaconda3里正确下载安装Theano（图文详解）

    不多说,直接上干货! Theano的安装教程目前网上一搜很多,前几天折腾了好久,终于安装成功了Anaconda3(Python3)的Theano,嗯~发博客总结并分享下经验教训吧. 渣电脑,显卡用的是 ...

  7. 使用EditPlus编辑Linux上的文本文件

    在Linux上我们都使用vim 或者vi命令对文件进行编辑,但是我们习惯的一般都是windows系统, 那么怎么才能像在windows上一样编辑我们Linux上的文件呢?下面我们就来看看如何使用 wi ...

  8. 使用github oauth 出现 OpenSSL::SSL::SSLError - SSL_connect SYSCALL returned=5 errno=0 state=SSLv2/v3 解决

    A top level initializer is highly recommended to use: conf/initializer/tls_settings.rb OpenSSL::SSL: ...

  9. 查找checked的checkbox和raido

    <fieldset id="checkArray"> <input type="checkbox" name="chk[]" ...

  10. Delphi下OpenGL2d绘图(04)-画四边形

    一.前言 画四边形基本上与前几遍文字代码是相同.区别在于glBegin()的参数“GL_QUADS”.绘制的框架代码可以使用 Delphi下OpenGL2d绘图(01)-初始化 中的代码.修改的部份为 ...