编程 Javascript

Bootstrap基本样式学习笔记之表格(2)

Posted in Javascript onDecember 07, 2016

Bootstrap实现了大量基本样式，包括表格、表单、按钮、图片等。基本的使用方法是通过添加特定的class来实现。
Bootstrap 提供了一个清晰的创建表格的布局。

0x01 表格样式

（1）基本样式：不带边框和分割线：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>表格</title>
</head>
<body>
<div class="container">
 <table class="table">
 <tr>
 <td>序号</td>
 <td>姓名</td>
 <td>年龄</td>
 </tr>
 <tr>
 <td>1</td>
 <td>kikay</td>
 <td>20</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Tom</td>
 <td>18</td>
 </tr>
 <tr>
 <td>1</td>
 <td>小花</td>
 <td>21</td>
 </tr>
 </table>
</div>
</body>
</html>

（2）样式：table-bordered：为表格带上边框：<table class="table table-bordered table-striped">
（3）样式：table-striped:为表格带上斑马线：<table class="table table-striped">
（4）样式：.table-hover:为鼠标悬浮在表格行上指定不同颜色：<table class="table table-hover">
（5）样式：.table-condensed：使表格更加紧凑：<table class="table table-condensed">

0x02 状态标识

还可以为表格中行或者单元格添加状态样式，比如：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>带上边框</title>
</head>
<body>
<div class="container">
 <table class="table table-bordered table-striped table-hover table-condensed">
 <tr class="alert-danger">
 <td class=>序号</td>
 <td>姓名</td>
 <td>年龄</td>
 </tr>
 <tr class="success">
 <td>1</td>
 <td>kikay</td>
 <td>20</td>
 </tr>
 <tr class="alert-warning">
 <td>2</td>
 <td>Tom</td>
 <td>18</td>
 </tr>
 <tr>
 <td>1</td>
 <td>小花</td>
 <td>21</td>
 </tr>
 </table>
</div>
</body>
</html>

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap基本样式学习笔记之表格(2)

- Author -

kikay

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

身份证号码前六位所代表的省,市,区, 以及地区编码下载

Apr 12 Javascript

js 深拷贝函数

Dec 04 Javascript

深入理解javascript变量声明

Nov 20 Javascript

jQuery中:radio选择器用法实例

Jan 03 Javascript

Jquery实现瀑布流布局（备有详细注释）

Jul 31 Javascript

基于ajax实现文件上传并显示进度条

Aug 03 Javascript

AngularJs表单验证实例代码解析

Nov 29 Javascript

Bootstrap基本组件学习笔记之缩略图(13)

Dec 08 Javascript

AngularJS自定义过滤器用法经典实例总结

May 17 Javascript

angular6根据environments配置文件更改开发所需要的环境的方法

Mar 06 Javascript

vue radio单选框,获取当前项(每一项)的value值操作

Sep 10 Javascript

Vue项目打包编译优化方案

Sep 16 Javascript

jquery的父、子、兄弟节点查找,节点的子节点循环方法

Dec 07 #Javascript

Bootstrap学习笔记之环境配置(1)

Dec 07 #Javascript

Bootstrap风格的WPF样式

Dec 07 #Javascript

Bootstrap基本组件学习笔记之导航(10)

Dec 07 #Javascript

Bootstrap基本组件学习笔记之input输入框组(9)

Dec 07 #Javascript

详解ES6中的let命令

Apr 05 #Javascript

jquery操作ID带有变量的节点实例

Dec 07 #Javascript

You might like

php基础知识:类与对象(3) 构造函数和析构函数

2006/12/13 PHP

MySql中正则表达式的使用方法描述

2008/07/30 PHP

php加密解密实用类分享

2014/01/07 PHP

8个PHP数组面试题

2015/06/23 PHP

PJ Blog修改-禁止复制的代码和方法

2006/10/25 Javascript

小议Function.apply() 之一------(函数的劫持与对象的复制)

2006/11/30 Javascript

基于jquery的仿百度的鼠标移入图片抖动效果

2010/09/17 Javascript

解析dom中的children对象数组元素firstChild,lastChild的使用

2013/07/10 Javascript

理解javascript中的原型和原型链

2015/07/30 Javascript

jQuery基本过滤选择器用法示例

2016/09/09 Javascript

jquery动态添加以及遍历option并获取特定样式名称的option方法

2018/01/29 jQuery

新手如何快速理解js异步编程

2019/06/24 Javascript

微信小程序使用echarts获取数据并生成折线图

2019/10/16 Javascript

利用JS判断元素是否为数组的方法示例

2021/01/08 Javascript

[04:32]DOTA2著名解说配音敌法师现场专访海涛怒切假腿

2013/12/20 DOTA

Python 对象中的数据类型

2017/05/13 Python

Python实现树的先序、中序、后序排序算法示例

2017/06/23 Python

神经网络python源码分享

2017/12/15 Python

python发送邮件脚本

2018/05/22 Python

[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】

2018/10/28 Python

Python实现的简单线性回归算法实例分析

2018/12/26 Python

python开发准备工作之配置虚拟环境(非常重要)

2019/02/11 Python

python 读写excel文件操作示例【附源码下载】

2019/06/19 Python

python将字符串list写入excel和txt的实例

2019/07/20 Python

Python调用C语言的实现

2019/07/26 Python

Python socket非阻塞模块应用示例

2019/09/12 Python

python构造函数init实例方法解析

2020/01/19 Python

PyCharm+PyQt5+QtDesigner配置详解

2020/08/12 Python

通过代码实例了解Python sys模块

2020/09/14 Python

Python机器学习工具scikit-learn的使用笔记

2021/01/28 Python

英国门把手公司：Door Handle Company

2019/05/12 全球购物

俄罗斯最大的在线手表商店：Bestwatch.ru

2020/01/11 全球购物

英国森林假期：Forest Holidays

2021/01/01 全球购物

swtich是否能作用在byte上，是否能作用在long上，是否能作用在String上

2013/07/06 面试题

视光学毕业生自荐书范文

2014/02/13 职场文书

小学生母亲节演讲稿

2014/05/07 职场文书