bootstrap表格

bootstrap提供了几种表格的样式:

条纹表格.table-striped(作用在table的class类名),实现隔行换色

<table class="table table-striped ">
<tbody><thead>条纹表格</thead><tr>
<td>第一行1</td>
<td>第一行2</td>
<td>第一行3</td>
</tr>
<tr >
<td>第二行1</td>
<td>第二行2</td>
<td>第二行3</td>
</tr
<tr >
<td>第三行1</td>
<td>第三行2</td>
<td>第三行3</td>
</tr></tbody>
</table>

框表格.table-bordered(作用在table的class类名)

<table class="table table-bordered ">
<thead>边框表格</thead>
<tbody><tr class="info">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr class="success">
<td>1</td>
<td>2</td>
<td>3</td>
</tr></tbody>
</table>

状态的class类名加载表格的tr里,bootstrap提供了几种状态:success(成功绿),info(信息蓝),warning(警告橙),danger(危险红),实现表格的行出现相应颜色,成功绿的实现(<tr class="success"></tr>)

<table class="table table-bordered ">
<thead>状态+边框表格</thead>
<tbody><tr class="info">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr class="success">
<td>1</td>
<td>2</td>
<td>3</td>
</tr></tbody>
</table>

鼠标悬停(table-hover)作用在table上,当滑过某行表格颜色加重,类似css的hover选择器,加重原来颜色,这就是悬停

<table class="table table-bordered table-hover ">
<thead>悬停+状态+边框表格</thead>
<tbody><tr class="success">
<td>第一行1</td>
<td>第一行2</td>
<td>第一行3</td>
</tr>
<tr class="danger">
<td>第二行1</td>
<td>第二行2</td>
<td>第二行3</td>
</tr>
<tr class="warning active">
<td>第三行1</td>
<td>第三行2</td>
<td >第三行3</td>
</tr></tbody>
</table>

此外,bootstrap还提供了一种active状态,就是默认鼠标悬停在某行的表格上,效果类似table-hover.使用方法和之前的状态表格一样作用在tr上进行相应的class类名取为active.


表格的响应式

表格响应式的实现比较简单,在作用表格的父级元素class属性加上.table-responsive属性,可以实现下述表格的响应式,当窗口尺寸小于768px则出现滚动条

响应式表格的实现:

<div class=" table-responsive">
		<table class="table table-hover">
		<thead>响应式表格:给父级class加table-responsive,小于768px出现边框</thead>
		<tbody>
			<tr class="info">
				<td>姓名</td>
				<td>年龄</td>
				<td>性别</td>
				<td>职业</td>
				<td>收入</td>
			</tr>
			<tr class="success">
				<td>张三</td>
				<td>26</td>
				<td>男</td>
				<td>经理</td>
				<td>22万</td>
			</tr>
			<tr class="danger">
				<td>赵六</td>
				<td>24</td>
				<td>女</td>
				<td>女秘</td>
				<td>18万</td>
			</tr>
		</tbody>
	</table>
	</div>

注意在需要进行引入jquery和bootstrap库,bootstrap的某些js效果依靠于jquery因此写入的时候先进行引入jquery和bootstrap,之前提过cdn方式的引入,下面重新说一遍.

cdn方式引入bootstrap,引入之前需要先进行引入jquery

<!-- 最新版本的 Bootstrap 核心 CSS 文件 --> 
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
 integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

CSS魔法堂:display:none与visibility:hidden的恩怨情仇

 还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而vi...

2253
来自专栏前端儿

常见的几种 CSS 水平垂直居中解决办法

用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:aut...

1471
来自专栏CSDN技术头条

HTML基础知识总结

几个工具: IETester:多版本IE测试 Expression Web DreamWeaver 美工页面 XHTML:符合XML标准的HTML。 标签...

2665
来自专栏cnblogs

如何写好CSS系列之表单(form)

     表单模块可以分为两部分:一是表单的布局,也就是规范表单元素单元的排列位置;二是表单元素,如:输入框、单选、复选、列表组件、搜索组件等,由于列表组件、搜...

2619
来自专栏DeveWork

解决Chrome或其它WebKit浏览器input和textarea的黄色/蓝色边框问题

之前在折腾主题的时候发现一个很怪的现象,在Chrome浏览器下,输入框有一个黄色的边框;而在其它WebKit浏览器(如Jeff使用的傲游浏览器)下,输入框的颜色...

2966
来自专栏行者常至

002.css常用基础知识点

CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版...

931
来自专栏前端萌媛的成长之路

position有几种,absolute和relative的区别

1642
来自专栏LIN_ZONE

css 使元素居中

<div style="text-align:center;">居中显示</div>

1334
来自专栏Google Dart

AngularDart Material Design 菜单 顶

材质菜单基于MenuModel对象呈现菜单。 此菜单包含material-popup中的material-list和material-button,其文本或图标...

942
来自专栏卡少编程之旅

css黑魔法简略版

30711

扫码关注云+社区

领取腾讯云代金券