Rumah > Artikel > hujung hadapan web > Apakah kelas jadual yang terdapat dalam bootstrap?

Apakah kelas jadual yang terdapat dalam bootstrap?

青灯夜游asal: 2022-01-10 12:05:132669semak imbas

Kelas meja bootstrap ialah: 1. ".table", jadual asas; . ".table-hover", jadual yang diserlahkan ke atas tetikus, dsb.

Persekitaran pengendalian tutorial ini: sistem Windows 7, bootsrap versi 3.3.7, komputer DELL G3

Bootstrap Jadual

Bootstrap menyediakan reka letak yang jelas untuk membuat jadual. Jadual berikut menyenaraikan beberapa elemen jadual yang disokong oleh Bootstrap:

标签

描述

），用来标识表格列。）。内使用。


为表格添加基础样式。

表格标题行的容器元素（

表格主体中的表格行的容器元素（

一组出现在单行上的表格单元格的容器元素（	或	）。
		默认的表格单元格。
		特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在

关于表格存储内容的描述或总结。

Bootstrap menyediakan nama kelas yang berbeza untuk gaya jadual yang berbeza, terutamanya termasuk:

adalah seperti yang ditunjukkan:

Contoh

<table class="table table-striped">
  <caption>条纹表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

Hasilnya adalah seperti berikut:

Apakah kelas jadual yang terdapat dalam bootstrap?

Jadual sempadan

Dengan menambahkan kelas .table-bordered, anda akan melihat bahawa setiap elemen mempunyai sempadan di sekelilingnya dan keseluruhan jadual dibundarkan contoh berikut:

Instance

<table class="table table-bordered">
  <caption>边框表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

Hasilnya adalah seperti berikut:

Apakah kelas jadual yang terdapat dalam bootstrap?

Tuding jadual

Dengan menambahkan kelas .table-hover, latar belakang kelabu muda akan muncul apabila penuding melayang di atas baris, seperti ditunjukkan dalam contoh di bawah Paparan :

Contoh

<table class="table table-hover">
  <caption>悬停表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td>
    </tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td>
    </tr>
  </tbody></table>

Hasilnya adalah seperti berikut:

Apakah kelas jadual yang terdapat dalam bootstrap?

Merapatkan jadual

Dengan menambah kelas .table-condensed , padding dipotong separuh untuk menjadikan jadual kelihatan lebih padat, seperti ditunjukkan dalam contoh di bawah Tunjukkan. Ini berguna apabila anda mahu maklumat anda kelihatan lebih padat.

Instance

<table class="table table-condensed">
  <caption>精简表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
      <td>560001</td></tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
      <td>400003</td></tr>
    <tr>
      <td>Uma</td>
      <td>Pune</td>
      <td>411027</td></tr>
  </tbody></table>

Hasilnya kelihatan seperti ini:

Apakah kelas jadual yang terdapat dalam bootstrap?

Konteks kelas

Kelas konteks yang disenaraikan dalam jadual di bawah membolehkan anda menukar warna latar belakang baris jadual atau sel individu.

类

描述

.table

为任意添加基本样式 (只有横向分隔线) 内添加斑马线形式的条纹 ( IE8 不支持) 内的任一行启用鼠标悬停状态

.table-striped	在
.table-bordered	为所有表格的单元格添加边框
.table-hover	在
.table-condensed	紧凑表格
.table-responsive	响应式表格
.table-bordered	带边框的表格

Jadual asas

Jika anda mahukan jadual asas dengan hanya pelapik dan belahan mendatar, tambah kelas .table, seperti yang ditunjukkan dalam contoh berikut:

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
	<caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

</body>
</html>

Hasilnya adalah seperti berikut Perwakilan:

Apakah kelas jadual yang terdapat dalam bootstrap?

Kelas jadual pilihan

Selain penanda jadual asas dan kelas .table, Terdapat juga kelas yang boleh digunakan untuk menentukan gaya untuk markup. Kelas-kelas ini diperkenalkan kepada anda di bawah.

Jadual berjalur

Dengan menambah kelas .jalur meja anda akan melihat jalur pada baris di dalam

类	描述
.active	对某一特定的行或单元格应用悬停颜色
.success	表示一个成功的或积极的动作
.warning	表示一个需要注意的警告
.danger	表示一个危险的或潜在的负面动作

Kelas ini boleh digunakan untuk

atau

Instance

<table class="table">
  <caption>上下文表格布局</caption>
  <thead>
    <tr>
      <th>产品</th>
      <th>付款日期</th>
      <th>状态</th></tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>产品1</td>
      <td>23/11/2013</td>
      <td>待发货</td></tr>
    <tr class="success">
      <td>产品2</td>
      <td>10/11/2013</td>
      <td>发货中</td></tr>
    <tr class="warning">
      <td>产品3</td>
      <td>20/10/2013</td>
      <td>待确认</td></tr>
    <tr class="danger">
      <td>产品4</td>
      <td>20/10/2013</td>
      <td>已退货</td></tr>
  </tbody></table>

Hasilnya adalah seperti berikut:

Apakah kelas jadual yang terdapat dalam bootstrap?

Responsif Jadual

Dengan membalut sebarang .table dalam kelas .table-responsive, anda boleh membuat jadual menatal secara mendatar untuk menampung peranti kecil (kurang daripada 768px ). Anda tidak akan melihat sebarang perbezaan apabila melihat pada peranti besar yang lebih besar daripada 768px lebar.

Contoh

<div class="table-responsive">
  <table class="table">
    <caption>响应式表格布局</caption>
    <thead>
      <tr>
        <th>产品</th>
        <th>付款日期</th>
        <th>状态</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>产品1</td>
        <td>23/11/2013</td>
        <td>待发货</td></tr>
      <tr>
        <td>产品2</td>
        <td>10/11/2013</td>
        <td>发货中</td></tr>
      <tr>
        <td>产品3</td>
        <td>20/10/2013</td>
        <td>待确认</td></tr>
      <tr>
        <td>产品4</td>
        <td>20/10/2013</td>
        <td>已退货</td></tr>
    </tbody>
  </table></div>

Hasilnya adalah seperti berikut:

Apakah kelas jadual yang terdapat dalam bootstrap?

[Cadangan berkaitan: "tutorial bootstrap 》】

Atas ialah kandungan terperinci Apakah kelas jadual yang terdapat dalam bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

bootstrap 指针 class 内边距 padding table tbody td tr th

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk menyatakan tidak sama dalam javascriptArtikel seterusnya：Bagaimana untuk menyatakan tidak sama dalam javascript

Artikel berkaitan

Lihat lagi