bootstrap表格

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:
标签 描述
<table> 为表格添加基础样式。
<thead> 表格标题行的容器元素(<tr>),用来标识表格列。
<tbody> 表格主体中的表格行的容器元素(<tr>)。
<tr> 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>)。
<td> 默认的表格单元格。
<th> 特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 <thead> 内使用。
<caption> 关于表格存储内容的描述或总结。

1.表格类:

下表样式可用于表格中:
类 描述 实例
.table 为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑
联合使用所有表格类

2.tr,th,td类

下表的类可用于表格的行或者单元格:
类 描述 实例
.active 将悬停的颜色应用在行或者单元格上
.success 表示成功的操作
.info 表示信息变化的操作
.warning 表示一个警告的操作
.danger 表示一个危险的操作

3.代码示例:

<div class="table-responsive">
<table class="table table-bordered">
<caption>基本表的布局</caption>
<thead>
<tr class="active">
<th>姓名</th>
<th>年龄</th>
<th>qq</th>
<th>telphone</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>向明</td>
<td>21</td>
<td>23456754353425<br/>3425324532458</td>
<td>12345678</td>
</tr> <tr class="warning">
<td>向明</td>
<td>21</td>
<td>2345678</td>
<td>1234567854756756<br/>76654367546</td>
</tr> <tr class="danger">
<td>向明</td>
<td>21</td>
<td>2345678</td>
<td>12345678</td>
</tr> <tr>
<td>向明</td>
<td>21</td>
<td>2345678</td>
<td>12345678</td>
</tr>
</tbody>
</table>
</div>

4.几点说明:

a.<div class="table-responsive"> ...</div>,是修饰响应式布局。

b.<table class="table">...</table>,是基本表,<table class="table table-striped">,<table class="table table-bordered">,

<table class="table table-hover">,<table class="table table-condensed">,<tr class="active">,<tr class="success">等等。

c.效果参看:http://www.shouce.ren/api/view/a/778


bootstrap基础学习五篇的更多相关文章

  1. bootstrap基础学习二篇

    这篇学习网格系统(Grid System) Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 1.网格选项: ...

  2. bootstrap基础学习八篇

    bootstrap辅助类 a.对于文本颜色 以下不同的类展示了不同的文本颜色.如果文本是个链接鼠标移动到文本上会变暗: 类 描述 .text-muted "text-muted" ...

  3. bootstrap基础学习七篇

    bootstrap图片 Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角. .img-circle ...

  4. bootstrap基础学习六篇

    bootstrap按钮 类 描述 .btn 为按钮添加基本样式 .btn-default 默认/标准按钮 .btn-primary 原始按钮样式(未被操作) .btn-success 表示成功的动作 ...

  5. bootstrap基础学习四篇

    bootstrap代码 Bootstrap 允许两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 < ...

  6. bootstrap基础学习三篇

    bootstrap的排版 1.标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式 2.代码如下: <div class="container"& ...

  7. bootstrap基础学习一篇

    官网:http://www.bootcss.com/ 这里,主要讲解bootstrap3.关于他的介绍就不用复述了. 1.示例 <!doctype html> <html lang= ...

  8. bootstrap基础学习十一篇

    bootstrap下拉菜单(Dropdowns) 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可. a.代码示例如 ...

  9. bootstrap基础学习十篇

    bootstrap字体图标(Glyphicons) a.什么是字体图标 字体图标是在 Web 项目中使用的图标字体.虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目 ...

随机推荐

  1. linux 16进制 产看文件

    hexdump - ascii, decimal, hexadecimal, octal dump  查看十六机制的首选工具.  -c 每单元以字节为单位,显示出对应的ASCII码  -C 每单元以字 ...

  2. JavaWeb response对象常用操作

      JavaWeb response对象常用操作 CreationTime--2018年7月18日10点42分 Author:Marydon 1.设置响应内容类型 方式一 response.setCo ...

  3. js open窗口父子窗口操作

    http://zhidao.baidu.com/question/61358246.html?an=0&si=1 js open窗口父子窗口操作     父窗口js代码:   function ...

  4. js特效,轻松实现内容的无缝平滑滚动

    <!DOCTYPE   html   PUBLIC   "-//W3C//DTD   XHTML   1.0   Transitional//EN"   "http ...

  5. tomcat发布web项目,支持域名

    首先需要安装JDK,不是Linux自带的OpenJDK,参考下面的文章: centos下 安装jdk 设置java环境变量:编辑这个/etc/profile文件: export JAVA_HOME=/ ...

  6. Linux命令-文件搜索命令:find

    选项: -name表示按文件名称查找 find /etc -name init 搜索etc目录下面的文件名为init的所有文件(精确搜索) find /etc -name *init* 搜索etc目录 ...

  7. cordova添加Splash

    最新版本的cordova添加Splash只需要改写config.xml 官方文档地址为:http://cordova.apache.org/docs/en/4.0.0/config_ref_image ...

  8. C#中将图片转化成base64字符串

    厂址:http://www.cnblogs.com/yunfeifei/p/4165351.html 1.在C#中将图片转化成base64字符串: using System; using System ...

  9. FTL页面常用到的一些方法combobox、combotree、datagrid

    参考文件:点击下载 1.combobox: (1).js 1)初始化combobox //相似度 $('#same').combobox({ //url:"<@s.url value= ...

  10. 02、Unicode 汉字转码小工具

    在做 Windows app 的时候,与服务器端交互使用的是 json 格式的数据,里面的汉字内容被 编码成 unicode 格式,在调试的时候不太方便,就写了个工具,把里面的 unicode 内容转 ...