Skip to main content

布局

使用Bootstrap构建页面的选项,包括全局样式,必不可少的脚手架(scaffolding), 网格系统等。

--本章内容翻译由:樊潇洁友情提供

概述

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