bootstrap基础学习五篇
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基础学习五篇的更多相关文章
- bootstrap基础学习二篇
这篇学习网格系统(Grid System) Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 1.网格选项: ...
- bootstrap基础学习八篇
bootstrap辅助类 a.对于文本颜色 以下不同的类展示了不同的文本颜色.如果文本是个链接鼠标移动到文本上会变暗: 类 描述 .text-muted "text-muted" ...
- bootstrap基础学习七篇
bootstrap图片 Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角. .img-circle ...
- bootstrap基础学习六篇
bootstrap按钮 类 描述 .btn 为按钮添加基本样式 .btn-default 默认/标准按钮 .btn-primary 原始按钮样式(未被操作) .btn-success 表示成功的动作 ...
- bootstrap基础学习四篇
bootstrap代码 Bootstrap 允许两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 < ...
- bootstrap基础学习三篇
bootstrap的排版 1.标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式 2.代码如下: <div class="container"& ...
- bootstrap基础学习一篇
官网:http://www.bootcss.com/ 这里,主要讲解bootstrap3.关于他的介绍就不用复述了. 1.示例 <!doctype html> <html lang= ...
- bootstrap基础学习十一篇
bootstrap下拉菜单(Dropdowns) 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可. a.代码示例如 ...
- bootstrap基础学习十篇
bootstrap字体图标(Glyphicons) a.什么是字体图标 字体图标是在 Web 项目中使用的图标字体.虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目 ...
随机推荐
- linux 16进制 产看文件
hexdump - ascii, decimal, hexadecimal, octal dump 查看十六机制的首选工具. -c 每单元以字节为单位,显示出对应的ASCII码 -C 每单元以字 ...
- JavaWeb response对象常用操作
JavaWeb response对象常用操作 CreationTime--2018年7月18日10点42分 Author:Marydon 1.设置响应内容类型 方式一 response.setCo ...
- js open窗口父子窗口操作
http://zhidao.baidu.com/question/61358246.html?an=0&si=1 js open窗口父子窗口操作 父窗口js代码: function ...
- js特效,轻松实现内容的无缝平滑滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- tomcat发布web项目,支持域名
首先需要安装JDK,不是Linux自带的OpenJDK,参考下面的文章: centos下 安装jdk 设置java环境变量:编辑这个/etc/profile文件: export JAVA_HOME=/ ...
- Linux命令-文件搜索命令:find
选项: -name表示按文件名称查找 find /etc -name init 搜索etc目录下面的文件名为init的所有文件(精确搜索) find /etc -name *init* 搜索etc目录 ...
- cordova添加Splash
最新版本的cordova添加Splash只需要改写config.xml 官方文档地址为:http://cordova.apache.org/docs/en/4.0.0/config_ref_image ...
- C#中将图片转化成base64字符串
厂址:http://www.cnblogs.com/yunfeifei/p/4165351.html 1.在C#中将图片转化成base64字符串: using System; using System ...
- FTL页面常用到的一些方法combobox、combotree、datagrid
参考文件:点击下载 1.combobox: (1).js 1)初始化combobox //相似度 $('#same').combobox({ //url:"<@s.url value= ...
- 02、Unicode 汉字转码小工具
在做 Windows app 的时候,与服务器端交互使用的是 json 格式的数据,里面的汉字内容被 编码成 unicode 格式,在调试的时候不太方便,就写了个工具,把里面的 unicode 内容转 ...