BootStrap栅格系统

容器（Container）

Container容器时窗口布局的最基本元素，BootStrap推荐所有样式都定义在container-fluid容器中
这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大何发宽度的窗口

<div class="container">流式容器</div>
<div class="container-fluid">固定容器</div>

响应式容器的实现

/*超小屏幕*/
        @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: purple;
                width: 960px;
            }
        }
        /*大屏幕*/
        @media (min-width: 1200px) {
            .container-self{
                background-color: deeppink;
                width: 1140px;
            }
        }

<div class="container-self">自定义容器</div>

栅格系统

BootStrap包含了一个强大的移动优先的网络系统，它是基于一个12列的布局、由5种响应式尺寸(对应不同的屏幕)
支持Sass mixins自由调用，并结合自己预定义的css，j类，用来创建各种形状和尺寸的布局

分别分成8份，2份，2份。总共12份，刚好占满一行

<div class="container">
    <div class="row">
        <div class="col-8">第一部分</div>
        <div class="col-2">第二部分</div>
        <div class="col-2">第三部分</div>
    </div>
</div>

加了md，表示md以下的格式默认每个元素占满宽度。md及md以上的格式按照8：2：2设置

<div class="container">
    <div class="row">
        <div class="col-md-8">第一部分</div>
        <div class="col-md-2">第二部分</div>
        <div class="col-md-2">第三部分</div>
    </div>
</div>

对不同size分别设置

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

对齐

垂直对齐

align-items-start 垂直顶部对齐
align-items-center 垂直居中对齐
align-items-end 垂直底部对齐

<div class="container">
    <div class="row align-items-center">
        <div class="col-md-3">第一部分</div>
        <div class="col-md-3">第二部分</div>
        <div class="col-md-3">第三部分</div>
        <div class="col-md-3">第四部分</div>
    </div>
</div>

水平对齐

justify-content-around
justify-content-between
justify-content-center
justify-content-end

最后编辑于：2020.01.31 23:40:14