bootstrap表格样式

<body>
<div class="container">
<table class="table" >  //表格基本样式
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr><td>张三</td><td>男</td><td>15</td></tr>
<tr><td>李四</td><td>男</td><td>15</td></tr>
<tr><td>王五</td><td>男</td><td>15</td></tr>
</table>
<table class="table table-striped" >//表格条纹
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr><td>张三</td><td>男</td><td>15</td></tr>
<tr><td>李四</td><td>男</td><td>15</td></tr>
<tr><td>王五</td><td>男</td><td>15</td></tr>
</table>
<table class="table table-striped table-bordered" >//表格边框
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr><td>张三</td><td>男</td><td>15</td></tr>
<tr><td>李四</td><td>男</td><td>15</td></tr>
<tr><td>王五</td><td>男</td><td>15</td></tr>
</table>
<h1>悬停</h1>
<table class="table table-striped table-bordered table-hover" >
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr><td>张三</td><td>男</td><td>15</td></tr>
<tr><td>李四</td><td>男</td><td>15</td></tr>
<tr><td>王五</td><td>男</td><td>15</td></tr>
</table>
<h1>紧凑</h1>
<table class="table table-striped table-bordered table-hover table-condensed" >
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr><td>张三</td><td>男</td><td>15</td></tr>
<tr><td>李四</td><td>男</td><td>15</td></tr>
<tr><td>王五</td><td>男</td><td>15</td></tr>
</table>
<h1>行样式</h1>
<table class="table table-striped table-bordered table-hover table-condensed" >
<tr class="info"><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr class="success"><td>张三</td><td>男</td><td>15</td></tr>
<tr class="warning"><td>李四</td><td>男</td><td>15</td></tr>
<tr class="active"><td>王五</td><td>男</td><td>15</td></tr>
</table>
<div class="table-responsive">
<h1>响应式表格</h1>
<table class="table table-striped table-bordered table-hover table-condensed" >
<tr class="info"><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr class="success"><td>张三</td><td>男</td><td>15</td></tr>
<tr class="warning"><td>李四</td><td>男</td><td>15</td></tr>
<tr class="active"><td>王五</td><td>男</td><td>15</td></tr>
</table></div>
</div>
</body>

类说明:.table表格基本样式

.table-striped表示表格条纹

.table-bordered表示表格边框

.table-condensed表格内容紧凑

.table-hover鼠标悬停

状态类(可以用这个设置表格每行的颜色):.active 鼠标在行或单元格上时所设置的颜色

.success标识成功或积极的动作

.info标识普通的提示信息或动作

.warning表示警告或者用户注意

.denger 标识危险或潜在的带来负面影响的动作

时间: 2024-11-05 04:51:21

bootstrap表格样式的相关文章

Bootstrap中六种表格样式

表格 表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格.在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格,在接下来的内容中,我们会详细介绍Bootstrap的表格使用. 同样的,如果你对CSS预处理器熟悉,你可以使用Bootstrap提供的预处理版本: ?  LESS版本,对应的文件是 tables.less ?  Sass版本,对应的文件是 _tables.scss 如果你不懂LESS

Bootstrap表格

一.Bootstrap表格简介: 表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格. ?  .table:基础表格 ?  .table-striped:斑马线表格 ?  .table-bordered:带边框的表格 ?  .table-hover:鼠标悬停高亮的表格 ?  .table-condensed:紧凑型表格 ?  .table-responsive:响应式表格 在使用Bootstrap的表格过程中,只需要添加对

Bootstrap 表格 笔记

Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. <thead> 表格标题行的容器元素(<tr>),用来标识表格列. <tbody> 表格主体中的表格行的容器元素(<tr>). <tr> 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>). <td> 默认

【原创】bootstrap框架的学习 第七课 -[bootstrap表格]

Bootstrap 表格 标签 描述 <table> 为表格添加基础样式. <thead> 表格标题行的容器元素(<tr>),用来标识表格列. <tbody> 表格主体中的表格行的容器元素(<tr>). <tr> 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>). <td> 默认的表格单元格. <th> 特殊的表格单元格,用来标识列或行(取决于范围和位置).必须在 <

Bootstrap表格元素处理

Bootstrap提供了一种基础.table样式.4种附加样式以及一个支持响应式布局的.table.responsive容器样式 下面是HTML模板 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link href="\Bootstrap-di

经典的表格样式

<style type="text/css"> #tbList { border:2px solid #90CBFB; width:600px; margin:20px auto; border-collapse:collapse; } #tbList th,td { border:2px solid #90CBFB; padding:5px; text-align:left; } #tbAdd { border:1px solid #000; width:300px; m

自己编写jQuery插件 之 表格样式(银光棒)

又来吐嘈了,实在是忍不住:换工作以来的第一次上班迟到.早上坐车,坐了4站路发现路线不对,问司机,司机说从今天起换路线了.尼玛,立马下车换乘.换了车,开了2站路,车子坏了,再次被迫下车.就近站牌等车,第一次车没靠站,直接走了,第二次很挤,没法还得上.终于到了公司楼下,fuck,电梯坏了,最终我迟到了......一个美好的早晨,我就这样被老天爷给轮了! 先上图: 上面这张图有3种状态,默认状态(灰白相间),鼠标悬浮状态(绿色),鼠标点击状态(黄色). Html代码如下: <table> <t

表格样式

1.去除表格td默认间距及制作1px细线表格 方案一: 在页面内,通过cellspacing="0″将这个间距消除,合并边框. 方案二:在CSS定义里,只要给这个table一个border-collapse:collapse的样式,就可以达到这个效果 表格样式,布布扣,bubuko.com

jQuery动态生成Bootstrap表格

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getS