Bootstrap基础02——栅格布局容器

前端 Bootstrap
前端
发布日期:   2020-06-15
文章字数:   2.5k

容器

1. 概念

  1. Container容器是窗口布局的最基本元素，BootStrap推荐所有样式都定义在==.container或.container-fluid容器==之中

  2. 这是启用整个==栅格系统==必不可少的前置条件，它们分别对应选择个响应式的、固定宽度的容器，或者选择个流式自适应浏览器或容器最大合法宽度的窗口

  3. 图示

image-20200329125202009

2. 实操

给div加个类就可以：

1
2
<div class="container" style="background-color: red; height: 100px;">固定容器</div>
<div class="container-fluid" style="background-color: green; height: 100px;">流式容器</div>

image-20200329125212681

都是响应式的，流式容器两边的间距跟着屏幕大小变，而固定的一直都是100%铺满。

响应式的几个档位，就是上面的表。

流式容器是div扩展到整个浏览器宽度的，上面的图倒了。

屏幕尺寸对应图

image-20200329125234172

自己实现自适应容器

  • @media：媒体监听
  • 这里的尺寸是根据上面的表里来的，这些尺寸是twitter工程师算出来的最适合的
  • @media (min-width: 576px) and (max-width: 767px)就表示：576px<=屏幕尺寸<=767px
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/*<!--自己实现自适应容器-->*/
/*@media媒体监听*/

/*最低档位<576px，所以说最大是575px*!*/
/*超小屏幕*/
@media (max-width: 575px) {
    .container-self {
        background-color: red;
        width: 100%;
    }
}

/*小屏幕*/
@media (min-width: 576px) and (max-width: 767px) {
    .container-self {
        background-color: green;
        width: 540px;
    }
}

/*中等屏幕*/
@media (min-width: 768px) and (max-width: 991px) {
    .container-self {
        background-color: blue;
        width: 720px;
    }
}

/*大屏幕*/
@media (min-width: 992px) and (max-width: 1199px) {
    .container-self {
        background-color: yellow;
        width: 960px;
    }
}

/*超大屏幕*/
@media (min-width: 1200px) {
    .container-self {
        background-color: pink;
        width: 1140px;
    }
}

<div class="container-self" style=" height: 100px;margin: 0 auto;">自己实现自适应容器</div>

做响应式页面的时候，最外层的容器以后一般都用container

栅格系统

1.概念

行与列的布局，12列，5种响应布局对应5种屏幕尺寸

2.原理

1)栅格系统提供了集中内容居中、水平填充网页内容的方法，使用.container作为父盒子
2)同时在负边距的行上抵消，从而实现列中的所有内容在视觉上是左侧对齐的体验
​ 1) 每列都有水平的padding值，行则用于控制它们之间的间隔
​ 2) 内部由行(.row) 和列(.col) 组成
3)网页开发者的呈现==内容必须放置在列(.col-*) 中==，而且==只有列可以是行的直接子元素==，否则都是违法的，不可以在.col-*以上添加呈现内容
4) .col-*后面有不同的数字， 如.col-sm- 4或.col-xl-12,这些css类后面的数字用于表明定义div空间想要占用列的数量，每行最多有12列。如果你想用三个等宽的列，则取12的三分之- ,即.col-sm-4
5) .col-*的width属性(即列宽)是==用百分比==来表现和定义的， 所以它们总是流式的，其尺寸大小受父元素的定义影响
6)总共有五个栅格等级，每个响应式分界点隔出个等级:特小.col、 小col-sm-*、 中.col-md-*、 大.coH-lg-*、 特大(大、特大也可以称为宽超宽) .col-xl-*.

3.栅格选项

1.图示

image-20200329125249439

2.使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
    .container{
        background-color: yellowgreen;
        height: 100px;
    }
    /*取到container类里面的div的div的排序第一个*/
    .container>div>div:nth-child(1){
        background-color: red;
    }
     .container>div>div:nth-child(2){
        background-color: blue;
    }
     .container>div>div:nth-child(3){
        background-color: pink;
    }
</style>
--------------------------------------------------
<div class="container">
    <div class="row">
        <div class="col">第一部分</div>
        <div class="col">第二部分</div>
        <div class="col">第三部分</div>
    </div>
</div>

栅格系统中

这节课分了两种情况，将不同屏幕怎么适配。

单个col

1
2
3
4
5
6
7
<div class="container">
    <div class="row">
        <div class="col-sm">第一部分</div>
        <div class="col-sm">第二部分</div>
        <div class="col-sm">第三部分</div>
    </div>
</div>

当只有一个col-sm的时候，会往上兼容，sm、md、lg等都会服从这个sm的布局

比col-sm小的 不服从这个三等分的布局

image-20200329125319772

而比sm大的都会服从这个三等分的布局：

image-20200329125417301

多个col

如果想让几个div的布局在不同屏幕有不同的显示，那么就应该使用多个col：

1
2
3
4
5
6
7
<div class="container">
    <div class="row">
        <div class="col-sm col-md-1 col-lg-5">第一部分</div>
        <div class="col-sm col-md-10 col-lg-2">第二部分</div>
        <div class="col-sm col-md-1 col-lg-5">第三部分</div>
    </div>
</div>

  • 在sm之下没有布局：
    image-20200329125338880

  • 在sm到md之间都是三等分的布局：

image-20200329125425144

  • 在md到lg之间都是1-10-1的布局：
    image-20200329125433517

  • 在lg以上都是5-2-5的布局：

    image-20200329125459439

对齐方式

垂直对齐

1
2
3
4
5
6
7
8
9
<div class="container">
<!--对齐-->
    <div class="row align-items-end align-items-md-baseline align-items-lg-center">
        <div class="col-3">第一部分</div>
        <div class="col-3">第二部分</div>
        <div class="col-3">第三部分</div>
        <div class="col-3">第四部分</div>
    </div>
</div>

这里要改一下之前的css样式：

1
2
3
4
.container>.row {
    background-color: yellowgreen;
    height: 100px;
}

因为如果row没有高度的话，那么它的子元素都是自适应高度撑满的，就不能对齐了

这里的align-items就是垂直对齐的类。当然也有分别对应的大屏幕、中屏幕、小屏幕的多个样式。

  • align-items-md-baseline：在中屏幕及其以上，垂直方向顶部对齐
    image-20200329125545911
  • align-items-end：在小屏幕到以上（我的代码中是到中屏幕），垂直方向底部对齐
    image-20200329125553991
  • align-items-lg-center：在大屏幕以上，垂直方向居中对齐
    image-20200329125601427

水平对齐

水平对齐就是justify-content-xxx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="container">
    <!--水平对齐-->
    <div class="row justify-content-lg-start">
        <div class="col-3">第一部分</div>
        <div class="col-3">第二部分</div>
    </div>
    <br><br>
    <div class="row justify-content-lg-end">
        <div class="col-3">第一部分</div>
        <div class="col-3">第二部分</div>
    </div>
    <br><br>
    <div class="row justify-content-lg-between">
        <div class="col-3">第一部分</div>
        <div class="col-3">第二部分</div>
    </div>
    <br><br>
    <div class="row justify-content-lg-around">
        <div class="col-3">第一部分</div>
        <div class="col-3">第二部分</div>
    </div>
    <br><br>
    <div class="row justify-content-lg-center">
        <div class="col-3">第一部分</div>
        <div class="col-3">第二部分</div>
    </div>
</div>

效果如图所示：

  • justify-content-start：头部对齐
  • justify-content-end：尾部对齐
  • justify-content-between：两端对齐
  • ==justify-content-around：间隔相等对齐==
  • justify-content-center：居中对齐
    其中头部、尾部、居中都比较好记住，两段还可以理解，这个间隔相等不太懂是什么意思。
    image-20200329125611910

间距清除

间隙沟槽(gutters)清除

BootStrap默认的栅格和列间有间隙沟槽，一般是左右-15px的margin或padding处理，您可以使用.no-gutters类来消除它，这将影响到.row行、列平行间隙及所有子列。

以下是创建这些样式的源代码。注意，列替换仅限于第一个子列，并通过属性选择器进行定位。当这产生一个更具体的选择器时，列填充仍然可以使用间隔实用程序进一步定制。

如果你需要**无边缝设计(edge-to-edge design)**，则请在父DIV中放弃.container与.container-fluid容器。

image-20200329125638797

如上图所示，“第一部分”四个字前面有个小小的间距

1
2
3
4
5
6
7
<div class="container">
    <div class="row no-gutters">
        <div class="col-sm col-md-1 col-lg-5">第一部分</div>
        <div class="col-sm col-md-10 col-lg-2">第二部分</div>
        <div class="col-sm col-md-1 col-lg-5">第三部分</div>
    </div>
</div>

在row上加个no-gutters类就可以了，无缝设计

排序和偏移

排序

  • order-0到order-12，共有13个等级。对元素进行排序。
  • 0最前面，12最后面。
  • 相同order的应该还是按原来的顺序
  • 没有加order的位置等级最高，处于所有加order的最前面。
1
2
3
4
5
6
7
8
<div class="container">
    <div class="row">
        <div class="col-md  order-2">第1部分</div>
        <div class="col-md ">第2部分</div>
        <div class="col-md  order-1">第3部分</div>
        <div class="col-md  order-0">第4部分</div>
    </div>
</div>

image-20200329125702161

不同屏幕

1
2
3
4
5
6
7
8
9
<div class="container">
    <div class="row">
        <div class="col-md order-4 order-sm-2">第1部分</div>
        <div class="col-md order-2 ">第2部分</div>
        <div class="col-md order-1 order-sm-1">第3部分</div>
        <div class="col-md order-3 order-sm-0">第4部分</div>
    </div>
</div>

超小屏幕：

image-20200329125711465

小屏幕及其以上：

image-20200329125717499

这个-sm-的屏幕大小是和原来一样的，往上兼容的。

偏移

  • offset-md-3：中屏幕及其以上，前面偏移3
1
2
3
4
5
6
<div class="container">
    <div class="row">
        <div class="col-md-3 offset-md-3 ">第1部分</div>
        <div class="col-md-3 ">第2部分</div>
    </div>
</div>

image-20200329125724816

这里在1前面就偏移了3个位置，这里的位置就是说按栅格系统的那个12算的

再比如，在“第二部分”前面偏移了6个：

1
2
3
4
5
6
<div class="container">
    <div class="row">
        <div class="col-md-3 ">第1部分</div>
        <div class="col-md-3 offset-md-6">第2部分</div>
    </div>
</div>

image-20200329125731817

文章作者: SongX64
文章链接: https://SongX64.github.io/2020/06/15/Bootstrap%E5%B8%83%E5%B1%80%E5%AE%B9%E5%99%A8/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 SongX64 !
前端 Bootstrap
赏
  目录