Bootstrap CSS布局之表格_javascript技巧

表格组件中，BootStrap提供了
1种基础.table样式
4种附加样式(.table-striped/.table-bordered/.table-hover/.table-condensed)
1种支持响应式布局的.table-responsive

table样式

//源码
table {
 background-color: transparent;
}
caption {
 padding-top: 8px;
 padding-bottom: 8px;
 color: #777;
 text-align: left;
}
th {
 text-align: left;
}
.table {
 width: 100%;
 max-width: 100%;
 margin-bottom: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
 padding: 8px;
 line-height: 1.42857143;
 vertical-align: top;
 border-top: 1px solid #ddd;
}
.table > thead > tr > th {
 vertical-align: bottom;
 border-bottom: 2px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
 border-top: 0;
}
.table > tbody + tbody {
 border-top: 2px solid #ddd;
}
.table .table {
 background-color: #fff;
}

table.striped样式–带背景条纹的表格

//源码
.table-striped > tbody > tr:nth-of-type(odd) {
 background-color: #f9f9f9;
}

table.bordered样式–带边框的表格

为表格所有的单元格提供1条1像素宽的边框

//源码
.table-bordered {
 border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
 border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
 border-bottom-width: 2px;
}

table.hover样式–鼠标悬停高亮的表格

table.condensed样式–紧凑型的表格

//源码
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
 padding: 5px;
}

行级元素样式

Bootstrap为表格的tr元素提供了5种额外的样式，用于控制tr的背景颜色。active、success、info、warning、danger

//源码
.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
 background-color: #f5f5f5;
}
.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
 background-color: #e8e8e8;
}
.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th {
 background-color: #dff0d8;
}
.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr.success:hover > th {
 background-color: #d0e9c6;
}
.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
 background-color: #d9edf7;
}
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th {
 background-color: #c4e3f3;
}
.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
 background-color: #fcf8e3;
}
.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th {
 background-color: #faf2cc;
}
.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
 background-color: #f2dede;
}
.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th {
 background-color: #ebcccc;
}

响应式表格

随着响应式设计的大量需求，Bootstrap为表格提供了一个响应式设计的容器(.table-responsive),将.table-responsive样式包装在.table样式外部即可创建响应式表格
在小屏幕(<768px)水平滚动，大屏幕上水平滚动条消失

<div class="table-responsive">
 <table class="table">
 </table>
</div>

//源码
.table-responsive {
 min-height: .01%;
 overflow-x: auto;
}
//把原有.table样式得底部外边距margin-bottom从20px改成了0px，目的是消除滚动条带来的上下高度差
//并在.table-responsive样式上设置了一个margin-bottom:15px,避免和容器外部的下一个元素重叠
@media screen and (max-width: 767px) {
 .table-responsive {
 width: 100%;
 margin-bottom: 15px;
 overflow-y: hidden;
 -ms-overflow-style: -ms-autohiding-scrollbar;
 border: 1px solid #ddd;
 }
 .table-responsive > .table {
 margin-bottom: 0;
 }
 .table-responsive > .table > thead > tr > th,
 .table-responsive > .table > tbody > tr > th,
 .table-responsive > .table > tfoot > tr > th,
 .table-responsive > .table > thead > tr > td,
 .table-responsive > .table > tbody > tr > td,
 .table-responsive > .table > tfoot > tr > td {
 white-space: nowrap;
 }
 .table-responsive > .table-bordered {
 border: 0;
 }
 //可以看到table-responsive给自己加了一个1px的外边框，如果在table上在使用table-bordered样式得话，就会和表格的外边框重合，就会变粗，所以进行了以下代码的编写
 .table-responsive > .table-bordered > thead > tr > th:first-child,
 .table-responsive > .table-bordered > tbody > tr > th:first-child,
 .table-responsive > .table-bordered > tfoot > tr > th:first-child,
 .table-responsive > .table-bordered > thead > tr > td:first-child,
 .table-responsive > .table-bordered > tbody > tr > td:first-child,
 .table-responsive > .table-bordered > tfoot > tr > td:first-child {
 border-left: 0;//所有tr的第一个单元格(最左边的一列)的左边框设置为0px
 }
 .table-responsive > .table-bordered > thead > tr > th:last-child,
 .table-responsive > .table-bordered > tbody > tr > th:last-child,
 .table-responsive > .table-bordered > tfoot > tr > th:last-child,
 .table-responsive > .table-bordered > thead > tr > td:last-child,
 .table-responsive > .table-bordered > tbody > tr > td:last-child,
 .table-responsive > .table-bordered > tfoot > tr > td:last-child {
 border-right: 0;//所有tr的最后一个单元格(最右边的一列)的左边框设置为0px
 }
 .table-responsive > .table-bordered > tbody > tr:last-child > th,
 .table-responsive > .table-bordered > tfoot > tr:last-child > th,
 .table-responsive > .table-bordered > tbody > tr:last-child > td,
 .table-responsive > .table-bordered > tfoot > tr:last-child > td {
 border-bottom: 0;//最后一行tr里的单元格的底部边框设置为0px
 }
}

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索bootstrap
， 表格
CSS布局
bootstrap布局技巧、bootstrap css 技巧、css布局技巧、css3布局技巧、css布局高级技巧，以便于您获取更多的相关知识。

时间： 2024-08-02 06:36:39

Bootstrap CSS布局之表格_javascript技巧的相关文章

Bootstrap CSS布局之图像_javascript技巧

本文大家分享了Bootstrap CSS布局之图像,供大家参考,具体内容如下 img-rounded.img-circle.img-thumbnail(缩放图模式) //源码 img { vertical-align: middle; } .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a >

Bootstrap CSS布局之列表_javascript技巧

本文实例为大家分享了Bootstrap CSS布局中的列表布局,供大家参考,具体内容如下 列表 普通列表ul li 有序列表ol li 去点列表.list-unstyled 内联列表.list-inline 定义列表dl dt dd 水平定义列表dl-horizontal ul, ol { margin-top: 0; margin-bottom: 10px; } ul ul, ol ul, ul ol, ol ol { margin-bottom: 0; } 普通列表ul li 有序列表ol

Bootstrap CSS布局之代码_javascript技巧

Bootstrap对代码显示提供了三种方式:内联代码 1.使用 元素显示单行内联代码 内联代码主要是设置code元素的背景颜色和其内部的文字颜色. //用法 <code><body></body></code> //源码 code { padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; } 2.使用 元素显示用户输入代

Bootstrap CSS布局之按钮_javascript技巧

按钮是任何系统都不能缺少的组件,设置到按钮的大小.颜色.状态等. //btn源码 .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-acti

JS组件Bootstrap Table布局详解_javascript技巧

Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 表格类下表样式可用于表格中: <tr>, <th> 和 <td> 类下表的类可用于表格的行或者单元格: 基本的表格 如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示: <div class="row"> <table class="table"&

Bootstrap CSS布局之表单_javascript技巧

1. 表单 表单是html网页交互很重要的部分,同时也是BootSTrap框架中的核心内容,表单提供了丰富的样式(基础.内联.横向) 表单的元素 input textarea select checkbox radio(checkbox和radio是input的特殊类型) 其他标签 form fieldset legend 1.1.基础表单 <!--基础表单: 1.向父 <form> 元素添加 role="form". 2.把标签label和控件放在一个带有 clas

Bootstrap中CSS的使用方法_javascript技巧

Bootstrap 使用了一些 HTML5 元素和 CSS 属性,所以需要使用 HTML5 文档类型. <!DOCTYPE html> <html lang="zh-CN"> ... </html> 为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示: <meta name="viewport" content=&quo

Bootstrap每天必学之表格_javascript技巧

本文主要讲解的是表格,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的各种列表的展示,有时候也会因为用户或者老板的需求而感到头疼.下面我们来看一下,Bootstrap已经为我们准备那些类型的表格呢?如下所示: 1.基本案例 2.条纹状表格 3.带边框的表格 4.鼠标悬停 5.紧缩表格 6.状态class 7.响应式表格 8.总结 基本案例  为任意<table>标签添加.table可以为其赋予基本的样式-少量的内补(padding)和水平方向的分隔线.这种方式看起来很多余!?但是

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

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