Bootstrap入门(四)表格
<table>标签
首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class="table"补足了padding和水平方向上的分割线)
<table class="table">
...
</table>
1.几个不同样式的表格(修改<table>标签中的class)
1.1“table”普通

           <table class="table">
<thead>
<tr>
<th>biaoti</th>
<th>biaoti</th>
<th>biaoti</th>
</tr>
</thead>
<tbody>
<tr>
<th>danyuange</th>
<th>danyuange</th>
<th>danyuange</th>
</tr>
<tr>
<th>danyuange</th>
<th>danyuange</th>
<th>danyuange</th>
</tr>
<tr>
<th>danyuange</th>
<th>danyuange</th>
<th>danyuange</th>
</tr>
</tbody>
</table>

效果:

1.2<table>标签中的class 改为“ table table-striped ”两行之前有不同的颜色(“斑马线”)
效果:

1.3<table>标签中的class 改为 “ table table-striped table-bordered ”多了水平方向上的分割线和边框
效果:

1.4<table>标签中的class 改为 “ table table-striped table-bordered table-hover ”鼠标经过、悬停时有效果
 
2.状态类(在<tr>标签中修改class)
跟之前的类似,有active,info,success,warning,danger等来为单元格添加标识 

                <table class="table table-striped table-bordered">
<thead>
<tr class="active">
<th>biaoti</th>
<th>biaoti</th>
<th>biaoti</th>
</tr>
</thead>
<tbody>
<tr class="success">
<th>danyuange</th>
<th>danyuange</th>
<th>danyuange</th>
</tr>
<tr class="info">
<th>danyuange</th>
<th>danyuange</th>
<th>danyuange</th>
</tr>
<tr class="warning">
<th>danyuange</th>
<th>danyuange</th>
<th>danyuange</th>
</tr>
<tr class="danger">
<th>danyuange</th>
<th>danyuange</th>
<th>danyuange</th>
</tr>
</tbody>
</table>

效果:

 
3.响应式效果
把内容放在一个class为table-responsive的div中
<table>的class改为“table table-condensed”
在浏览器变小的时候,不会影响表格内容,而是下方多一条滚动条
效果:

Bootstrap入门(2)表格的更多相关文章

  1. Bootstrap入门(四)表格

    Bootstrap入门(四)表格 <table>标签 首先,引入bootstrap的css文件,然后表格内容放在一个class为table的<table>标签中(class=& ...

  2. bootstrap 入门

    bootstrap 入门 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&q ...

  3. Bootstrap入门(十五)组件9:面板组件

    Bootstrap入门(十五)组件9:面板组件 虽然不总是必须,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里.对于这种情况,可以试试面板组件. 1.基本实例 2.带标题的面板 3.情景效果 ...

  4. Bootstrap <基础五>表格

    Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. <thead> 表格 ...

  5. 01.Bootstrap入门

    Bootstrap介绍: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加 ...

  6. Bootstrap入门(二)栅格

    Bootstrap入门(二)栅格 Bootstrap入门(二)栅格 全局CSS样式--栅格 先引入本地的CSS文件(根据自己的文件夹,有不同的引入地址,我是放在一个新建的名为css的文件夹中) con ...

  7. BootStrap入门教程 (一)

    BootStrap入门教程 (一)   2011年,twitter的"一小撮"工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端 ...

  8. Bootstrap入门(三十)JS插件7:警告框

    Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...

  9. Bootstrap入门(二十九)JS插件6:弹出框

    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...

随机推荐

  1. Linux网络课程学习第一天

    第一天上课主要介绍了LINUX系统和Linux课程的情况.了解了开源系统的四大优势,六大特点. 最具有心得的一句话: 学习是件苦差事: 稻盛和夫先生的话也深深激励着我:“工作马马虎虎,只想在兴趣和游戏 ...

  2. python3练习100题——040

    原题链接:http://www.runoob.com/python/python-exercise-example40.html 题目:将一个数组逆序输出. a=[1,2,3,4,5] print a ...

  3. Docker最全教程——从理论到实战(二十二)

    前言 最近正在抽时间编写k8s的相关教程,很是费时,等相关内容初步完成后,再和大家分享.对于k8s,还是上云更为简单.稳定并且节省成本,因此我们需要对主流云服务的容器服务进行了解,以便更好地应用于生产 ...

  4. leetcode - 01

    只出现一次的数字 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现吗? 示例 1: ...

  5. Dijkstra算法依据项目改进版,输出路径

    package dijkstra; import java.util.ArrayList; public class Dijkstra { ; /*private static int[][] Gra ...

  6. 常用phpstorm快捷键

    欢迎提交你经常使用的快捷键 ctrl+j 插入活动代码提示 ctrl+alt+t 当前位置插入环绕代码 alt+insert 生成代码菜单 ctrl+q 查看代码注释 ctrl+d 复制当前行 ctr ...

  7. 避免layui form表单重复触发submit绑定事件

    个人博客 地址:http://www.wenhaofan.com/article/20180927002336 在使用以下代码监听lay-filter为editConfig的提交按钮后,当点击提交按钮 ...

  8. ueditor使用本地保存,自动恢复上次编辑的内容

    个人博客 地址:http://www.wenhaofan.com/article/20180912212800 ueditor默认开启了自动保存至本地的功能,但是依然需要在初始化的时候额外添加代码该功 ...

  9. 番外:Oracle 中关于 Control File 的备份说明

    番外系列说明:该系列所有文章都将作为独立篇章进行知识点讲解,是对其他系列博文进行的补充说明,来自于博客园AskScuti. 主题:关于 Control File 控制文件备份的说明 内容预览:本篇涉及 ...

  10. mybatis(五):源码分析 - 获取boundsql流程