Каково использование класса строк из Bootstrap?

Я думаю, что это может быть глупым вопросом, но я не понимаю, как использовать класс .row в Twitter Bootstrap. Итак, для чего он используется?

Я пытаюсь сделать что-то подобное в этой структуре:

Какая должна быть базовая структура для этого и где нужна строка?

Ответы

Ответ 1

Бутстрап перевел использование обычных строк таблицы <tr> в более семантический строительный блок, который вы можете использовать для компоновки своего дизайна, а вместе с ним они также перевели блоки данных таблицы <td> в .span* классы, которые вы используете для разделения контента, который называется сеткой. В принципе, вы можете представить строку в виде горизонтального контейнера, который вы можете заполнить строительными блоками, тегами span, которые позже вы можете стекать выше или ниже других строк, чтобы создать макет.

Итак, чтобы проиллюстрировать ваш макет, вы можете использовать стек строк следующим образом:

<row>
    <span>LOGO</span>
    SUB-MESSAGE
</row>

<row>
    <span>MENU 1  | MENU 2  | MENU 3  | MENU ...</span>
</row>

<row>
    <span>CONTENT</span>                               | <span>ADS</span>
    <span>CONTENT</span>                               | <span>ADS</span>
    <span>CONTENT</span>                               | <span>ADS</span>
    <span>CONTENT</span>                               | <span>ADS</span>
</row>

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