<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：表格2</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h2>&lt; tr &gt;、&lt; th &gt; 和 &lt; td &gt;</h2>
<p>.active:将悬停的颜色应用在行或者单元格上</p>
<p>.success:表示一个成功的或积极的动作</p>
<p>.info:表示信息变化的操作</p>
<p>.warning:表示一个需要注意的警告</p>
<p>.danger:表示一个危险的或潜在的负面动作</p>
<table class="table">
<thead >
<tr class="success">
<th>序号</th><th>课程</th>
</tr>
</thead>
<tbody >
<tr class="active">
<td>1</td>
<td>HTML5</td>
</tr>
<tr class="info">
<td>2</td>
<td>CSS3</td>
</tr>
<tr class="warning">
<td>3</td>
<td>JavaScript</td>
</tr>
<tr class="danger">
<td>4</td>
<td>jQuery</td>
</tr>
<tr>
<td>5</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>6</td>
<td>Aanglur JS</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</div>

<script src="Css/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap 表格2的更多相关文章

  1. Bootstrap 表格 笔记

    Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. < ...

  2. 【原创】bootstrap框架的学习 第七课 -[bootstrap表格]

    Bootstrap 表格 标签 描述 <table> 为表格添加基础样式. <thead> 表格标题行的容器元素(<tr>),用来标识表格列. <tbody& ...

  3. Bootstrap表格样式(附源码文件)--Bootstrap

    1.表格默认样式 <h4>表格默认样式</h4><table><!--默认样式--> <tr><th>序号</th> ...

  4. Bootstrap -- 表格样式、表单布局

    Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...

  5. bootstrap表格添加按钮、模态框实现

    bootstrap表格添加按钮.模态框实现 原创 2017年07月20日 17:35:48 标签: bootstrap 1723 bootstrap表格添加按钮.模态框实现 - 需求: 需要表格后面每 ...

  6. jQuery动态生成Bootstrap表格

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  7. Bootstrap表格类名及对应图形

    .table:基础表格 不管制作哪种表格都离不开类名“table”.所以大家在使用Bootstrap表格时,千万注意,你的<table>元素中一定不能缺少类名“table”. .table ...

  8. 第二百三十三节，Bootstrap表格和按钮

    Bootstrap表格和按钮 学习要点: 1.表格 2.按钮 本节课我们主要学习一下 Bootstrap 表格和按钮功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一．表格 Bootstrap ...

  9. Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结

    Bootstrap表格插件bootstrap-table配置与应用小结   by:授客 QQ:1033553122 1.   测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...

  10. 实现Bootstrap表格拖拽

    实现Bootstrap表格拖拽: 需要引入jquery.min.js.bootstrap相关文件,以及jquery.dragsort-0.5.2.js 代码如下: <html> <h ...

随机推荐

  1. 新建Podfile命令

    接下来,你需要建立一个主工程.建立成功以后,再次启动终端, 利用cd命令进入到工程文件夹内,此时需要创建一个特殊的文本文件,命令如下: 命令: touch Podfile 创建 命令: open -e ...

  2. 搭建 CDH 版本hive

    搭建一个完整的cdh 的版本,由于涉及的产品和步骤太多,在客户那里部署环境时,很容易出现意外,所以如果只是需要部署一个测试环境来进行验证,我们没有必要完完整整的部署整个cdh.   下面是通过命令行的 ...

  3. bzoj1660:[Usaco2006 Nov]badhair乱头发节

    Description 农民John的某 N 头奶牛 (1 <= N <= 80,000) 正在过乱头发节!由于每头牛都 意识到自己凌乱不堪的发型, FJ 希望统计出能够看到其他牛的头发的 ...

  4. D. Merge Equals（from Educational Codeforces Round 42 (Rated for Div. 2)）

    模拟题,运用强大的stl. #include <iostream> #include <map> #include <algorithm> #include < ...

  5. 51Nod 1097 拼成最小的数（字符串的排序）

    #include <iostream> #include <cstring> #include <cstdlib> #include <cstdio> ...

  6. PostgreSQL-11-WITH语句

    1.WITH语句原理:通用表表达式(Common Table Expressions)/CTEs,在大型查询中的辅助语句 WITH name_for_summary_data AS ( SELECT ...

  7. 【原创】微信公众号与HTML 5混合模式揭秘4——jssdk调用微信扫一扫

    微信公众号与HTML 5混合模式揭秘1——如何部署JSSDK 微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片 微信公众号与HTML 5混合模式揭秘3——JSSDK获取地理位置   在JS ...

  8. Objective-C Protocols

    Objective-C allows you to define protocols, which declare the methods expected to be used for a part ...

  9. idea 设置加载多个资源文件,显示本地图片

    idea 经常只会设置一个资源路径,这个路径就是项目的路径.但是当要加载的文件处于其他位置时,则需要增加虚拟路径的配置. 如图:第一个是项目路径 第二个是图片路径

  10. 更改shell

    chsh -s /usr/local/bin/bash  #更改自己的shell为bash