Bootstrap入门:容器、响应式断点、Z-index

2018-12-2609:49:12网页制作Comments10,148 views2字数 2645阅读模式

容器

容器是Bootstrap中最基本的布局元素,在使用Bootstrap网格系统的必备之器。你可以选择一个响应式的、固定宽度的容器(意味着其max-width在每个尺寸断点处变化),或者灵活宽度的容器(意味着它总是100%宽度)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9066.html

虽然容器可以嵌套,但大多数布局都没必要用嵌套容器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9066.html

<div class="container">
  <!-- Content here -->
</div>
复制代码

使用.container-fluid可以得到一个100%宽度的容器,横跨整个视口宽度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9066.html

<div class="container-fluid">
  <!-- Content here -->
</div>
复制代码

响应式断点

既然Bootstrap是移动端优先的,我们使用一些媒体查询来为布局和界面创建合理的断点。这些断点大多基于最小视口宽度,允许我们随着视口缩放元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9066.html

在布局、网格系统、组件的Sass文件中,Bootstrap主要使用下面列出的媒体查询范围——也就是断点。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9066.html

// 极小设备(portrait phones,小于576px)
// 没有“xs”对应的媒体查询,因为它在Bootstrap中是默认的。

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

// 中型设备(tablets, 768px及以上)
@media (min-width: 768px) { ... }

// 大型设备(desktops, 992px及以上)
@media (min-width: 992px) { ... }

// 超大设备(large desktops, 1200px及以上)
@media (min-width: 1200px) { ... }
复制代码

Bootstrap的CSS源代码都是用Sass写的,所以所有的媒体查询都支持Sass的mixin:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9066.html

// 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;
  }
}
复制代码

我们会酌情max-width来界定媒体查询:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9066.html

//  极小设备(portrait phones,小于576px)
@media (max-width: 575.98px) { ... }

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

//  中型设备(tablets, 小于992px)
@media (max-width: 991.98px) { ... }

// 大型设备(desktops, 小于1200px)
@media (max-width: 1199.98px) { ... }

// 超大设备(large desktops)
// 因为xl的断点没有上限,故没有媒体查询
复制代码

注意,当前浏览器不支持range context queries,所以我们在处理min-和max-前缀以及宽度为分数的视口(例如在高dpi设备上可能导致不确定条件)时,使用更高精度的值来进行比较。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9066.html

在说一次,媒体查询也支持Sass的mixin。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9066.html

也可以使用最大最小断点宽度的媒体查询和mixin来指定某个范围的屏幕尺寸。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9066.html

//  极小设备(portrait phones,小于576px)
@media (max-width: 575.98px) { ... }

//小型设备(landscape phones, 576px到768px以左)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

//  中型设备(tablets, 768px到992px以左)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// 大型设备(desktops, 992px到1200px以左)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// 超大设备(large desktops,1200px及以上)
@media (min-width: 1200px) { ... }
复制代码

类似地,媒体查询可以跨过多个断点:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9066.html

//例子
// 对中型到超大型范围的设备应用样式
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
复制代码

对应的Sassmixin则是:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9066.html

@include media-breakpoint-between(md, xl) { ... }
复制代码

Z-index

多个Bootstrap组件都用到了z-index——通过提供第三个坐标来帮你控制布局的CSS属性。在Bootstrap中用的默认z-index范围来给navigation、tooltip、popover、modal等等分层。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9066.html

这些数值可以始于任意数字,足够大、足够特殊,用以完美避免冲突。我们需要对分层组件进行标准的设置,这样才能在表现上达到合理一致。所以没有理由不去用100以上甚至500以上的数值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9066.html

我们不建议自定义这些值,因为改了一个,你就可能要改所有的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9066.html

$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;
复制代码

为了处理组件间重叠的border(例如input组中的input和button),我们对默认、鼠标悬停、活动状态使用较小的个位数1、2、3。在这些状态下,我们把某个特定元素放在最前面,来显示它们的border。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9066.html

作者:?Badd
来源:掘金文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/9066.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/9066.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定