Как сделать сетку bootstrap под макет шириной 960px

Для Bootstrap3 можно кастомизировать сетку под 960px с помощью кастомайзера http://getbootstrap.com/customize/.

  1. меняем @container-large-desktop с (1140px + @grid-gutter-width) на (940px + @grid-gutter-width).
  2. меняем @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-формы без использования скриптов и php

Нашел очень крутой пример валидации HTML-форм без Javascript и без PHP, оригинальная статья выложена здесь….

Создаем всплывающую HTML-форму обратной связи с pop-up окном об успешной отправке

[vc_message color=»alert-success»]Если вам нужна всплывающая форма обратной связи для WordPress, тогда читайте эту статью: Как…

Убирать или нет Яндекс.Метрику со своих сайтов после введения санкций против Яндекса в Украине?

Как известно, 15 мая указом президента Украины Петра Порошенко были введены санкции против России. Помимо…

Уникальная форма обратной связи с ajax на php

Самый уникальный скрипт формы обратной связи, из всех, что я встречал, нашел на этой сайте…

2 комментария

Алекс

Ужасный бэкграунд на сайте, не возможно сфокусироваться из-за букв по бокам.
Подумайте над этим.

Спасибо за замечание, редизайн сайта на подходе.

Ответить