Bootstrap 布局综述

标签: Bootstrap 布局

Bootstrap项目的组件和选项,包括包装容器,强大的网格系统,灵活的媒体对象和响应式实用的类。


容器

容器是Bootstrap中最基本的布局元素,使用默认网格系统时容器是必需的。响应式容器可以选择固定宽度(fixed-width,max-width 会在每个响应式断点变化,下文有介绍)或流体宽度(fluid-width,意味着它始终是 100%宽度)。

容器可以嵌套,但大多数布局不需要嵌套。

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

使用.container-fluid的容器,会铺满整个可视区域的宽度。

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

响应式断点

(Responsive breakpoints)

Bootstrap被开发为移动端优先,我们使用少量媒体查询为我们的布局创建合理的断点。这些断点主要基于min-width(大于指定宽度),在窗口达到指定宽度时放大元素。

在Sass文件中使用以下媒体查询断点。

// 超小型设备(portrait phones,小于576像素)
// Extra small devices 缩写 'xs'
// xs 不需要使用媒体查询,因为这是bootstrap的默认值

// 小型设备(landscape phones,576px及以上)
// Small devices 缩写 'sm'
@media (min-width: 576px) { ... }

// 中型设备(平板电脑,768px及以上)
// Medium devices 缩写 'md'
@media (min-width: 768px) { ... }

// 大型设备(台式机,992px及以上)
// Large devices 缩写 'lg'
@media (min-width: 992px) { ... }

// 超大型设备(大型台式机,1200px及以上)
// Extra large devices 缩写 'xl'
@media (min-width: 1200px) { ... }

由于我们在Sass中编写CSS,所以所有的媒体查询都可以通过Sass 混入(mixins):

// xs不需要媒体查询因为它等同于`@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// 例如: 在`min-width: 0`时隐藏, 然后在`sm`时显示
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

我们偶尔会使用另一种方式(给定一个尺寸或小于这个尺寸,小于或等于指定宽度)的媒体查询:

// Extra small devices (portrait phones, 小于 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 小于  768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, 小于  992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, 小于  1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// 没有媒体查询,因为最大是无限大

再一次,这些媒体查询也可以通过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-index

多个Bootstrap组件利用z-index ,这个CSS属性来帮助控制布局。我们在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;

为了处理重叠的组件(例如,按钮和inputs的输入)内的边界中,我们使用低单数位z-index的值123用于默认,悬停状态和活动状态。在悬停/焦点/活动时,我们将一个特定元素置顶,使用更高的z-index值来显示它们在兄弟元素上的边界。


本文由 巨应教程  原创出品,转载请标明出处。