引导程序自定义断点 [英] Bootstrap custom break points

问题描述

我正在使用bootstrap 3.x来构建客户端站点。我有一个来自客户端的特定引导中断点请求：

I am using bootstrap 3.x to build a client site. I have a specific bootstrap break points request from the client:

小型320px至768px，
中型769px至1034px，
大型1035px至1280px，和
特大号1281加号。

Small 320px to 768px, Medium 769px to 1034px, Large 1035px to 1280px, and Extra large 1281 plus.

同时，我不希望该站点因将来的引导程序版本升级而中断。关键是，在我进入站点并继续前进后，客户端将继续使用引导类，例如col-md- * col-lg- *等。我该如何实现？有人可以共享一个css或简单的scss代码段（使用Scout还是scss的新功能）。

At the same time, I don't want the site to break with future bootstrap version upgrades. The key is that the client will keep using bootstrap classes such as col-md-* col-lg-* etc after I handed on the site and moved on. How can I achieve this? Can somebody share a css or simple scss snippet (new to scss using Scout).

任何帮助都是值得的。

推荐答案

永远不要编辑任何引导核心文件，而要用自定义文件覆盖它们->这样您就可以更新引导。

Never ever edit any of the bootstrap core files, instead overwrite them with custom files -> this way you can update bootstrap.

假设您有一个名为bootstrap的文件夹，其中包含所有bootstrap核心sass文件。即创建一个新文件夹 custom。在此文件夹中，放入所有文件以覆盖引导程序核心文件（如网格）。在sass文件夹中创建style.scss

Lets say you got an folder called bootstrap with all bootstrap core sass files. That create a new folder "custom". In this folder put all files to overwrite the bootstrap core files (like the grid). Than within the sass folder create your style.scss

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

现在在您的custom-grid.scss文件中，将其替换为您的值：

Now in you custom-grid.scss put this and replace it with your values:

$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导入所有文件：

In your style.scss import all files:

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

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

我要说的是，这样（如果使用sass或更少的话），您可以覆盖引导核心文件，同时保持更新功能

What I am trying to say, this way (if using sass or less) you can overwrite bootstrap core files while keeping the update functionality

这篇关于引导程序自定义断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！