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

 更新时间:2016年12月07日 09:19:40   作者:kikay   我要评论
Bootstrap提供了一个清晰的创建表格的布局,这篇文章主要介绍了Bootstrap学习笔记之表格基本样式的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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="http://www.jb51.net/article/99302.htm/../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://www.jb51.net/article/99302.htm/../../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="http://www.jb51.net/article/99302.htm/../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://www.jb51.net/article/99302.htm/../../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学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • JavaScript实现三级级联特效

    JavaScript实现三级级联特效

    这篇文章主要介绍了JavaScript实现三级级联特效,选择省会出现相应的县下拉框,同时市的下拉框改变,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • bootstrap下拉框动态赋值方法

    bootstrap下拉框动态赋值方法

    今天小编就为大家分享一篇bootstrap下拉框动态赋值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • javascript系统时间设置操作示例

    javascript系统时间设置操作示例

    这篇文章主要介绍了javascript系统时间设置操作,涉及javascript时间运算与判断相关操作技巧,需要的朋友可以参考下
    2019-06-06
  • Javascript中实现trim()函数的两种方法

    Javascript中实现trim()函数的两种方法

    这篇文章主要介绍了Javascript中实现trim()函数的两种方法,本文直接给出实现代码和使用方法,需要的朋友可以参考下
    2015-02-02
  • react-redux中connect()方法详细解析

    react-redux中connect()方法详细解析

    connect()是React-redux中的核心方法之一,它将react组件预redux中的Store真正连接在一起,下面这篇文章主要给大家介绍了react-redux中connect()方法的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05
  • javascript input输入框模糊提示功能的实现

    javascript input输入框模糊提示功能的实现

    这篇文章主要介绍了javascript input输入框模糊提示功能的实现的相关资料,希望通过本能帮助到大家,需要的朋友可以参考下
    2017-09-09
  • JavaScript类型系统之Object详解

    JavaScript类型系统之Object详解

    对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。而创建Object类型的实例并为其添加属性和(或)方法,就可以创建自定义对象
    2016-01-01
  • js鼠标移动时禁止选中文字

    js鼠标移动时禁止选中文字

    本文主要介绍了js鼠标移动时禁止选中文字的方法,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 3款实用的在线JS代码工具(国外)

    3款实用的在线JS代码工具(国外)

    本文为大家推荐3款非常实用的在线JS代码工具,可以帮助你方便地处理JavaScript或jQuery代码
    2012-03-03
  • HTML5+JS+JQuery+ECharts实现异步加载问题

    HTML5+JS+JQuery+ECharts实现异步加载问题

    这篇文章主要介绍了HTML5+JS+JQuery+ECharts实现异步加载问题,需要的朋友可以参考下
    2017-12-12

最新评论