bootstrap表格

十月梦想

发布于 2018-08-29 02:59:35

2.3K00

代码可运行

文章被收录于专栏：十月梦想十月梦想

运行总次数：0

代码可运行

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">