标签：... Container 容器 media devices width breakpoint include 断点
Container容器（响应式断点）
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术： DW
作者：蒙林丽
撰写时间：2021/6/7
1、响应式断点
Bootstrap是基于移动优先的原则开发的，使用了一系列的媒体查询（media queries）方法，为我们的布局和界面创建自适应的分界点。这些分界点主要基于视口宽度的最小值，并且当窗口视图改变的时候允许元素缩放。
在bootstrap的源Sass文件中，为了实现布局，网络系统以及组件，首先使用下面的媒体查询范围（可以理解为将不同宽度的网页进行拆分并分别载入CSS样式处理构建）：
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap // Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
由于我们在Sass中写了源CSS，所有的媒体查询通过Sass mixins都是可用的（SASS的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) { ... }
// 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;
}
}
偶尔也会使用其它方面的媒体查询（指定屏幕的尺寸或更小）：
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// Extra large devices (large desktops)// No media query since the extra-large breakpoint has no upper bound on its width
请注意，由于浏览器目前不支持范围方面的查询，我们解决的局限性min-和max-前缀和视口带小数的宽度（可下的高DPI设备一定的条件下发生，例如）通过使用与这些比较高的精度。
同样，这些媒体查询通过Sass mixins也是可用的：
@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}
以及使用最小和最大断点宽度定位单个屏幕尺寸段的媒体查询和混合定义：
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
这样媒体查询同理可通过Sass mixin获得：
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
换一个角度看问题，媒体查询可以跨越多个断点宽度：
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199px) { ... }
针对同一屏幕尺寸范围Sass mixin将是如下定义方法：
@include media-breakpoint-between(md, xl) { ... }
- index 堆叠顺序属性
若干个Bootstrap组件利用z-indexCSS属性，通过提供第三轴来安排内容来帮助控制布局。我们在Bootstrap中使用默认的z-index量表，该缩放比例设计用于正确的封层导航、工具提示、扩展插件、模态框等场合。
一般情况下，不推荐用户去自定义这些属性，否则可能牵一发而动全，影响全响呈现。以下为Bootstrap系统内置的Z-index堆叠顺序属性清单：
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
为了处理组件内的重叠边界（例如，输入组中的按钮和输入），我们使用1，2和3的低单位数z-index值来表示默认，悬停和活动状态。在悬停/焦点/活动时，我们将一个特定元素带到最前面，使用更高的z-index值来显示它们在兄弟元素上的边界。
希望可以帮助到你们。
以上就是我的分享，新手上路，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！
标签：...,Container,容器,media,devices,width,breakpoint,include,断点 来源： https://blog.csdn.net/m0_57756558/article/details/118066480
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。