Bootstrap mesti belajar jadual setiap day_javascript kemahiran-tutorial js-php.cn

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

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>

Salin selepas log masuk

Meja berjalur

Gunakan .jalur meja untuk menambah gaya jalur zebra pada semua dalam

.
Tambahkan satu lagi kelas gaya
pada elemen jadual dalam contoh di atas

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

Mouseover
Gunakan .table-hover untuk membuat setiap baris dalam

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.

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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.

Label berkaitan：

bootstrap 表格

sumber：php.cn

Artikel sebelumnya：Tutorial penggunaan ekspres Nodejs (dengan kod) Artikel seterusnya：Pelaksanaan Javascript bagi contoh pembangunan carta statistik dinamik_kemahiran javascript

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

Artikel terbaru oleh pengarang