Задать вопрос

Верно ли я понимаю логику верстки на бутстрапе?

Всем привет!

Изучаю Бутстрап. Раньше верстал сайты дивами по сетке от 960gs (без использования их фреймворка). Сейчас рисую новый дизайн, хочу в дальнейшем его отверстать на Бутстрапе.

Несколько вопросов:

1. Сетка стандартная, 12 колонок, 60 пикселей ширина колонки):
fdecad5d604b4fc3aeff1deeb61b8c9a.png
2. Отступы слева и справа по 10 пикселей:
300cff3ce904414384d8cffbd235a5f7.png
3. В кастомизации бутстрапа (bootstrap-3.ru/customize.php#grid-system) нашел только @grid-gutter-width (паддинг между столбцами, возвращает разделенные пополам слева и справа). Получается, в случае моей сетки нужно поставить значение 20px, верно? Ширина столбца для каждого разрешения экрана различная (bootstrap-3.ru/css.php#grid-options), как быть с этим вопросом при отрисовке макета? Какое значение устанавливать?
4. В дальнейшем отрисовывать дизайн необходимо по такой системе:
fd0b393065c548409dd6c9078fc35dc2.png
Внутри блоков (отмечены цветом) размещать контент, верно?
5. После такого верного отрисовывания элементов дальше остается играться с классами бутстрапа, чтобы на различных устройствах эти блоки правильным образом "складывались" (на смартфоне все блоки в 1 столбец, на планшете больше), верно? Ибо сейчас получается такая ситуация, что мне нужно на планшете оставить 2 блока в ряд, а он их переносит на разные строки, оставляя кучу пространства в правой части экрана.
6. Нет принципиальной разницы, какую ширину макета устанавливать? Всю жизнь рисовал по максимальной ширине 960px
.wrapper{
width: 960px;
position: relative;
margin: 0 auto;
}

Теперь вот думаю рисовать хотя бы 1140px. Но тогда увеличится размер колонки и, скорее всего, паддинг. Или это не важно будет?
  • Вопрос задан
  • 885 просмотров
Подписаться 5 Оценить 7 комментариев
Решения вопроса 1
@OnengLar
3. Да, все верно.
4. 5. для планшета нужен префикс col-md-
Сразу в див пишите: class="col-md-4 col-lg-3" и т п
А вообще тестите, ведь планшет есть в вертикальном положении еще... и там уже .col-sm-
6. Вообще никакой, просто к классу container прописываете максимально допустимую ширину и все

PS: Все идет от меньшего к большему.
Если вам нужно и на десктоп и на планшете одни и те же пропорции колонок,
ставьте только col-md-6 на дестоп оно "унаследуется" для всех выше стоящих разрешений...
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@dbmb
Верстка just for fun
Почитайте документацию, если у вас две колонки для планшета вроде нужно указать еще col-xs-6 вместе с col-md-6, тогда на планшете будет в две колонки=)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы