Как сделать сетку bootstrap под макет шириной 960px
Для Bootstrap3 можно кастомизировать сетку под 960px с помощью кастомайзера http://getbootstrap.com/customize/.
- меняем
@container-large-desktop
с(1140px + @grid-gutter-width)
на(940px + @grid-gutter-width)
. - меняем
@grid-gutter-width
с30px
на20px
.
Затем скачиваем получившиеся кастомизированные стили Bootstrap и используем на сайте, по умолчанию максимальная ширина контейнера будет 960px.
Если нужна только сетка без ничего лишнего, тогда можно действовать в такой последовательности:
- переходим на страницу кастомайзера http://getbootstrap.com/customize/
- в разделе Less files жмем Toggle All (снимаем все галочки), затем отмечаем чекбоксы только Grid system и Responsive utilities
- в разделе jQuery plugins жмем Toggle All (снимаем все галочки)
- в разделе Less variables жмем Reset to defaults (убираем все параметры)
- задаем для
@container-large-desktop
ширину(940px + @grid-gutter-width)
. - задаем для
@grid-gutter-width
ширину20px
. - В самом низу жмем кнопку Compile and Download и скачиваем архив с сеткой
Выглядеть это будет примерно так:
Как сделать сетку bootstrap под макет шириной 1560px
Но для макета, который должен быть больше чем 1200px этот способ не годится, по тому как тогда после экрана large (lg) будет идти экран medium (md), а нам лучше задать xl (extralarge).
Вот, не знаю, на сколько это правильно, но когда мне нужна была сетка шириной 1560px, то я в стандартную сетку bootstrap после правила для максимальной ширины контейнера
@media (min-width: 1200px) { .container { width: 1170px; } }
добавил свое правило:
@media (min-width: 1590px) { .container { width: 1560px; } }
Что это дало:
- для экранов с разрешением больше 1590px сайт будет шириной 1560px
- все правила для колонок будут унаследованы у правил для экранов шириной 1200px
- для экранов меньше 1590px по ширине будет использоваться контейнер шириной 1170px и далее как обычно.
Если кто-то это прочитает и подумает «какое идиотское решение», просьба и мне об этом сообщить, потому как на практике решение вроде бы зарекомендовало себя как вполне пригодное для использования.
Вот, кстати, хорошее видео на эту тему:
Как получить адаптивную сетку Bootstrap нужной ширины
https://www.youtube.com/watch?v=7j2MnoFeHJg
Нашел очень крутой пример валидации HTML-форм без Javascript и без PHP, оригинальная статья выложена здесь….
[vc_message color=»alert-success»]Если вам нужна всплывающая форма обратной связи для WordPress, тогда читайте эту статью: Как…
Как известно, 15 мая указом президента Украины Петра Порошенко были введены санкции против России. Помимо…
Самый уникальный скрипт формы обратной связи, из всех, что я встречал, нашел на этой сайте…
2 комментария
Ответить
Ужасный бэкграунд на сайте, не возможно сфокусироваться из-за букв по бокам.
Подумайте над этим.
Спасибо за замечание, редизайн сайта на подходе.