如何使用 CDN 在 bootstrap 4 中创建新断点? [英] How to create new breakpoints in bootstrap 4 using CDN?

问题描述

我使用 BootstrapCDN.其他用 sass 编写并由 gulp 构建的样式.我需要创建自己的断点.如果我使用 CDN，是否可以制作它们?我不知道该怎么做.我必须创建这些断点:

I use BootstrapCDN. Other styles written in sass and built by gulp. I need to create my own breakpionts. Is it possible to make them if I use CDN? I can't figure out how to do it. I have to create these breakpoints:

--breakpoint-xxxs: 0;
--breakpoint-xxs: 320px;
--breakpoint-xs: 568px;
--breakpoint-sm: 667px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-xxl: 1440px;
--breakpoint-xxxl: 1600px;

我想得到这样的东西:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
	<div class="row">
		<div class="col col-xxxs-1 col-xxs-2 col-xs-3 col-sm-4 col-md-5 col-lg-6 col-xl-7 col-xxl-8 col-xxxl-9">
			<div style="height:100vh;background:purple">text</div>
		</div><!--col-->
	</div><!--.row-->
</div><!--.container-->

我发现 手册我正在尝试这个:

I found the manual and I'm trying this:

$grid-breakpoints: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
)  !default;

$container-max-widths: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
) !default;

:root {
  --breakpoint-xxxs: 0;
  --breakpoint-xxs: 320px;
  --breakpoint-xs: 568px;
  --breakpoint-sm: 667px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1440px;
  --breakpoint-xxxl: 1600px;
}

但它不会产生结果，并且会产生错误:

But it doesn't produce results, and generates bug:

非法嵌套:变量声明下不得嵌套任何内容.

Illegal nesting: Nothing may be nested beneath variable declarations.

Codepen mcve.

我做错了什么?
提前感谢您的帮助.

What I'm doing wrong?
Thank you in advance for your help.

UPD:如果那是不可能的……还有其他选择吗?我可以轻松地编辑我的代码以使用我的断点模拟引导网格吗?

UPD: if that is not possible... Is there any alternative? Can I easily edit my code to simulate bootstrap grid with my breakpoints?

UPD2:感谢 @aer0:

$grid-breakpoints: (xxxs: 0, xxs: 320px, xs: 568px, sm: 667px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px, xxxl: 1600px)!default

$container-max-widths: (xxxs: 0, xxs: 320px, xs: 568px, sm: 667px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px, xxxl: 1600px)!default

:root
  --breakpoint-xxxs: 0
  --breakpoint-xxs: 320px
  --breakpoint-xs: 568px
  --breakpoint-sm: 667px
  --breakpoint-md: 768px
  --breakpoint-lg: 992px
  --breakpoint-xl: 1200px
  --breakpoint-xxl: 1440px
  --breakpoint-xxxl: 1600px

但这并不能解决我的问题.

But it doesn't solve my problem.

推荐答案

我很惊讶没有开发人员能够回答我的问题！即便是在github上也没人敢想！

I'm very surprised that there was no developer able to answer my question! Even on the github no one dared to think about it!

其实一切都变得非常简单！

In fact, everything turned out to be very simple!

是的，使用 CDN 我们得到编译后的 css 文件.引导程序中的样式是使用 sass 编写的.此外，样式是书面分离和模块化的.所以这意味着我不需要将整个引导程序加载到我的服务器.我想提供 Bootstrap 编译的 CSS 的缓存版本，我只需要添加我的断点.幸运的是，有一个特定的引导文件负责网格.它是bootstrap-grid.scss:

Yes, using the CDN we get the compiled css file. Styles in the bootstrap are written using sass. Moreover, the styles are written separation and modular. So it means that I do not need to load the entire bootstrap to my server. I want to deliver cached version of Bootstrap’s compiled CSS and I only need to add my breakpoints. Fortunately, there is a specific bootstrap file which is responsible for the Grid. It is bootstrap-grid.scss:

/*!
 * Bootstrap Grid v4.0.0 (https://getbootstrap.com)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@at-root {
  @-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix
}

html {
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

@import "functions";
@import "variables";

@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";

@import "grid";
@import "utilities/display";
@import "utilities/flex";

现在我只需要从上面的文件中按顺序添加代码，添加我的断点.不需要添加非网格代码.例如，负责颜色的代码.这是我在 codepen 的 mcve.

Now I just need to add sequentially the code from the files above adding my breakpoints. Add non-Grid code not necessary. For example, the code responsible for the color. Here is my mcve at codepen.

这篇关于如何使用 CDN 在 bootstrap 4 中创建新断点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！