Как правильно верстать с помощью bootstrap?

Question

[WebDeveloper2016]

Например взять какой нибудь максимально классический дизайн сайта, например вот этот. (не сочтите за рекламу) Имеет ли смысл везде делать модульную сетку? Просто получается у меня такая структура: контейнер, строки для хедера, контента и футера. В хедере опять контейнер для логотипа и названия с описанием, а если я захочу еще справа добавить форму авторизации то и еще один контейнер окаймляющий понадобится и контейнер для формы... Ну и т.д. для контента и футера... Короче не слишком ли все это излишне? С одной стороны хочется максимальной адаптивности, с другой, ну просто как это обычно делают?? Я не очень умею верстать...

Answer 1

[Сергей delphinpro]

Если под словом "контейнер" подразумевается блок с классом .container или .container-fluid, то их не следует вкладывать друг в друга. Если вы имеете ввиду дополнительные дивы со своими кастомными классами или элементы сетки (.row, .col-*-*), то, если вам нужно, вкладывайте их сколько угодно (но без фанатизма). Это норм.
Главное помнить, что .row не должен быть непосредственным потомком .row, между ними обязательно должен быть .col-*-*. То же самое касается и колонок.

Comments

[WebDeveloper2016]

Да, под контейнером я подразумеваю блок с классом container. А как можно вкладывать друг в друга элементы сетки? Ну понятно что столбцы всегда вкладываются в строки. Но мне казалось нельзя вкладывать столбцы в элементы - не строки (без класса row), и строки в элементы - не контейнеры. Или нет? Что из этого выйдет?

[WebDeveloper2016]

Хех. Попробовал. И правда походу можно. А я и не знал. Спасибо!

[Сергей delphinpro]

WebDeveloper2016:
.container внутри .container быть не должен. ни прямым потомком, ни как-то еще. За редкими исключениями, когда вы используете именно .container (а не .container-fluid) и вам позарез нужен блок фиксированной ширины где-то внутри ДОМ-дерева (навскидку, в голову приходит какой-нибудь самописный слайдер).

Строки (.row) могут быть вложены внутрь контейнера или колонки.
Колонка может быть вложена в строку.

Таким образом мы может сделать такую разметку, которая будет правильно работать

<container>
  <row>
    <col-xs-6>
        <row>
          <col-xs-4>...</col-xs-4>
          <col-xs-4>...</col-xs-4>
          <col-xs-4>...</col-xs-4>
        </row>
    </col-xs-6>
    <col-xs-6>
        <row>
          <col-xs-7>...</col-xs-7>
          <col-xs-5>...</col-xs-5>
        </row>
    </col-xs-6>
  </row>
</container>

[Александр Булгаков]

а я для себя решил не использовать бутстрап классы в разметке, сетку делаю через sass миксины, так получается более чистый код.

[WebDeveloper2016]

Александр Булгаков: пока что я еще далек от sass. Но как нибудь обязательно попробую эту штуку! :)

Answer 2

[Localhost]

shoelace.io Здесь удобно собрать блоки и сбоку будет готовый код