Bootstrap3学习笔记(三)之表格

在上篇文章给大家介绍了 BootStrap3学习笔记(一)之网格系统      Bootstrap3学习笔记(二)之排版

只需要在table标签上使用.table类，就可以使用bootstrap默认的表格样式

如果需要行背景有交替变化，可以这样设定：

代码如下:

<table class="table table-striped">

如果需要边框，可以这样设定：

代码如下:

<table class="table table-bordered">

如果希望鼠标移动到内容行上有响应效果，可以这样设定：

代码如下:

<table class="table table-hover">

如果希望表格紧凑一点节省空间，可以这样设定，cell的pedding将减半为4px，默认padding为8px：

代码如下:

<table class="table table-condensed">

也可以给某行加上特定的样式：

<tr class="active">
<tr class="success">
<tr class="info">
<tr class="warning">
<tr class="danger">

为了不同设备上显示一致，对表格也可使用响应式设定，在表格外使用div修饰一下，将自动适应小于或大于768px的设备：

代码如下:

<div class="table-responsive">

Bootstrap支持的表格元素：

以上所述是小编给大家介绍的Bootstrap3学习笔记(三)之表格的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Bootstrap教程JS插件滚动监听学习笔记分享

    Bootstrap教程JS插件滚动监听学习笔记分享

    本文主要来学习一下JavaScript插件--滚动监听. 1.案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.你可以试试滚动这个页面,看看左侧导航的变化. 先把实现的代码上了,你可以通过测试代码先来看看效果. <!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name="viewport" content="width=de

  • bootstrap基础知识学习笔记

    bootstrap基础知识学习笔记

    在此就不做 bootstrap 的介绍了,近几年 bootstrap 越来越流行,一点不亚于 js 中的 jquery. 以下为 bootstrap 3.3.5 学习中记录的东西,方便查阅,作者使用的是 jsp ,跟 html 可能有稍许不同,请自行参考修改 [引用文件] [页面引用] 路径请自行规划 <script type="text/javascript" src="<%=path%>/js-lib/jquery/jquery-1.11.2.min.j

  • Bootstrap Metronic完全响应式管理模板学习笔记

    Bootstrap Metronic完全响应式管理模板学习笔记

    学习使用Bootstrap Metronic完全响应式管理模板,具体内容如下 1.简介 Bootstrap Metronic是一个基于Bootstrap 3.x的高级管理控制面板主题.Bootstrap Metronic - 是一个完全响应式管理模板.基于Bootstrap3框架.高度可定制的,易于使用.适合从小型移动设备到大型台式机很多的屏幕分辨率.包含7个主题,高达100个左右的实例页面,非常丰富页面展示效果,包括表单,表格,地图,日历-等等. 对比了其他Bootstrap定制的影响式模版,

  • Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记

    Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记

    继续上一篇,针对Bootstrap Metronic菜单栏整理的笔记分享给大家,供大家参考,具体内容如下 1.简介 1)  .环境配置 2)  .提取页面 3).动态生成菜单(无限级别树) 2.系统环境配置  项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQLServer做出解读)  运行环境:VS2013+MVC5.0+EF6.1+SQLServer2012  解决方案名称:AppSolution 项目名称:App.Web(UI层)与App.M

  • bootstrap学习笔记之初识bootstrap

    bootstrap学习笔记之初识bootstrap

    Bootstrap是一款目前非常流行的前端框架,简单的说,就是html,css,javascript的工具集,我们可以用bootstrap搭建出简洁,清新的网站或软件界面,有了bootstrap这个利器后台开发人员再也不用发愁前台界面的搭建了. bootstrap是一Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架.bootstrap提供了优雅的html和css规范,它即是由动态css语言Less写成.是Github上的热门开源项目. 它基于jQuery框架开发,在

  • Bootstrap开关(switch)控件学习笔记分享

    Bootstrap开关(switch)控件学习笔记分享

    bootstrap-switch插件是一个针对Bootstrap实现的开关(switch)按钮控件,可以支持尺寸.颜色等属性的自定义.开关式按钮在国内网站上使用的并不是很多,Bootstrap 的应用在国外非常流行,不知道是我们不喜欢还是使用它很麻烦很难适合网站来使用.但这种开头式按钮在手机等移动设备上的应用是最广泛的,屏幕的特性促使它更好的发展. 功能说明: 介绍chekbox与radio的两个表单的简单使用,其他更多的效果与功能可以浏览demo,点击按钮以滑动的方式进行on/off切换. 使

  • BootStrap3学习笔记(一)之网格系统

    BootStrap3学习笔记(一)之网格系统

    如果显示网格,代码应类似这样: <div class="container"> <div class="row"> <div class="col-md-4"><p>Box 1</p></div> <div class="col-md-4"><p>Box 2</p></div> <div class=&

  • Bootstrap教程JS插件弹出框学习笔记分享

    Bootstrap教程JS插件弹出框学习笔记分享

    本文主要来学习一下JavaScript插件--弹出框. 案例 为页面内容添加一个小的覆盖层,就像iPad上的效果一样,为页面元素增加额外的信息. 先来看几个简单的静态案例效果图 效果比较简单主要就是静态的弹出的小窗体,分为窗体标题和窗体内容. <div class="bs-example bs-example-popover"> <div class="popover top"> <div class="arrow"

  • Bootstrap学习笔记之css样式设计(1)

    Bootstrap学习笔记之css样式设计(1)

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一.bootstrap是什么? bs是什么? 即前端页面搭建的标准化框架工具,已经写好了css.js样式,只需要拿来用即可. 怎么用bs呢?主要是通过使用不同的类增加效果,每一种类,对应的功能不同. bs好处:增加了开发效率,页面设计更加美观,支持响应式开发.下载地址:https://github.com/foreverjiangting/bootstrap

  • Bootstrap学习笔记之js组件（4）

    Bootstrap学习笔记之js组件（4）

    这次我们来看下js组件的使用,本篇文章会有点长,希望大家可以耐心看,相信收获会有不少.不少园友加我好友,表示喜欢我写文字的风格,简单明了,这里,再次谢谢你们的支持.一方面,自身技术有限,写的东西都比较基础,另一方面,写的东西,都是根据自己的理解,把复杂的东西用最简单的语言表达出来.所以,写的有不对的地方,麻烦各位给予指正哈.  一.js文件引用 注意点:jquery必须在在其它js文件之前引入,因为其它插件都是依赖于jquery. <!--<script src="js/jquery

随机推荐