Применение стилей к таблицам с помощью бутстрапа Twitter

Кто-нибудь знает, можно ли применять стили на таблицах с помощью Twitter-бутстрапа? Я могу увидеть некоторые примеры таблиц в некоторых старых учебниках, но не на самом сайте Bootstrap.

Я попытался настроить его, но таблицы на моей странице почти не применялись к ним.

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

Какие классы мне нужно применять?

Ответы

Ответ 1

Bootstrap предлагает различные стили таблиц. Посмотрите Base CSS - Таблицы для документации и примеров.

Следующий стиль дает великолепные таблицы:

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

Ответ 2

Таблицы загрузочных таблиц Twitter могут быть разработаны и хорошо разработаны. Вы можете настроить таблицу, просто добавив некоторые классы на свой стол, и она будет выглядеть красиво. Вы можете использовать его в своих отчетах о данных, отображая информацию и т.д.

Вы можете использовать:

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

Полосатые строки Таблица:

    <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>[email protected]</td>
    </tr>
    <tr>
    <td height="29">2</td>
    <td>Yan Chapel</td>
    <td>Toronto Australia</td>
    <td>[email protected]</td>
    </tr>
    <tr>
    <td>3</td>
    <td>Pit Sampras</td>
    <td>Berlin, Germany</td>
    <td>Pit @yahoo.com</td>
    </tr>
    </tbody>
    </table>

Сжатая таблица:

При сжатии таблицы вам нужно добавить класс 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>[email protected]</td>
    </tr>
    <tr>
    <td height="29">2</td>
    <td>Yan Chapel</td>
    <td>Toronto Australia</td>
    <td>[email protected]</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>

Ссылка: http://twitterbootstrap.org/twitter-bootstrap-table-example-tutorial

Ответ 3

Вы также можете применить классы TR: информация, ошибка, предупреждение или успех.

Ответ 4

Еще одна красивая таблица. Я добавил класс "table-hover", потому что он дает хороший эффект зависания.

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

Ответ 5

bootstrap предоставляет различные классы для таблицы

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

Ответ 6

вы можете добавить контекстные классы в каждую строку следующим образом:

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

Вы также можете добавить их в данные таблицы, как указано выше

Вы можете установить размер таблицы, задав классы как table-sm и т.д.

Вы можете добавить пользовательские классы и добавить свой собственный стиль:

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

Таким образом вы можете добавить пользовательский стиль. Я показал встроенный стиль, например, как это работает, вы можете добавлять классы и называть их в своем CSS.