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

随机推荐

Java四种线程池newCachedThreadPool,newFixedThreadPool,newScheduledThreadPool,newSingleThreadExecutor
1.new Thread的弊端执行一个异步任务你还只是如下new Thread吗? Java new Thread(new Runnable() { @Override public void ru ...
PHP中cookie和Session
Cookie与Session cookie 列子 if(!isset($_COOKIE['cookie'])){ setcookie("cookie",date('Y-m-d H: ...
中国地图 xaml Canvas
<Canvas x:Name="LayoutRoot" Height="560" Width="700" Background=&q ...
Google Analytics Premium VS Adobe Analytics
在很久以前的互联网年代,Google收购了一家名为Urchin的公司,进而演化诞生了Google Analytics.当Goochin(Google / Urchin)首次亮相时,它被所有人称为“新的 ...
noi 2971 抓住那头牛
2971:抓住那头牛查看提交统计提问总时间限制: 2000ms 内存限制: 65536kB 描述农夫知道一头牛的位置,想要抓住它.农夫和牛都位于数轴上,农夫起始位于点N(0<=N ...
Uva 1220，Hali-Bula 的晚会
题目链接:https://uva.onlinejudge.org/external/12/1220.pdf 题意: 公司n个人,形成一个数状结构,选出最大独立集,并且看是否是唯一解. 分析: d(i) ...
谷歌Chrome浏览器如何设置网页的默认编码方法
设置->高级->自定义字体->编码->utf-8
最流行的编程语言JavaScript能做什么？
本文转自互联网! 首先很遗憾的一点是,"PHP虽然是最好的语言",但是它不是最流行的语言. 对不起的还有刚刚在4月TIOBE编程语言排行榜上榜的各个语言: 你们都很棒,但是你们都担 ...
WITH (NOLOCK)
缺点: 1.会产生脏读 2.只适用与select查询语句优点: 1.有些文件说,加了WITH (NOLOCK)的SQL查询效率可以增加33%. 2.可以用于inner join 语句脏读: 一个用 ...
SpringMvc 使用poi导入导出Excel
Util类 package com.common.util; public class ExportUtil { private XSSFWorkbook wb = null; private XSS ...

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

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

随机推荐

热门专题