BootStrap

BootStrap前端开发框架

详情请看bootstarp5网格系统

使用四部曲：

1.创建文件夹结构

2.创建html骨架结构

3.引入相关样式文件

4.书写内容

1.栅格系统的使用

1.先有一个container容器 行和列组合创建页面布局

2.行必须在容器内

3.加类前缀： class=col-lg-3

如果孩子的份数相加等于12，则孩子能占满整个container的宽度

如果孩子的份数相加小于12，则占不满，会有空白

如果孩子的份数相加大于12，则多余一列会另起一行

不同屏幕下，可以为列增加多类名写法

注意：每一列默认都有15px的左右padding值

<div class="container"></div>
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
    </div>

2.列嵌套

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <!-- 我们列嵌套最好加1个行 row 这样可以取消父元素的padding值，而且高度自动和父级一样高 -->
            <div class="row">
                <div class="col-md-6">A</div>
                <div class="col-md-6">B</div>
            </div>
        </div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
    </div>
    </div>

3.列偏移

<div class="container">
        <div class="row">
            <div class="col-md-4">左侧</div>
            <div class="col-md-4 offset-md-4">右侧</div>
        </div>
        <div class="row">
            <div class="col-md-8 offset-md-2">左侧</div>
            
        </div>
    </div>

4.列排序

<div class="container">
        <div class="row">
            <div class="col-md-4">左侧</div>
            <div class="col-md-8 order-first">右侧</div>
    </div>
order-first排序到第一