2017-04-03 10:04:33 yang5726685 阅读数 3818

Bootstrap表格样式



Bootstrap表格样式分类


  1. 基础样式.table


2.带背条纹表格.table-striped


3.带边框.table-border


4.悬停.table-hover


5.紧凑.table-condensed


6.行样式 .active .success .info


7.响应式表格




具体使用操作


学习如何使用基础表格样式、带背条纹表格样式、带边框表格样式、悬停表格样式、紧凑表格样式以及行表格样式。


1)新建一个web项目ch05


2)将先前做的ch04的css和js文件模版导入到ch05


table1.png


3)复制ch04中demo01.html的头文件


table2.png


4)在ch05中新建一个demo01.html,接着再打开ch05中的demo01.html,将移动设备优和css文件先导入到头文件(粘贴过来就行了)

<meta name="viewport"

//移动设备优

content="width=device-width,initial-scale=1, user-scalable=no”>

<title>demo01></title>

//css文件

<link rel="stylesheet" href="css/bootstrap.min.css"/>


5)我们先写一个简单的表格


<body>

<div class="container">

<table>

<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

</table>

</div>

</body>


6)我们直接运行,可以看bootstrap是没有设全局的table样式的。


table3.png


7)在table上加一个class="table",bootstrap定义了一个table,table是一个基础的表格样式。


<table class="table table-striped">


8)我们再来看运行效果,这就是一个基础的bootstrap表格样式。但我们发表这个表格占满了整个屏幕也就是整个container了。


table4.png


9)我们将屏幕缩小,可以看到它会依照你的分辨率大小来自适应。


table5.png


10)接着,我们再来学习“带背条纹表格样式.table-striped”。


(注意:我们在给表格样式的时候,一般是先加基础样式再加其它样式。)


<h1>带条纹</h1>

<table class="table table-striped">

<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

</table>


11)运行效果,这样的话每隔一行就会不同的颜色,也方便进行查看。


table6.png


12)接下来,我们再来看一个“带边框的表格样式.table-border”。


(注意:“带背条纹表格样式.table-striped”和“带边框的表格样式.table-border”可以放在一起使用。)


<h1>带边框</h1>

<table class="table table-bordered table-striped">

<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

</table>


13)运行效果


table7.png


14)接着,我们学习使用“悬停.table-hover”,代码如下:


<h1>悬停</h1>

<table class="table table-bordered table-striped table-hover">

<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

</table>


15)运行效果,当鼠标移动到某一行时,这一行显示成灰色。


table8.png


16)接着,我们再来学习“紧凑.table-condensed”


<h1>坚凑</h1>

<table class="table table-bordered  table-condensed">

<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

</table>

17)运行效果,紧凑型表格也是自适应分辨率,唯一不同的就是内容离边框相对较近。


table9.png


table10.png


18)我们将悬停的表格样式的宽度设为600像素,这个只是边距做了不同的设置而已。


19)运行结果


table11.png


20)然后,我们再来学习行样式.active .success .info


<table class="table table-bordered ">

<tr class="info"><th>序号</th><th>姓名</th><th>年龄</th></tr>

<tr class="success"><td>1</td><td>张三</td><td>22</td></tr>

<tr class="warning"><td>1</td><td>张三</td><td>22</td></tr>

<tr class="danger"><td>1</td><td>张三</td><td>22</td></tr>

<tr class="active"><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

</table>


21)运行效果,表头是“info”,“success”是绿色表示成功率,“warning”是一个警告,用黄色表示。“danger”是危险用红色表示。这就是设置这些行的颜色,你也不需要自己去定义。


table12.png


22)最后我们再学习一个表格样式“响应式表格”。“响应式表格”应该注意的是,我们一定要将它放到一个div里边去。div选择器的样式我们叫‘table-responsive’。


<hr />

<div class="row">

<div class="table-responsive">

<table class="table table-bordered table-striped table-hover">

<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

</table>

</div>

</div>


23)运行效果,“响应式表格”就是通过媒体查询来判断你这个像素是多少,从而设置表格的大小。


table13.png


table14.png


24)或者我们可以再设置一个样式


<hr/>

   <div class="row">

<div class="col-sm-4">

<div class="table-responsive">

<table class="table table-bordered table-striped table-hover">

<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>

     <tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

<tr><td>1</td><td>张三</td><td>22</td></tr>

</table>

</div>

</div>

   </div>


25)运行效果,到小屏幕上就是这样的一个分辨率是自动的


table15.png

table16.png


2018-03-06 09:57:31 ixygj197875 阅读数 659

只需为任意的 <table> 元素应用 .table 类,即可使用表格的默认样式。Bootstrap中表格的默认样式相当简单,它仅仅在每个 <td> 上方添加了一个边框。如:

  1. <table class="table">
  2.   <thead>
  3.     <tr>
  4.       <th>#</th>
  5.       <th>First Name</th>
  6.       <th>Last Name</th>
  7.       <th>Username</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <td>1</td>
  13.       <td>Mark</td>
  14.       <td>Otto</td>
  15.       <td>@mdo</td>
  16.     </tr>
  17.     <tr>
  18.       <td>2</td>
  19.       <td>Jacob</td>
  20.       <td>Thornton</td>
  21.       <td>@fat</td>
  22.     </tr>
  23.     <tr>
  24.       <td>3</td>
  25.       <td>Larry</td>
  26.       <td>the Bird</td>
  27.       <td>@twitter</td>
  28.     </tr>
  29.   </tbody>
  30. </table>

效果如图 3‑22所示:

Bootstrap表格的默认样式图3-22 Bootstrap表格的默认样式

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

2018-03-06 09:58:06 ixygj197875 阅读数 9474

除了 .table 类之外,Bootstrap还为表格提供了4个辅助类 .table-striped、.table-bordered、.table-hover 和 .table-condensed,分别用来实现带条纹背景的表格、带边框的表格、带悬停效果的表格、紧凑的表格。这 4个类之间互不排斥,可以根据需要,为一个表格应用多个类。

1、带条纹背景的表格

为 <table> 添加 .table-striped 类,就可以为 <tbody> 中的表格行添加条纹背景,即实现表格数据行的隔行换色效果。如:

  1. <table class="table table-striped">
  2.   <thead>
  3.     <tr>
  4.       <th>#</th>
  5.       <th>First Name</th>
  6.       <th>Last Name</th>
  7.       <th>Username</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <td>1</td>
  13.       <td>Mark</td>
  14.       <td>Otto</td>
  15.       <td>@mdo</td>
  16.     </tr>
  17.     <tr>
  18.       <td>2</td>
  19.       <td>Jacob</td>
  20.       <td>Thornton</td>
  21.       <td>@fat</td>
  22.     </tr>
  23.     <tr>
  24.       <td>3</td>
  25.       <td>Larry</td>
  26.       <td>the Bird</td>
  27.       <td>@twitter</td>
  28.     </tr>
  29.   </tbody>
  30. </table>

效果如图 3‑23所示:

Bootstrap带条纹背景的表格图3-23 Bootstrap带条纹背景的表格

注意:这个效果是通过 :nth-child 选择器实现的,但 IE8 及以下的版本不支持这个选择器,需要考虑兼容性处理方案。

2、带边框的表格

为 <table> 添加 .table-bordered 类,就可以为所有单元格加上边框,也同时为整个表格添加圆角边框效果。如:

  1. <table class="table table-bordered">
  2.   <thead>
  3.     <tr>
  4.       <th>#</th>
  5.       <th>First Name</th>
  6.       <th>Last Name</th>
  7.       <th>Username</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <td rowspan="2">1</td>
  13.       <td>Mark</td>
  14.       <td>Otto</td>
  15.       <td>@mdo</td>
  16.     </tr>
  17.     <tr>
  18.       <td>Mark</td>
  19.       <td>Otto</td>
  20.       <td>@TwBootstrap</td>
  21.     </tr>
  22.     <tr>
  23.       <td>2</td>
  24.       <td>Jacob</td>
  25.       <td>Thornton</td>
  26.       <td>@fat</td>
  27.     </tr>
  28.     <tr>
  29.       <td>3</td>
  30.       <td colspan="2">Larry the Bird</td>
  31.       <td>@twitter</td>
  32.     </tr>
  33.   </tbody>
  34. </table>

效果如图 3‑24所示:

Boostrap带边框的表格图3-24 Boostrap带边框的表格

3、带悬停效果的表格

为 <table> 添加 .table-hover 类,就可以为表格的数据行添加鼠标悬停效果。当鼠标经过数据行时,会为该行添加浅灰色背景。如:

  1. <table class="table table-hover">
  2.   <thead>
  3.     <tr>
  4.       <th>#</th>
  5.       <th>First Name</th>
  6.       <th>Last Name</th>
  7.       <th>Username</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <td>1</td>
  13.       <td>Mark</td>
  14.       <td>Otto</td>
  15.       <td>@mdo</td>
  16.     </tr>
  17.     <tr>
  18.       <td>2</td>
  19.       <td>Jacob</td>
  20.       <td>Thornton</td>
  21.       <td>@fat</td>
  22.     </tr>
  23.     <tr>
  24.       <td>3</td>
  25.       <td colspan="2">Larry the Bird</td>
  26.       <td>@twitter</td>
  27.     </tr>
  28.   </tbody>
  29. </table>

效果如图 3‑25所示:

Boostrap带悬停修改的表格图3-25 Boostrap带悬停修改的表格

4、紧凑的表格

为 <table> 添加 .table-condensed 类,所有单元格的 padding 都会减半(从8px减到4px),让表格更加紧凑。这种样式适合信息密集的情况。如:

  1. <table class="table table-condensed">
  2.   <thead>
  3.     <tr>
  4.       <th>#</th>
  5.       <th>First Name</th>
  6.       <th>Last Name</th>
  7.       <th>Username</th>
  8.     </tr>
  9.   </thead>
  10.   <tbody>
  11.     <tr>
  12.       <td>1</td>
  13.       <td>Mark</td>
  14.       <td>Otto</td>
  15.       <td>@mdo</td>
  16.     </tr>
  17.     <tr>
  18.       <td>2</td>
  19.       <td>Jacob</td>
  20.       <td>Thornton</td>
  21.       <td>@fat</td>
  22.     </tr>
  23.     <tr>
  24.       <td>3</td>
  25.       <td colspan="2">Larry the Bird</td>
  26.       <td>@twitter</td>
  27.     </tr>
  28.   </tbody>
  29. </table>

效果如图 3‑26所示:

Boostrap紧凑的表格图3-26 Boostrap紧凑的表格

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

2017-08-29 09:01:21 m0_37836194 阅读数 318

1、table-striped:斑马线表格

2、table-bordered:带边框的表格

3、table-hover:鼠标悬停高亮的表格

4、table-condensed:紧凑型表格(单元格的内距由8px调至5px。)

5、table-responsive:响应式表格(当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失)

6、“.table”主要有三个作用:

  给表格设置了margin-bottom:20px以及设置单元内距

  在thead底部设置了一个2px的浅灰实线

  每个单元格顶部设置了一个1px的浅灰实线

复制代码
<table class="table">
   <thead>
     <tr>
       <th>表格标题</th>
       <th>表格标题</th>
       <th>表格标题</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>
复制代码
2018-10-17 17:00:51 ShowTime_Shawn 阅读数 1537

 

目录

bootstrap--表格(table的各种样式)


Bootstrap 表格类样式

☑  .table:基础表格,为任意 <table> 添加基本样式 (只有横向分隔线)

☑  .table-striped:斑马线表格

☑  .table-bordered:带边框的表格

☑  .table-hover:鼠标悬停高亮的表格

☑  .table-condensed:紧凑型表格

 .table-responsive:响应式表格

1、“.table”主要有三个作用:

  ☑  给表格设置了单元内距及底部边距margin-bottom:20px

  ☑  在thead底部设置了一个2px的浅灰实线

  ☑  每个单元格顶部设置了一个1px的浅灰实线

样式图如下:

2、table-striped:斑马线表格

样式图如下:

3、table-bordered:带边框的表格

样式图如下:

4、table-hover:鼠标悬停高亮的表格

样式图如下:

5、table-condensed:紧凑型表格(单元格的内距由8px调至5px。)

样式图如下:

6、table-responsive:响应式表格(当浏览器可视区域小于768px时,表格底部会出现水平滚动条;可视区域大于768px时,表格底部水平滚动条就会消失)

样式图如下:

7、综合应用

样式图如下:

源代码如下:

<div class="container">
	<h2>表格</h2>
	<p>联合使用所有表格类:</p>                                          
	<table class="table table-striped table-bordered table-hover table-condensed">
		<thead>
			<tr>
				<th>#</th>
				<th>Firstname</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>Anna</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Debbie</td>
			</tr>
			<tr>
				<td>3</td>
				<td>John</td>
			</tr>
		</tbody>
	</table>
</div>

Bootstrap的JS,CSS等我就不贴出来了,自行引入,具体可参考Bootstrap 中文网

8、状态类:这些状态类可以为行或单元格设置颜色。

Class

描述

.active

鼠标悬停在行或单元格上时所设置的颜色

.info

标识普通的提示信息或动作

.success

标识成功或积极的动作

.warning

标识警告或需要用户注意

.danger

标识危险或潜在的带来负面影响的动作

 

 

bootstrap-表格样式

阅读数 290

没有更多推荐了,返回首页