137-8593-6100
首页 服务 案例 关于 资讯 帮助 联系

Bootstrap 4如何添加一个新的Breakpoint

2023/04/20  百图网络

bootstrap-article.jpg

Bootstrap是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目,是美国Twitter公司设计师设计的产品。

中文:https://v4.bootcss.com/

英文:https://getbootstrap.com/

Github:https://github.com/twbs/bootstrap

Bootstrap在构建响应式网站是非常快速的,是非常棒的前端组件,目前我们伟致开发的响应式网站基本也都是采用Bootstrap。当然除了bootstrap还有很多前端响应式框架,像我们国内自己产的就有AmazeUI等。

随着现在显示器分辨率的提升,原始的网页在2K,4K的显示器上显示太小,只占屏幕中间一点点。Bootstrap也一样,最大宽度是1200px,这个时候不满足我们需求,我们可以通过增加多个breakpoint来进行扩展,如1400px一个,1600px一个以此来满足大显示器的最优显示。

我们在变量源文件里(_variales.scss) $grid-breakpoints:   中看到对应的breakpoint分为 xs , sm , md , lg , xl 五个等级,分别表示极小、小、中等、大、超大。这个断点设置主要用于媒体查询,即当浏览器视窗横向尺寸发生变化时,一旦到了指定条件,比如width=768px,就将触发设置在md断点下的样式。这些等级的数据可以按需改动,全局凡是引用这个map的都将受到影响。

在之前的Bootstrap 3中, 在栅格系统中增加一个层级 (breakpoint) 并不是一件容易的事情。需要程序员做各种LESS 或 CSS 的自定义。而现在的Bootstrap 4 采用了SASS,这就非常方便的增加新的断点,只需添加一个新的 $grid-breakpoints 变量即可。比如你需要增加一个1400px的breakpoint,我们可以把他命名为 xxl ,以此来让宽屏显示器显示更多内容,你只需要在SASS中如下操作即可。

首先增加一个新的breakpoint,我们设置为1400像素,并命名为 xxl

$grid-breakpoints: (  xs: 0,  sm: 576px,  md: 768px,  lg: 992px,  xl: 1200px,  xxl: 1400px) !default;

第二步就是去调整 container 的最大宽度,这边我们将其设置为和breakpoint一样的 xxl

$container-max-widths: (  sm: 540px,  md: 720px,  lg: 960px,  xl: 1140px,  xxl: 1400px) !default;

第三步就是把修改的文件从新编译下,直接命令行执行npm run dist。如果本地环境没有,那还需要再装下本地调试环境了。具体可以参照官方说明,本文就不再赘述了。

https://getbootstrap.com/docs/4.4/getting-started/build-tools/#tooling-setup

最后,我们只需要在前端html中用 col-xxl-* css类就可以了。

内容源于网络,如有侵权或违规我们会尽快整改
在线提交您的需求
我们会在24小时内回复您,节假日除外。
微信沟通 QQ客服
扫描二维码添加客服微信