Container容器（响应式断点）

 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) { ... }

 

1. 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