Bootstrap的container和container-fluid

电玩女神 2023-10-05 14:08 33阅读 0赞

### Containers容器 ###

容器是Bootstrap中最基本的布局元素，**在使用我们的默认网格系统时，**容器是**必需的**。容器用于在其中容纳，填充和（有时）使内容居中。尽管*可以*嵌套容器，但是大多数布局都不需要嵌套容器。

Bootstrap带有三个不同的容器：

*  `.container`，它`max-width`在每个响应断点处设置一个
 *  `.container-fluid`，这是`width: 100%`所有断点
 *  `.container-{breakpoint}`，`width: 100%`直到指定的断点为止

下表说明了每个容器`max-width`与原始容器`.container`以及`.container-fluid`每个断点之间的比较。

在实际使用中查看它们，并在我们的[Grid示例中][Grid]进行比较。

<table> 
 <thead> 
  <tr> 
   <th style="text-align:inherit;vertical-align:top;">&nbsp;</th> 
   <th style="text-align:inherit;vertical-align:top;">特小<br> &lt;576px</th> 
   <th style="text-align:inherit;vertical-align:top;">小<br> ≥576px</th> 
   <th style="text-align:inherit;vertical-align:top;">中<br> ≥768px</th> 
   <th style="text-align:inherit;vertical-align:top;">大<br> ≥992px</th> 
   <th style="text-align:inherit;vertical-align:top;">特大<br> ≥1200px</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>.container</code></td> 
   <td>100%</td> 
   <td>540px</td> 
   <td>720px</td> 
   <td>960px</td> 
   <td>1140px</td> 
  </tr> 
  <tr> 
   <td><code>.container-sm</code></td> 
   <td>100%</td> 
   <td>540px</td> 
   <td>720px</td> 
   <td>960px</td> 
   <td>1140px</td> 
  </tr> 
  <tr> 
   <td><code>.container-md</code></td> 
   <td>100%</td> 
   <td>100%</td> 
   <td>720px</td> 
   <td>960px</td> 
   <td>1140px</td> 
  </tr> 
  <tr> 
   <td><code>.container-lg</code></td> 
   <td>100%</td> 
   <td>100%</td> 
   <td>100%</td> 
   <td>960px</td> 
   <td>1140px</td> 
  </tr> 
  <tr> 
   <td><code>.container-xl</code></td> 
   <td>100%</td> 
   <td>100%</td> 
   <td>100%</td> 
   <td>100%</td> 
   <td>1140px</td> 
  </tr> 
  <tr> 
   <td><code>.container-fluid</code></td> 
   <td>100%</td> 
   <td>100%</td> 
   <td>100%</td> 
   <td>100%</td> 
   <td>100%</td> 
  </tr> 
 </tbody> 
</table>

#### All-in-one ####

我们的默认`.container`类是响应式，固定宽度的容器，这意味着它`max-width`在每个断点处都会更改。

复制

#### Fluid ####

使用`.container-fluid`了全宽的容器，跨越视口的整个宽度。

复制

#### 反应灵敏 ####

响应容器是Bootstrap v4.4中的新增功能。它们允许您指定一个100％宽的类，直到达到指定的断点为止，此后，我们`max-width`对每个较高的断点应用。例如，`.container-sm`100％宽开始直到`sm`到达断点，在那里将扩大同`md`，`lg`和`xl`。

复制

<div class="container-sm">100% wide until small breakpoint</div>
    <div class="container-md">100% wide until medium breakpoint</div>
    <div class="container-lg">100% wide until large breakpoint</div>
    <div class="container-xl">100% wide until extra large breakpoint</div>

### 响应断点 ###

由于Bootstrap最初是为移动设备而开发的，因此我们使用了一些[媒体查询][Link 1]来为布局和界面创建合理的断点。这些断点主要基于最小视口宽度，并允许我们随着视口的变化按比例放大元素。

Bootstrap主要在源Sass文件中为布局，网格系统和组件使用以下媒体查询范围（或断点）。

复制

// Extra small devices (portrait phones, less than 576px)
    // No media query for `xs` 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使用：

复制

// 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

注意，由于浏览器目前不支持[范围方面的查询][Link 2]，我们解决的局限性[`min-`和`max-`前缀][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: 575.98px) { ... }
    
    // Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) and (max-width: 767.98px) { ... }
    
    // Medium devices (tablets, 768px and up)
    @media (min-width: 768px) and (max-width: 991.98px) { ... }
    
    // Large devices (desktops, 992px and up)
    @media (min-width: 992px) and (max-width: 1199.98px) { ... }
    
    // Extra large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { ... }

这些媒体查询也可以通过Sass mixins使用：

复制

@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: 1199.98px) { ... }

用于定位相同屏幕尺寸范围的Sass mixin为：

复制

@include media-breakpoint-between(md, xl) { ... }

### Z指数 ###

一些Bootstrap组件利用`z-index`CSS属性，该CSS属性通过提供第三个轴来安排内容来帮助控制布局。我们在Bootstrap中使用默认的z-index比例尺，该比例尺旨在适当地分层导航，工具提示和弹出窗口，模态等。

这些较高的值以任意数字开始，该数字足够高且特定，足以理想地避免冲突。我们需要在我们的分层组件（工具提示，弹出窗口，导航栏，下拉菜单，模式）中使用一组标准的工具，以便我们在行为上可以保持一致。没有理由我们不能使用`100`\+或`500`\+。

我们不鼓励定制这些个人价值观；如果您要更改一个，则可能需要全部更改。

复制

$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;

为了处理重叠的组件（例如，按钮和输入组的输入）内的边界中，我们使用低单数位`z-index`的值`1`，`2`和`3`用于默认，悬停状态和活动状态。在悬停/焦点/活动上，我们将具有较高`z-index`值的特定元素置于最前列，以显示其在同级元素上的边界。

[Grid]: https://getbootstrap.com/docs/4.4/examples/grid/#containers
[Link 1]: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
[Link 2]: https://www.w3.org/TR/mediaqueries-4/#range-context
[min-_max-]: https://www.w3.org/TR/mediaqueries-4/#mq-min-max