bootstrap学习笔记<四>（table表格）

表格

bootstrap为table表格定制多个常用样式：基本样式，隔行变色样式，带边框样式，荧光棒样式，紧凑样式，响应样式。

☑ .table：基础表格

☑ .table-striped：斑马线表格

☑ .table-bordered：带边框的表格

☑ .table-hover：鼠标悬停高亮的表格

☑ .table-condensed：紧凑型表格

☑ .table-responsive：响应式表格

bootsrtap大大提高了表格制作的效率

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>基础表格</title>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</head>

<body>

<h1>基础表格</h1>

<table class="table">

   <thead>

     <tr>

       <th>表格标题</th>

       <th>表格标题</th>

       <th>表格标题</th>

     </tr>

   </thead>

   <tbody>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

   </tbody>

 </table>

<h1>斑马线表格</h1>

<table class="table table-striped">

   <thead>

     <tr>

       <th>表格标题</th>

       <th>表格标题</th>

       <th>表格标题</th>

     </tr>

   </thead>

   <tbody>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

   </tbody>

 </table>

<h1>带边框的表格</h1>

 <table class="table table-bordered">

   <thead>

     <tr>

       <th>表格标题</th>

       <th>表格标题</th>

       <th>表格标题</th>

     </tr>

   </thead>

   <tbody>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

   </tbody>

 </table>

<h1>鼠标悬浮高亮的表格</h1>

<table class="table table-striped table-bordered table-hover">

   <thead>

     <tr>

       <th>表格标题</th>

       <th>表格标题</th>

       <th>表格标题</th>

     </tr>

   </thead>

   <tbody>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

   </tbody>

 </table>

 <h1>紧凑型表格</h1>

  <table class="table table-condensed">

   <thead>

     <tr>

       <th>表格标题</th>

       <th>表格标题</th>

       <th>表格标题</th>

     </tr>

   </thead>

   <tbody>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

   </tbody>

 </table>

 <h1>响应式表格</h1>

 <div class="table-responsive">

   <table class="table table-bordered">

   <thead>

     <tr>

       <th>表格标题</th>

       <th>表格标题</th>

       <th>表格标题</th>

     </tr>

   </thead>

   <tbody>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

     <tr>

       <td>表格单元格</td>

       <td>表格单元格</td>

       <td>表格单元格</td>

     </tr>

   </tbody>

 </table>

</div>

</body>

</html>

效果图

PS：表格内元素样式

分别对应：

<tr class="active">      <!--活动灰-->

<tr class="success">   <!--成功绿-->

<tr class="info">        <!--信息蓝-->

<tr class="warning">   <!--警告橙-->

<tr class="danger">    <!--危险红-->

效果图

bootstrap学习笔记<四>（table表格）的更多相关文章

bootstrap学习（四）表格
基础样式: 自适应沾满浏览器 <table class="table"> <tr> <th>序号</th> <th>姓名 ...
Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
Bootstrap入门（四）表格
Bootstrap入门(四)表格 <table>标签首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...
MySql学习笔记四
MySql学习笔记四 5.3.数据类型数值型整型小数定点数浮点数字符型较短的文本:char, varchar 较长的文本:text, blob(较长的二进制数据) 日期型原则:所选择类 ...
iView学习笔记(三)：表格搜索，过滤及隐藏列操作
iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...
C#可扩展编程之MEF学习笔记(四)：见证奇迹的时刻
前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
IOS学习笔记(四)之UITextField和UITextView控件学习
IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...
java之jvm学习笔记四(安全管理器)
java之jvm学习笔记四(安全管理器) 前面已经简述了java的安全模型的两个组成部分(类装载器,class文件校验器),接下来学习的是java安全模型的另外一个重要组成部分安全管理器. 安全管理器 ...

随机推荐

thinkphp3.2 分页方式汇总
//自定义分页 $page = $_GET['page'] ? $_GET['page'] : 1 ; $count = $this->Table("user")->c ...
HDU 2236：无题II（二分搜索+二分匹配）
http://acm.hdu.edu.cn/showproblem.php?pid=2236 题意:中文题意. 思路:先找出最大和最小值,然后二分差值,对于每一个差值从下界开始枚举判断能不能二分匹配. ...
HDU 3076：ssworld VS DDD（概率DP）
http://acm.split.hdu.edu.cn/showproblem.php?pid=3076 ssworld VS DDD Problem Description One day, s ...
C#:向控件添加信息类
using System; using System.Collections.Generic; using System.Text; using System.Windows.Forms; names ...
discuz阅读权限的设置作用
为什么要有阅读权限?偶想很多新手有这个疑问吧,所以特开此帖说明下. 阅读权限的设置是帖子作者为了部分限制帖子的读者群.虽然网上发帖重在分享,但帖子(尤其精华帖子)是作者花时间和经历而写成的,不加阅读权 ...
mysql btree与hash索引的适用场景和限制
btree索引: 如果没有特别指明类型,多半说的就是btree索引,它使用btree数据结构来存储数据,大多数mysql引擎都支持这种索引,archive引擎是一个例外,5.1之前这个引擎不支持任何索 ...
AngularJS 实现的输入自动完成补充功能
1.首先需要引入:angucomplete.js第三方库 2.增加model : var app = angular.module('app', ["angucomplete"]) ...
java 编程时候的性能调优
一.避免在循环条件中使用复杂表达式在不做编译优化的情况下,在循环中,循环条件会被反复计算,如果不使用复杂表达式,而使循环条件值不变的话,程序将会运行的更快. 例子: import java.util ...
ACM第四站————最小生成树（普里姆算法）
对于一个带权的无向连通图,其每个生成树所有边上的权值之和可能不同,我们把所有边上权值之和最小的生成树称为图的最小生成树. 普里姆算法是以其中某一顶点为起点,逐步寻找各个顶点上最小权值的边来构建最小生成 ...
poj3667 Hotel
此题不难却易出错,很能考察思维的严谨性. 指定ll为区间内左端顶格数的连续可利用房间,rr为右端顶格数的数值,mm为区间内最长的连续可利用房间数. 在查询的时候,由于要返回最靠左的区间左端点,使得在该 ...

bootstrap学习笔记<四>（table表格）

bootstrap学习笔记<四>（table表格）的更多相关文章

随机推荐

热门专题