Apakah gaya meja bootstrap?

Terdapat 7 gaya jadual: 1. Gaya ".meja", yang boleh mentakrifkan jadual asas, dengan hanya garisan pembahagi mendatar; 2. Gaya ".jalur meja", yang boleh mentakrifkan jadual lintasan zebra, dengan garis cetek setiap jadual lain Warna latar belakang kelabu; 3. gaya ".table-bordered", tambahkan gaya sempadan pada semua sel jadual, dsb.

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

Gaya jadual Bootstrap

☑ .jadual: Jadual asas, tambah gaya asas (hanya pemisah mendatar) pada mana-mana

☑ .berjalur meja: meja berjalur zebra

☑ .bersempadan meja: meja dengan sempadan

☑ .meja-legar: tetikus tuding Meja yang diserlahkan

☑ .meja pekat: meja padat

☑ .table-responsif: meja responsif

☑ Jadual kontekstual

Berikut ialah pengenalan ringkas kepada gaya jadual di atas:

1 >Dalam Bootstrap, jadual asas dikawal melalui nama kelas ".table". Jika anda tidak menambah sebarang nama kelas pada elemen Untuk mendapatkan jadual asas, kita hanya perlu menambah nama kelas ".table" pada elemen

>

                                                                                                                                                    

基础表格

省份	城市
广东	深圳
广西	桂林
海南	三亚

".table" terutamanya mempunyai tiga fungsi:

Tetapkan margin-bawah:20px untuk jadual dan tetapkan sel padding

Garis pepejal kelabu muda 2px ditetapkan di bahagian bawah ted

• Garis pepejal kelabu muda 1px ditetapkan di bahagian atas setiap sel
2. Jadual berjalur

• Kadang-kadang untuk menjadikan jadual lebih mudah dibaca, jadual perlu dibuat serupa dengan kesan lintasan kuda belang. Ringkasnya, ia adalah untuk memberikan jadual kesan jalur latar belakang. Tidak sukar untuk mencapai kesan jadual ini dalam Bootstrap Anda hanya perlu menambah nama kelas ".table-striped" berdasarkan :

  Gambar Kesan:

  Berbanding dengan jadual asas, kesannya hanyalah terdapat warna latar belakang kelabu muda dalam badan setiap baris yang lain. Prinsip pelaksanaan juga sangat mudah, menggunakan pemilih struktur ":nth-child" CSS3 untuk melaksanakannya, jadi untuk pelayar IE8 dan ke bawah, tiada kesan jalur latar belakang.
  3. Jadual Sempadan

  

  Jadual asas hanya membenarkan sempadan dalam sebahagian jadual, tetapi kadangkala keseluruhan jadual perlu mempunyai kesan sempadan. Untuk tujuan praktikal, Bootstrap juga mempertimbangkan kesan jadual ini, iaitu, semua sel mempunyai sempadan 1px.
  Penggunaan jadual bersempadan dalam Bootstrap adalah serupa dengan penggunaan jadual lintasan zebra Anda hanya perlu menambah nama kelas ".table-bordered" pada jadual asas Tersedia:

  Rendering:

  4. Tuding jadual

  Apabila tetikus melayang Di sana ialah warna latar belakang sorotan pada baris jadual sedemikian menjadikan orang ramai kelihatan selesa dan sentiasa memberitahu pengguna baris data dalam jadual yang sedang dibaca. Bootstrap tidak mengecewakan anda Ia juga mengambil kira kesan ini dan memberikan nama kelas ".table-hover" untuk mencapai kesan jadual ini.

  Jadual yang diserlahkan dengan tuding tetikus juga mudah digunakan Anda hanya perlu menambah nama kelas "table-hover" pada elemen >

  Rendering:

  Kesan penyerlahan tuding tetikus dicapai terutamanya melalui acara "legar" Warna latar belakang ke dan td apabila "tr: ​​hover". ditetapkan untuk warna baru.
  Nota: Sebenarnya, jadual yang diserlahkan hover tetikus boleh dicampur dengan jadual Bootstrap yang lain. Ringkasnya, selagi anda mahu jadual anda mempunyai kesan sorotan hover, anda hanya perlu menambah nama kelas "table-hover" pada jadual. Sebagai contoh, gabungkan beberapa jadual yang diperkenalkan sebelum ini:

  5. Jadual kontekstual

  Tambah gaya pada tr dan td untuk menambah gaya pada baris atau sel Tambah warna latar belakang gaya yang ditentukan ke grid untuk menyerlahkan konteks Gaya yang biasa digunakan termasuk aktif, kejayaan, maklumat, bahaya dan amaran. Seperti yang ditunjukkan di bawah:

  Rendering:

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

  6. Borang responsif

  <table class="table">
    <caption>上下文表格布局</caption>
    <thead>
      <tr>
        <th>省份</th>
        <th>省会</th>
        <th>地级市数量</th></tr>
    </thead>
    <tbody>
      <tr class="active">
        <td>福建</td>
        <td>福州</td>
        <td>9</td></tr>
      <tr class="success">
        <td>广东</td>
        <td>广州</td>
        <td>21</td></tr>
      <tr class="warning">
        <td>广西</td>
        <td>南宁</td>
        <td>14</td></tr>
      <tr class="danger">
        <td>海南</td>
        <td>海口</td>
        <td>4</td></tr>
    </tbody>
  </table>

  随着各种手持设备的出现，要想让你的Web页面适合千罗万像的设备浏览，响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果，将其称为响应式表格。

  Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将

  置于这个容器当中，这样表格也就具有响应式效果。

  Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。示例如下：

  <div class="table-responsive">
  <table class="table table-bordered">
     …
  </table>
  </div>

  七、紧凑型表格：

  何谓紧凑型表格，简单理解，就是单元格没内距或者内距较其他表格的内距更小。换句话说，要实现紧凑型表格只需要重置表格单元格的内距padding的值。那么在Bootstrap中，通过类名“table-condensed”重置了单元格内距值。

  紧凑型表格的运用，也只是需要在

  基础上添加类名“table-condensed”：

  <table class="table table-condensed">

  Bootstrap中紧凑型的表格与基础表格差别不大，因为只是将单元格的内距由8px调至5px。

  更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

Atas ialah kandungan terperinci Apakah gaya meja bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!