如何使用 CDN 在引导程序 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 在引导程序 4 中创建新断点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！