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安全模型的另外一个重要组成部分安全管理器. 安全管理器 ...

随机推荐

js实现鼠标的滑动
js实现鼠标的滑动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
C++ 关键字 explicit, export, mutable
转自 explicit 如果A类有某个构造函数的单个输入参数,是B类(包括基本数据类型)的对象或引用,则C++的编译器会在需要A类形参的函数调用中,自动调用该构造函数,将B类实参隐式地转换为A类实参. ...
var_dump(is_writeable(ini_get("session.save_path")));
var_dump(is_writeable(ini_get("session.save_path")));
Gson心得小笔记
又和往常一样看项目的时候遇到了点新的东西,至少对我来说是个新的东西吧.Gson 废话不多说.个人认为Gson主要用来实现对象和json之间的转换. 例如有个person对象,想要把这个对象转化为jso ...
javaBean的使用方法；
在jsp页面中使用javaBean:三个标签: <jsp:useBean>标签 <jsp:setProperty>标签 <jsp:getProperty>标签首先 ...
Session案例：简易的购物车
三个jsp和两个Servlet组成:在WebContent下边建立一个shoppingcart文件夹,将三个jsp文件放在里面: 1.建立一个step1.jsp文件,出现一个表格,是一个复选框,可以选 ...
The trouble of Xiaoqian
The trouble of Xiaoqian Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
使用Markdown写文档
转载于:http://blog.csdn.net/xiahouzuoxin/article/details/19752603 Markdown是一种网络书写语言,其目标是实现易读易写,且兼容HTML语 ...
hdu 3398
String Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
SpringMVC +mybatis+spring 结合easyui用法及常见问题总结
SpringMVC +mybatis+spring 结合easyui用法及常见问题总结 1.FormatString的用法. 2.用postAjaxFillGrid实现dataGrid 把form表单 ...

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

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

随机推荐

热门专题