编程 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 相关文章推荐

js活用事件触发对象动作

Aug 10 Javascript

Jquery写一个鼠标拖动效果实现原理与代码

Dec 24 Javascript

关于JS判断图片是否加载完成且获取图片宽度的方法

Apr 09 Javascript

如何使用jQUery获取选中radio对应的值(一句代码)

Jun 03 Javascript

浅谈JavaScript中的对象及Promise对象的实现

Nov 15 Javascript

jquery实现列表上下移动功能

Feb 25 Javascript

jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载

Apr 19 Javascript

Node.js 使用命令行工具检查更新

Jun 08 Javascript

详解Angular2 之结构型指令

Jun 21 Javascript

一步步教你利用Docker设置Node.js

Nov 20 Javascript

深入理解Vue.js轻量高效的前端组件化方案

Dec 10 Javascript

jQuery实现的图片点击放大缩小功能案例

Jan 02 jQuery

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