Bootstrap入门五:表格
table样式:
.table:表格基本样式,很少的padding,灰色的细水平分隔线。
.table-striped:斑马纹样式,隔行换色。
.table-bordered:为表格和其中的每个单元格增加边框。
.table-hover:鼠标悬停,鼠标经过数据行时,该行背景色与斑马纹背景效果相同。
.table-condensed:紧凑型表格,padding减半。
<table class="table table-striped table-bordered table-hover">
......
</table>
tr或td样式:通过这些状态类可以为行或单元格设置颜色。
.active:鼠标悬停在行或单元格上时所设置的颜色
.success:标识成功或积极的动作
.danger:标识危险或潜在的带来负面影响的动作
.warning:标识警告或需要用户注意
.info:标识普通的提示信息或动作
<table class="table table-bordered table-hover">
<tr><th>样式表</th><th>说明</th></tr>
<tr class="success"><td>.....
</table>
响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。
<div class="table-responsive">
<table class="table">
...
</table>
</div>
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr class="success">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td class="danger">Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">4</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>

Bootstrap入门五:表格的更多相关文章
- Bootstrap <基础五>表格
Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. <thead> 表格 ...
- Bootstrap入门(十五)组件9:面板组件
Bootstrap入门(十五)组件9:面板组件 虽然不总是必须,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里.对于这种情况,可以试试面板组件. 1.基本实例 2.带标题的面板 3.情景效果 ...
- Bootstrap入门(二十五)JS插件2:过渡效果
Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js ...
- Bootstrap入门(五)表单
Bootstrap入门(五)表单 先引入本地的CSS文件 <link href="css/bootstrap.min.css" rel="stylesheet ...
- Bootstrap入门(四)表格
Bootstrap入门(四)表格 <table>标签 首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...
- Bootstrap入门(2)表格
Bootstrap入门(四)表格 <table>标签 首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...
- BootStrap入门教程 (一)
BootStrap入门教程 (一) 2011年,twitter的"一小撮"工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端 ...
- bootstrap 入门
bootstrap 入门 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&q ...
- 【Bootstrap】 bootstrap-table表格组件
[Bootstrap-table] 顾名思义,这个组件专注于bootstrap风格的表格的设计,并且提供了很多表格的基础和进阶的功能,给我们开发前端的表格省下很多力气. 本文主要参考这位博主的系列文章 ...
随机推荐
- 移动端rem自适应布局关键代码
function resi() { var html = document.querySelector("html"); var wW = document.body.client ...
- trap在shell中捕捉信号
一.trap捕捉到信号之后,可以有三种反应方式:(1)执行一段程序来处理这一信号(2)接受信号的默认操作(3)忽视这一信号 二.trap对上面三种方式提供了三种基本形式:第一种形式的trap命令在sh ...
- Lwip的相关资料
文件资料 Lwip编程指南 Lwip协议栈的设计与实现 分析Lwip
- jQuery在HTML文档加载完毕后自动执行某个事件;
原来onchange=“fucntionname(parms)”: <select name="country" id="selCountries_{$sn}&qu ...
- 【转】Messagedlg
) = mrYes then Close; MessageDlg用法 对话框类型:mtwarning——含有感叹号的警告对话框mterror——含有红色叉符号的错误对话框mtinformation ...
- WebService IIS 部署
刚刚开始接触c#怎么发布程序都搞不定,经过查看网上同仁的资料,自己写了个Webservice发布了下 1.首先自己写好程序,鼠标选中所写Webservice程序,单击鼠标右键-------->发 ...
- scala构造器实战
父类 abstract class Event(val name:String) { var time:Long var content:String } 子类 private[spark] clas ...
- mysql数据库开发规范
对规范的遵守可用二八原则,不要教条.为满足实际需求 可忽视部分规范. 1.索引规范 *目标 |--利用最小的索引成本找到需要的行记录 *原则 |--做前缀匹配 |--选择区分度高的列做前缀索引列 |- ...
- linux 修改系统时间
首先进入/proc/sys/xen,执行以下命令 [root@test]#cd /proc/sys/xen[root@test]#echo 1 > independent_wallclock ...
- WPF控件数据单项绑定
建立一个姓名,年龄输入框,如图: XAML代码: <TextBox Name="txtName" Text="{Binding Name}" ToolTi ...