Twitter Bootstrap ile tablolara stil uygulama

Question

Twitter Bootstrap ile tablolarda stil uygulamak mümkün olup olmadığını bilen var mı? Bazı eski ders kitaplarında bazı örneklerini görebiliyorum ama Bootstrap sitesinde değil.

Ayarlamayı denedim ancak sayfamdaki tablolarda neredeyse hiç stil uygulanmadı.

<table> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Language</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>Some</td> 
      <td>One</td> 
      <td>English</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>Joe</td> 
      <td>Sixpack</td> 
      <td>English</td> 
     </tr> 
    </tbody> 
</table> 

Hangi sınıflara başvurmam gerekiyor?

Answer 1

Bootstrap çeşitli tablo stilleri sunar. Belgeler ve örnekler için Base CSS - Tables'a bir göz atın.

aşağıdaki stil harika görünen tablolar verir:

<table class="table table-striped table-bordered table-condensed"> 
    ... 
</table> 

Answer 2

Ayrıca TR sınıfları uygulayabilirsiniz: info, hata, uyarı veya başarı.

Answer 3

Sadece başka güzel görünümlü bir masa. Güzel bir gezinti efekti verdiği için "tablo hover" sınıfını ekledim.

<h3>NATO Phonetic Alphabet</h3>  
    <table class="table table-striped table-bordered table-condensed table-hover"> 
    <thead> 
    <tr> 
     <th>Letter</th> 
     <th>Phonetic Letter</th> 

    </tr> 
    </thead> 
    <tr> 
    <th>A</th> 
    <th>Alpha</th> 

    </tr> 
    <tr> 
    <td>B</td> 
    <td>Bravo</td> 

    </tr> 
    <tr> 
    <td>C</td> 
    <td>Charlie</td> 

    </tr> 

</table> 

Answer 4

Twitter önyükleme tabloları stil oluşturulabilir ve iyi tasarlanabilir. Tablonuzu, yalnızca tablonuza bazı sınıflar ekleyerek şekillendirebilirsiniz. Güzel görünecektir. Sen vb verilerin raporlarda gösteren bilgiler temel kullanabilecek

Sen kullanabilirsiniz:

basic table 
Striped rows 
Bordered table 
Hover rows 
Condensed table 
Contextual classes 
Responsive tables 

Çizgili satırlar Tablo:

<table class="table table-striped" width="647"> 
    <thead> 
    <tr> 
    <th>#</th> 
    <th>Name</th> 
    <th>Address</th> 
    <th>mail</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <td>1</td> 
    <td>Thomas bell</td> 
    <td>Brick lane, London</td> 
    <td>thomas@yahoo.com</td> 
    </tr> 
    <tr> 
    <td height="29">2</td> 
    <td>Yan Chapel</td> 
    <td>Toronto Australia</td> 
    <td>Yan@yahoo.com</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>Pit Sampras</td> 
    <td>Berlin, Germany</td> 
    <td>Pit @yahoo.com</td> 
    </tr> 
    </tbody> 
    </table> 

Yoğunlaştırılmış tablosu:

sıkışan class class = ”table table-condensed” eklemeniz gereken bir tablo.

<table class="table table-condensed" width="647"> 
    <thead> 
    <tr> 
    <th>#</th> 
    <th>Sample Name</th> 
    <th>Address</th> 
    <th>Mail</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
    <td>1</td> 
    <td>Thomas bell</td> 
    <td>Brick lane, London</td> 
    <td>thomas@yahoo.com</td> 
    </tr> 
    <tr> 
    <td height="29">2</td> 
    <td>Yan Chapel</td> 
    <td>Toronto Australia</td> 
    <td>Yan@yahoo.com</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>Pit Sampras</td> 
    <td>Berlin, Germany</td> 
    <td>Pit @yahoo.com</td> 
    </tr> 
    <tr> 
    <td></td> 
    <td colspan="3" align="center"></td> 
    </tr> 
    </tbody> 
    </table> 

Ref:

<tr class="table-success"></tr> 
<tr class="table-error"></tr> 
<tr class="table-warning"></tr> 
<tr class="table-info"></tr> 
<tr class="table-danger"></tr> 

Ayrıca ekleyebilirsiniz: http://twitterbootstrap.org/twitter-bootstrap-table-example-tutorial

Answer 5

önyükleme aşağıdaki gibi her satıra bağlamsal sınıfları Ekle

<table class="table"></table> 
<table class="table table-bordered"></table> 
<table class="table table-hover"></table> 
<table class="table table-condensed"></table> 
<table class="table table-responsive"></table> 

Answer 6

tablo için çeşitli sınıfları sağlar Tablo verileri ile aynı

Tablo boyutunuzu, sınıfları table-sm ve benzeri ayarlayarak ayarlayabilirsiniz.

Sen özel sınıflar ekleyebilir ve kendi stil ekleyebilirsiniz:

<table class="table"> 
    <thead style = "color:red;background-color:blue"> 
    <tr> 
     <th></th> 
     <th>First Name</th> 
     <th>Last Name</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Asdf</td> 
     <td>qwerty</td> 
    </tr> 
    </tbody> 
</table> 

özel stil ekleyebilirsiniz Bu şekilde. Satır içi stilini gösterdim, örneğin nasıl çalışıyor, sınıfları ekleyebilir ve bunları css'inizde de arayabilirsiniz.