Настройка таблицы в Bootstrap

По умолчанию таблицы в HTML выглядят достаточно убого, но с Bootstrap это очень хорошо решается. Давайте для начала посмтрим, что как выглядит таблица по умолчанию:

Да уж, сразу и не сообразишь, что это таблица, поэтому я стрелочкой указал, мало ли кто не понял. А теперь давай поработаем над дней. Добавим класс table

<table class="table">
    ...
</table>

Уже лучше. Но давайте уменьшим padding в таблице, чтобы она занимала меньше места.

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

А теперь добавим заливку строкам

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

И напоследок давайте сделаем нашу таблицу отзывчивой, т.к. по умолчанию она не является таковой. Для этого ее нужно обернуть в контейнер с классом table-responsive

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

А этот пример лучше посмотреть на демо (не отзывчивая таблица), а потом демо (отзывчивая таблица).

По идее вы должны заменить полосу прокрутки у нашей таблицы. Вот так вот она стала отзывчивой.

Это еще далеко не все возможности, которые мы можем применить к таблицам, более детально смотрим на getbootstrap.com

Скачать урок

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Scroll Up