断点是 Bootstrap 中的触发器，用于触发布局响应按照设备或视口大小的变化而变化。

断点是响应式设计的基石。使用它们来控制您的布局何时可以适应特定的视口或设备大小。

使用 media query 通过断点来构建你的 CSS。媒体查询是 CSS 的一项功能，它允许您根据一组浏览器和操作系统参数有条件地应用样式。我们最常在媒体查询中使用 min-width。

移动优先，响应式设计是我们需要达到的目标。
Bootstrap 的 CSS 旨在应用最少的样式来使布局在最小的断点处工作，然后对样式进行分层以针对更大的设备调整该设计。这可以优化您的 CSS，缩短渲染时间，并为您的访问者提供出色的体验。

Bootstrap 包括六个默认断点，有时称为 grid layers，用于响应式构建。如果您使用我们的源 Sass 文件，可以自定义这些断点。

bootstrap 里默认的 media query：

每个断点大小被选择为 12 的倍数，并代表常见设备大小和视口尺寸的子集。它们并不专门针对每个用例或设备，但提供范围为构建响应式应用提供了强大且一致的基础。

Media queries

由于 Bootstrap 是采取了 modile first 的设计方针，因此我们使用一些媒体查询来为我们的布局和界面创建合理的断点。这些断点主要基于最小视口(minimum viewport)宽度，并允许我们随着视口的变化放大元素。

下面这段代码的语义是：

// Source mixins// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }// Usage// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {display: none;
}
@include media-breakpoint-up(sm) {.custom-class {display: block;}
}

在默认的屏幕尺寸即 x-small，min-width: 0 的情况下，隐藏具有 custom-class 的 DOM 元素。但是，在 sm 以及更大尺寸的屏幕上，使用 display:block 来显示。

同样，下列代码的语义：

%cx-product-facet-navigation {min-width: 0;// hides the filter button in desktop experience@include media-breakpoint-up(lg) {button.dialog-trigger {display: none;}}
}

在 lg breakpoint 代表的屏幕尺寸上，将具有 dialog-trigger 的 button 按钮隐藏掉。

更多Jerry的原创文章，尽在：“汪子熙”:

什么是 bootstrap 中的 break point相关推荐

bootstrap中使用日历控件
在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一 ...
Bootstrap中文本的样式
在Bootstrap中对文本的对有很多的关注,也给出了很多的样式,至少在我们自己写网页的时候这些可以不用再去编写这些样式,其实在之前我一直没有很好的理解类,这些其实都是类,我们给class进行赋值其实 ...
简述Python中的break和continue的区别
众所周知在Python中,break是结束整个循环体,而continue则是结束本次循环再继续循环. 但是作为一个新手的你,还是不明白它们的区别,这里用一个生动的例子说明它们的区别,如下: 1.con ...
Scala中没有break和continue, 如何退出循环
Java是指令式风格,Scala是函数式风格. 在Scala中,应该尽量适用循环,而是应用函数的方式来处理. Scala并没有提供break和continue语句来退出循环,那么如果我们又确实要怎么办 ...
Bootstrap中模态框多层嵌套时滚动条问题
在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...
JAVA中的break[标签]continue[标签]用法
原文:JAVA中的break[标签]continue[标签]用法注意:JAVA中的标签必须放在循环之前,且中间不能有其他语句.例如:tag:for或while或do--while; 1.使用brea ...
html页面icon字体无法显示,bootstrap中icon字体图标怎么不显示？
bootstrap中icon字体图标怎么不显示?下面本篇文章给大家介绍一下Bootstrap字体图标不显示问题.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 问题: bootstr ...
bootstrap 中这段代码使bundles 失败
bootstrap 中这段代码使bundles 失败 _:-ms-fullscreen, :root input[type="date"], _:-ms-fullscreen, ...
Bootstrap中DropDown插件显示下拉列表，点击下拉列表区域，不会再自动关闭。
目标: Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭. 参考:http://v3.bootcss.com/javascript/#dropdowns / ...

什么是 bootstrap 中的 break point

Media queries

什么是 bootstrap 中的 break point相关推荐

最新文章

热门文章