HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Önyükleme Tabloları

❮ Öncesi Sonraki ❯

Bootstrap Temel Tablosu

Temel bir Bootstrap tablosunda hafif bir dolgu ve yalnızca yatay bölücüler bulunur.

Sınıf .table, bir tabloya temel stil ekler:

Örnek

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Çizgili Satırlar

Sınıf .table-striped, bir tabloya zebra çizgileri ekler:

Örnek

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Bordürlü Masa

Sınıf .table-bordered, tablonun ve hücrelerin her tarafına kenarlıklar ekler:

Örnek

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

fareyle üzerine gelin

Sınıf .table-hover, tablo satırlarına bir vurgulu efekti (gri arka plan rengi) ekler:

Örnek

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Yoğun Tablo

Sınıf .table-condensed, hücre dolgusunu yarıya indirerek bir masayı daha kompakt hale getirir:

Örnek

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Bağlamsal Sınıflar

<tr>Bağlamsal sınıflar, tablo satırlarını ( ) veya tablo hücrelerini ( ) renklendirmek için kullanılabilir <td>:

Örnek

Firstname Lastname Email
Default Defaultson [email protected]
Success Doe [email protected]
Danger Moe [email protected]
Info Dooley [email protected]
Warning Refs [email protected]
Active Activeson [email protected]

Kullanılabilecek bağlamsal sınıflar şunlardır:

Sınıf Açıklama
.active Fareyle üzerine gelme rengini tablo satırına veya tablo hücresine uygular
.success Başarılı veya olumlu bir eylemi gösterir
.info Tarafsız, bilgilendirici bir değişiklik veya eylemi belirtir
.warning Dikkat edilmesi gerekebilecek bir uyarıyı belirtir
.danger Tehlikeli veya potansiyel olarak olumsuz bir eylemi belirtir

Duyarlı Tablolar

Sınıf .table-responsive, duyarlı bir tablo oluşturur. Tablo daha sonra küçük cihazlarda (768 pikselin altında) yatay olarak kayar. 768 pikselden daha büyük bir genişlikte görüntülerken hiçbir fark yoktur:

Örnek

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Egzersizlerle Kendinizi Test Edin

Egzersiz yapmak:

Tabloya temel bir Bootstrap tablosu olarak stil vermek için bir sınıf niteliği ekleyin.

<table >
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  <tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[email protected]</td>
  </tr>
<table>

Tam Önyükleme Tablosu Referansı

Tüm tablo sınıflarının eksiksiz bir referansı için eksiksiz Bootstrap Tabloları Referansımıza gidin .


❮ Öncesi Sonraki ❯