bootstrap 多色表格

有时候需要用到多色显示不同类型的表格

用bootstrap的样式即可

<tr class="active">

<tr class="success">

<tr class="warning">

<tr class="danger">

学习源头:http://www.runoob.com/bootstrap/bootstrap-tables.html

原文地址:https://www.cnblogs.com/djwhome/p/9089923.html

时间: 2024-10-19 11:24:39

bootstrap 多色表格的相关文章

Bootstrap中六种表格样式

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

Bootstrap &lt;基础五&gt;表格

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

Bootstrap系列 -- 9. 表格

一. Bootstrap 表格样式支持 Bootstrap提供了六种不同风格的样式支持,其中一个基础样式,4个附件样式,1个响应式设计样式 1. .table:基础表格 2. .table-striped:斑马线表格 3. .table-bordered:带边框的表格 4. .table-hover:鼠标悬停高亮的表格 5. .table-condensed:紧凑型表格 6. .table-responsive:响应式表格 二. Bootstrap 行样式 <table class="ta

BootStrap的table表格,栅格系统,form表单的样式

BootStrap BootStrap的简介 1.    什么是Bootstrap 由两个前端设计师开发的一个前端的框架(Html,css,js) 简化了程序员写css的代码 2.    为什么使用BootStrap,有什么特点 l  学习比较简单,有了Html,css和js就能学习 l  响应式布局,可以适应多种的设备 l  移动设备优先 BootStrap的使用 环境的安装 官网上下载包 要想使用bootStrap 必须加载jquery bootStrap的基本模板 1.     Html文

bootstrap 3 之 表格(table的各种样式)

1.table-striped:斑马线表格 2.table-bordered:带边框的表格 3.table-hover:鼠标悬停高亮的表格 4.table-condensed:紧凑型表格(单元格的内距由8px调至5px.) 5.table-responsive:响应式表格(当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条.当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失) 6.“.table”主要有三个作用: ?  给表格设置了margin-bottom:20px以

Bootstrap基础(五):表格

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

Bootstrap表格

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

Bootstrap关于表格

1.Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格. ?  .table:基础表格 ?  .table-striped:斑马线表格 ?  .table-bordered:带边框的表格 ?  .table-hover:鼠标悬停高亮的表格 ?  .table-condensed:紧凑型表格 ?  .table-responsive:响应式表格 2.Bootstrap还为表格的行元素<tr>提供了五种不同的类名,每种类名控制了行的不同背景颜色,具体说明如下表所示:

吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:精简表格

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 精简表格</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css&q