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

问题描述

我使用BootstrapCDN.用sass编写并由gulp构建的其他样式.我需要创建自己的Breakpionts.如果使用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:由于但这不能解决我的问题.

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屋！