Bootstrap custom break points

Question

Я использую bootstrap 3.x для создания клиентского сайта. У меня есть конкретный запрос точки самозагрузки перерыв от клиента:

Малый 320px на 768px, Medium 769px на 1034px, Большой 1035px на 1280px и Очень большой плюс 1281.

В то же время я не хочу, чтобы сайт ломался с будущими обновлениями начальной загрузки. Ключ заключается в том, что клиент будет продолжать использовать классы начальной загрузки, такие как col-md- * col-lg- * и т. Д. После того, как я передал сайт и перешел. Как я могу это достичь? Может ли кто-нибудь поделиться с CSS или простой фрагмент scss (новый для scss с помощью Scout).

Любая помощь очень ценится.

Answer 1

Если вы используете SCSS, убедитесь, что используете официальный код Bootstrap SASS.

Установите его в свой проект (инструкции в readme on GitHub), а затем отредактируйте переменные, определенные в строках 271 - 307 scss/_bootstrap-variables.scss, скомпилируйте и это будет все точки останова, измененные повсюду.

Если вам нужно обновить версию, вам потребуется перекомпилировать css каждый раз с помощью настраиваемых точек останова.

В качестве альтернативы вы можете настроить все настройки и загрузить настроенную версию в Интернете по адресу Bootstrap's Website. Вы можете сохранить конфигурацию и предоставить ее клиенту, который может повторно использовать его в будущем.

Answer 2

Никогда не редактируйте ни один из файлов ядра bootstrap, вместо этого перезапишите их с помощью настраиваемых файлов -> таким образом вы можете обновить бутстрап.

Допустим, у вас есть папка под названием bootstrap со всеми файлами sass bootstrap. Это создаст новую папку «custom». В этой папке поместите все файлы, чтобы перезаписать файлы ядра бутстрапа (например, сетку). Чем в папке Sass создать style.scss

sass 
    -bootstrap-sass 
    - bootstrap.scss 
    - bootstrap 
     - alert.scss 
     - ... 
    -custom 
    - custom-grid.scss 
    -style.scss 

Теперь в вас заказ grid.scss поставить это и заменить его своими ценностями:

$screen-xs:     480px !default; 
//** Deprecated `$screen-xs-min` as of v3.2.0 
$screen-xs-min:    $screen-xs !default; 
//** Deprecated `$screen-phone` as of v3.0.1 
$screen-phone:    $screen-xs-min !default; 

// Small screen/tablet 
//** Deprecated `$screen-sm` as of v3.0.1 
$screen-sm:     768px !default; 
$screen-sm-min:    $screen-sm !default; 
//** Deprecated `$screen-tablet` as of v3.0.1 
$screen-tablet:    $screen-sm-min !default; 

// Medium screen/desktop 
//** Deprecated `$screen-md` as of v3.0.1 
$screen-md:     992px !default; 
$screen-md-min:    $screen-md !default; 
//** Deprecated `$screen-desktop` as of v3.0.1 
$screen-desktop:    $screen-md-min !default; 

// Large screen/wide desktop 
//** Deprecated `$screen-lg` as of v3.0.1 
$screen-lg:     1200px !default; 
$screen-lg-min:    $screen-lg !default; 
//** Deprecated `$screen-lg-desktop` as of v3.0.1 
$screen-lg-desktop:   $screen-lg-min !default; 

В процессе импорта style.scss все файлы:

// Core Bootstrap 
@import "bootstrap-sass/_bootstrap.scss"; 

// Overwrite bootstrap 
@import "custom/custom-grid.scss 
... 

То, что я пытаюсь сказать, таким образом (при использовании дерзости или меньше) вы можете переписать бутстраповские основные файлы, сохраняя при этом функциональности обновления