布局概况

优质

小牛编辑

122浏览

2023-12-01

Bootstrap包含了一些供你的项目使用的组件和选项，包括外包裹容器、一个强大的网格系统、一个灵活多变的媒体对象和响应式的工具类。

Containers

在Bootstrap中，窗口是最基本的布局元素。在使用网格系统中它是必不可少的。选择一个响应式的、固定宽度的容器（意味着它的max-width在每个节点都会改变），或者选择一个流式宽度的窗口（意味着任何时候它的宽度总是100%）

虽然容器可以被嵌套，但是大多数布局并不需要一个嵌套的容器。

<div class="container">
  <!-- Content here -->
</div>

为一个全宽度容器使用.container-fluid类，在视口中扩展到整个宽度。

<div class="container-fluid">
  ...
</div>

响应式的分界点

因为Bootstrap是基于移动优先的原则开发的，我们使用了一系列的媒体查询给我们的布局和界面创建感应性的分界点。这些分界点主要是基于视口宽度的最小值，并且当窗口视图改变的时候允许元素缩放。

在Bootstrap的源Sass文件中，为了实现布局、网格系统以及组件，首先使用下面的媒体查询范围——或者说分界点：

// Extra small devices (portrait phones, less than ???px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }

// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }

// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

因为我们在Sass中写了源CSS，所有的媒体查询通过Sass mixins都是可用的。

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

我们偶尔使用其它方面的媒体查询（给定的屏幕尺寸或许更小）：

// Extra small devices (portrait phones, less than 34em)
@media (max-width: 33.9em) { ... }

// Small devices (landscape phones, less than 48em)
@media (max-width: 47.9em) { ... }

// Medium devices (tablets, less than 62em)
@media (max-width: 61.9em) { ... }

// Large devices (desktops, less than 75em)
@media (max-width: 74.9em) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

并且，这些媒体查询通过Sass mixins也是可用的：

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }