BootStrap栅格系统

容器（Container）

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

流式容器
固定容器

响应式容器的实现

/*超小屏幕*/
        @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;
            }
        }

自定义容器

栅格系统

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

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

    

        
第一部分
        
第二部分
        
第三部分
    

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

    

        
第一部分
        
第二部分
        
第三部分
    

对不同size分别设置

    

        
第一部分
        
第二部分
        
第三部分
    

对齐

垂直对齐

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

    

        
第一部分
        
第二部分
        
第三部分
        
第四部分
    

水平对齐

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