主要属性：
　　全屏宽度带水平线的表格　　.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. nginx负载均衡之入门配置

    先来简单了解一下什么是负载均衡,单从字面上的意思来理解就可以解释N台服务器平均分担负载,不会因为某台服务器负载高宕机而某台服务器闲置的情况.那么负载均衡的前提就是要有多台服务器才能实现,也就是两台以上 ...

  2. js 多个异步 的并发控制

    今天在群里看到一个人发的面试题: 1,请实现如下的函数,可以批量请求数据,所有的URL地址在urls参数中,同时可以通过max参数 控制请求的并发度.当所有的请求结束后,需要执行callback回调. ...

  3. 微信内置的浏览器window.location.href 跳转不兼容问题

    1.不兼容苹果手机---->>>>使用模拟触发a标签 <a id="alink" href="http://www.baidu.com&qu ...

  4. [转] etcd 搭建与使用

    [From] https://blog.csdn.net/ShouTouDeXingFu/article/details/81167302 etcd 1.下载etcd二进制文件包         ht ...

  5. Mac 10.12为打开终端增加快捷键（转）

    1.在实用工具中打开Automator.app 2.选择新建,然后选择服务 3.服务收到选择为没有输入 然后在左边侧栏中双击Run AppleScript(有些系统会显示运行 AppleScript) ...

  6. (转)zabbix3.4使用percona-monitoring-plugins监控mysql

    原文:https://blog.csdn.net/yanggd1987/article/details/79656771 简介 之前主要使用nagios监控mysql,本文主要介绍使用percona- ...

  7. linux下RabbitMQ相关命令

    1. 关闭与启动 ① 到指定目录:cd/etc/init.d ② 停止:rabbitmq-server stop ③ 启动:rabbitmq-server start ④ 查看是否停止/启动成功:ps ...

  8. 高性能队列Disruptor的使用

    一.什么是 Disruptor 从功能上来看,Disruptor 是实现了"队列"的功能,而且是一个有界队列.那么它的应用场景自然就是"生产者-消费者"模型的应 ...

  9. io流之节点流inputstream、outputstream、reader、writer

    例子程序:读取工作空间下 package io; import java.io.*; public class TestFileInputStream { public static void mai ...

  10. shiro学习笔记_0600_自定义realm实现授权

    博客shiro学习笔记_0400_自定义Realm实现身份认证 介绍了认证,这里介绍授权. 1,仅仅通过配置文件来指定权限不够灵活且不方便.在实际的应用中大多数情况下都是将用户信息,角色信息,权限信息 ...