Áp dụng các kiểu cho các bảng với Twitter Bootstrap

Question

Có ai biết nếu có thể áp dụng các kiểu trên các bảng với Twitter Bootstrap không? Tôi có thể thấy một số ví dụ bảng trong một số hướng dẫn cũ hơn nhưng không phải trên trang web Bootstrap.

Tôi đã cố gắng thiết lập nhưng các bảng trong trang của tôi hầu như không có kiểu dáng nào được áp dụng cho chúng.

<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> 

Tôi cần áp dụng những lớp nào?

Answer 1

Bootstrap cung cấp nhiều kiểu bảng khác nhau. Hãy xem Base CSS - Tables để biết tài liệu và ví dụ.

Phong cách sau đây mang đến cho bảng lớn đang tìm kiếm:

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

Answer 2

Bạn cũng có thể áp dụng các lớp học TR: thông tin, báo lỗi, cảnh báo, hay thành công.

Answer 3

Chỉ là một bảng đẹp khác. Tôi đã thêm lớp "di chuột" vì nó mang lại hiệu ứng lơ lửng đẹp mắt.

<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

Bảng khởi động Twitter có thể được tạo kiểu và được thiết kế tốt. Bạn có thể tạo kiểu cho bảng của mình chỉ bằng cách thêm một số lớp trên bảng của bạn và bảng sẽ trông đẹp mắt. Bạn có thể sử dụng nó trên các báo cáo dữ liệu của bạn, hiển thị thông tin, vv

Bạn có thể sử dụng:

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

hàng sọc Bảng:

<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> 

bảng Condensed:

nén một bảng bạn cần phải thêm class class = ”table table-condensed”.

<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: http://twitterbootstrap.org/twitter-bootstrap-table-example-tutorial

Answer 5

bootstrap cung cấp các lớp khác nhau cho bảng

<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

bạn có thể Add lớp theo ngữ cảnh để mỗi hàng duy nhất như sau:

<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> 

Bạn cũng có thể thêm chúng vào bảng dữ liệu giống như trên

Bạn có thể đặt kích thước bảng của mình bằng cách đặt các lớp là bảng-sm v.v.

Bạn có thể thêm lớp tùy chỉnh và thêm phong cách riêng của bạn:

<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> 

Bằng cách này bạn có thể thêm phong cách tùy chỉnh. Tôi đã cho thấy phong cách nội tuyến chỉ cho ví dụ như thế nào nó hoạt động, bạn có thể thêm các lớp học và gọi chúng trong css của bạn là tốt.