Rumah > hujung hadapan web > html tutorial > 利用Boostrap创建表格实例

利用Boostrap创建表格实例

零下一度
Lepaskan: 2017-06-23 10:05:57
asal
2269 orang telah melayarinya

前面的话

  Bootstrap为我们提供了非常好看且易用的表格样式,利用Boostrap可以快速的创建出不同样式的表格,本文将详细介绍Boostrap表格

 

基本实例

  Boostrap将表格<table>的样式重置如下

1

2

3

4

5

table {

    background-color: transparent;

    border-spacing: 0;

    border-collapse: collapse;

}

Salin selepas log masuk

1

2

3

4

5

6

<table>

  <caption>Optional table caption.</caption>

  <thead><tr>  <th>#</th>  <th>First Name</th>  <th>Last Name</th>  <th>Username</th></tr>

  </thead>

  <tbody><tr>  <th scope="row">1</th>  <td>Mark</td>  <td>Otto</td>  <td>@mdo</td></tr><tr>  <th scope="row">2</th>  <td>Jacob</td>  <td>Thornton</td>  <td>@fat</td></tr><tr>  <th scope="row">3</th>  <td>Larry</td>  <td>the Bird</td>  <td>@twitter</td></tr>

  </tbody></table>

Salin selepas log masuk


  为任意<table>标签添加.table类可以为其赋予基本的样式—少量的内边距(padding)和水平方向的分隔线 

1

2

<table class="table">

  ...</table>

Salin selepas log masuk


 

条纹状表格

  通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式

  [注意]条纹状表格是依赖 :nth-child CSS 选择器实现的,而这一功能不被IE8-支持

1

2

3

.table-striped > tbody > tr:nth-of-type(odd) {

    background-color: #f9f9f9;

}

Salin selepas log masuk

1

2

<table class="table table-striped">

  ...</table>

Salin selepas log masuk


 

带边框表格

  添加 .table-bordered 类为表格和其中的每个单元格增加边框

1

2

<table class="table table-bordered">

  ...</table>

Salin selepas log masuk


 

鼠标悬停

  通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应

1

2

<table class="table table-hover">

  ...</table>

Salin selepas log masuk

1

2

3

.table-hover > tbody > tr:hover {

    background-color: #f5f5f5;

}

Salin selepas log masuk


 

紧缩表格

  通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半

1

2

<table class="table table-condensed">

  ...</table>

Salin selepas log masuk


 

状态类

  通过这些状态类可以为行或单元格设置颜色

1

2

3

4

5

6

Class      描述

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

.success    标识成功或积极的动作

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

.warning    标识警告或需要用户注意

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

Salin selepas log masuk

1

2

3

4

5

<table class="table">

  <thead><tr>  <th>#</th>  <th>Column heading</th>  <th>Column heading</th>  <th>Column heading</th></tr>

  </thead>

  <tbody><tr class="active">  <th scope="row">1</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr><tr class="success">  <th scope="row">2</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr><tr class="info">  <th scope="row">3</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr><tr class="warning">  <th scope="row">4</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr><tr class="danger">  <th scope="row">5</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr><tr>  <th scope="row">6</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr>

  </tbody></table>

Salin selepas log masuk


 

响应式表格

  将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失

1

2

3

<div class="table-responsive">

  <table class="table"><thead>  <tr><th>#</th><th>Table heading</th><th>Table heading</th><th>Table heading</th>  </tr></thead><tbody>  <tr><th scope="row">1</th><td>Table cell</td><td>Table cell</td><td>Table cell</td>  </tr>  <tr><th scope="row">2</th><td>Table cell</td><td>Table cell</td><td>Table cell</td>  </tr>  <tr><th scope="row">3</th><td>Table cell</td><td>Table cell</td><td>Table cell</td>  </tr></tbody>

  </table></div>

Salin selepas log masuk


 

Atas ialah kandungan terperinci 利用Boostrap创建表格实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Isu terkini
Tiada tutorial video tersuai bootstrap
daripada 1970-01-01 08:00:00
0
0
0
Laravel: Masalah menggunakan bootstrap secara setempat
daripada 1970-01-01 08:00:00
0
0
0
html5 - Masalah dengan gaya pengubahsuaian bootstrap
daripada 1970-01-01 08:00:00
0
0
0
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan