Bootstrap mesti belajar jadual setiap day_javascript kemahiran

Artikel ini terutamanya menerangkan jadual Ini sebenarnya tidak asing kepada orang yang telah melakukan laman web, dan ia boleh dikatakan sebagai paparan yang paling biasa digunakan untuk pelbagai senarai sakit kepala. Mari kita lihat apakah jenis jadual yang telah disediakan oleh Bootstrap untuk kita? Seperti yang ditunjukkan di bawah:

1.Kes asas
2. Meja berjalur
3. Meja dengan sempadan
4. Tetikus
5. Jadual mampatan
6. Kelas status
7. Borang responsif
8. Ringkasan

Kes asas
Menambahkan .table pada mana-mana teg f5d188ed2c074f8b944552db028f98a1 memberikannya gaya asas—sebilangan kecil pelapik dan pembahagi mendatar. Pendekatan ini kelihatan sangat berlebihan! ? Walau bagaimanapun, kami merasakan bahawa elemen jadual digunakan secara meluas, dan jika kami memberikannya gaya lalai, ia mungkin menjejaskan pemalam seperti pemilihan kalendar dan tarikh, jadi kami memilih untuk memisahkan gayanya.

Contoh Jadual ringkas

 <div class="container">
 <table class="table"> 
  <caption>Table基本案例</caption> 
  <thead> 
  <tr> 
   <th>First Name</th> 
   <th>Last Name</th>
   <th>User Name</th> 
  </tr> 
  </thead> 
  <tbody> 
  <tr> 
   <td>aehyok</td> 
   <td>leo</td> 
   <td>@aehyok</td> 
  </tr>
  <tr> 
   <td>lynn</td> 
   <td>thl</td> 
   <td>@lynn</td> 
  </tr>
  </tbody> 
 </table> 
 </div>

Meja berjalur

Gunakan .jalur meja untuk menambah gaya jalur zebra pada semua dalam 92cee25da80fac49f6fb6eec5fd2c22a.
Tambahkan satu lagi kelas gaya
pada elemen jadual dalam contoh di atas 850aad7c9803f65863edd23ef123b2cc
Melihat kepada kesan semasa, masih terdapat sedikit perubahan.

Meja dengan sempadan
Gunakan .table-bordered untuk menambah jidar pada jadual dan setiap sel di dalamnya.
Atau tambahkan kelas gaya lain
pada elemen jadual dalam contoh pertama 8e6a5157b5b720a6b30bc7886b8a1bae

Mouseover
Gunakan .table-hover untuk membuat setiap baris dalam 92cee25da80fac49f6fb6eec5fd2c22a
95df9d71803495963fc38c12f79bae2c
Alihkan tetikus ke garisan itu dan ia akan memberi kesan

Meja padat
Gunakan .table-condensed untuk menjadikan meja lebih padat, dan padding dalam sel akan berkurangan separuh.
87aa75fe06d344e98f50958dc170282b
Kesan ini tidak begitu jelas, terutamanya kerana pelapik kandungan dalam sel dikurangkan separuh.

Kelas Status
Warna boleh ditetapkan untuk sel berlesen melalui kelas status ini.

<table class="table table-condensed"> 
  <caption>Table</caption> 
  <thead> 
  <tr> 
   <th>#</th>
   <th>First Name</th> 
   <th>Last Name</th>
   <th>User Name</th> 
  </tr> 
  </thead> 
  <tbody> 
  <tr class="active"> 
   <td>1</td>
   <td>aehyok</td> 
   <td>leo</td> 
   <td>@aehyok</td> 
  </tr>
  <tr class="success"> 
   <td>2</td>
   <td>lynn</td> 
   <td>thl</td> 
   <td>@lynn</td> 
  </tr>
  <tr class="warning"> 
   <td>3</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr class="danger"> 
   <td>4</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr > 
   <td class="success">5</td> 
   <td class="danger">Amdy</td> 
   <td class="warning">Amy</td> 
   <td class="active">@Amdy</td> 
  </tr>
  </tbody> 
 </table> 

Borang responsif
Balut mana-mana .table dalam .table-responsive untuk mencipta jadual responsif yang akan menatal secara mendatar pada peranti skrin kecil (kurang daripada 768px). Apabila skrin lebih besar daripada lebar 768px, bar skrol mendatar hilang. 

<div class="table-responsive">
 <table class="table"> 
  <caption>Table</caption> 
  <thead> 
  <tr> 
   <th>#</th>
   <th>First Name</th> 
   <th>Last Name</th>
   <th>User Name</th> 
  </tr> 
  </thead> 
  <tbody> 
  <tr class="active"> 
   <td>1</td>
   <td>aehyok</td> 
   <td>leo</td> 
   <td>@aehyok</td> 
  </tr>
  <tr class="success"> 
   <td>2</td>
   <td>lynn</td> 
   <td>thl</td> 
   <td>@lynn</td> 
  </tr>
  <tr class="warning"> 
   <td>3</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr class="danger"> 
   <td>4</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr > 
   <td class="success">5</td> 
   <td class="danger">Amdy</td> 
   <td class="warning">Amy</td> 
   <td class="active">@Amdy</td> 
  </tr>
  </tbody> 
 </table>
 </div>

Lihat bar skrol yang muncul.

Beberapa kelas gaya ringkas boleh mengubah halaman ke tahap ini, anda tidak perlu risau lagi tentang melaraskan gaya pada masa hadapan.

Di atas ialah paparan senarai jadual Bootstrap yang paling biasa digunakan, saya harap ia akan membantu pembelajaran semua orang.