Bootstrap——栅格系统

栅格系统

不管在多大的屏下，一行都是分12列(逻辑上把整个页面当成表格来布局)
container-fluid ：width是100%
container： width是固定的

格式

在head标签里引入bootstrapCDN css

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
 <style>
        div{
            height:150px;
            background-color: grey;
            border: 1px solid black;
        }
        hr{
            border-top: 4px solid rgba(0,0,0,.5);
        }
        .v-align div{
            height: 100px;
        }       
 </style>

一个container/container-fluid就是一个栅格容器、row是一行，行里分12列；

 <div class="container">
        <!-- 行 相当于表格里的tr-->
        <div class="row">
            <!--列 ： div span  section 相当于表格里的th td-->
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>      
        <hr>

自适应屏幕尺寸–分配12列

• *号代表：1~12
• Extra small（超小屏 .col-*）：<576px
• Small（小屏 .col-sm-*）：≥576px
• Medium（中屏.col-md-*)：≥768px
• Large(大屏 .col-lg-*)：≥992px
• Extra large（超大屏.col-xl-*）：≥1200px

        <!-- 行 相当于表格里的tr-->
        <div class="row">
            <!--列 ： div span  section 相当于表格里的th td-->
            <div class="col-xl-3 col-lg-6 col-md-9 col-sm-5 col-6">超大屏下占3列,大屏下占4列,中屏下占9列,小屏下占5列,超小屏下占6列</div>
            <div class="col-xl-9 col-lg-6 col-md-3 col-sm-7 col-6">超大屏下占9列,大屏下占6列，中屏下占3列，小屏下占8列,超小屏下占6列</div>
        </div>
        <!-- 宽度由内容撑开 -->
        <div class="row mt-5">
            <div class="col">宽度由内容撑开</div>
            <div class="col">宽度由内容撑开</div>
            <div class="col">宽度由内容撑开</div>
        </div>
        <hr>

对齐方式

垂直对齐

• 父级： .v-align 子级垂直布局
  align-items-() ()可以填start、center、end、

• 子级： .align-self-()

	 <div class="row mt-5 v-align align-items-start">
            <div class="col">顶对齐</div>
            <div class="col">顶对齐</div>
            <div class="col">顶对齐</div>
        </div>
        <div class="row mt-5 v-align align-items-center">
            <div class="col">居中对齐</div>
            <div class="col">居中对齐</div>
            <div class="col">居中对齐</div>
        </div>
        <div class="row mt-5 v-align align-items-end">
            <div class="col">底对齐</div>
            <div class="col">底对齐</div>
            <div class="col">底对齐</div>
        </div>
        <div class="row mt-5 v-align ">
            <div class="col align-self-start">子级alig-self-()</div>
            <div class="col align-self-start">子级alig-self-()</div>
            <div class="col align-self-start">子级alig-self-()</div>
        </div>
        <hr>

水平对齐

• justify-content-start 左对齐
• justify-content-center 居中
• justify-content-end 右对齐
• justify-content-around 平均排列
• justify-content-between 两边对齐中间自适应

 		<div class="row mt-5 v-align justify-content-start">
            <div class="col-md-2">左对齐</div>
            <div class="col-md-3">左对齐</div>
            <div class="col-md-5">左对齐</div>
        </div>
        <div class="row mt-5 v-align justify-content-center">
            <div class="col-md-2">居中</div>
            <div class="col-md-3">居中</div>
            <div class="col-md-5">居中</div>
        </div>
        <div class="row mt-5 v-align justify-content-end">
            <div class="col-md-2">右对齐</div>
            <div class="col-md-3">右对齐</div>
            <div class="col-md-5">右对齐</div>
        </div><div class="row mt-5 v-align justify-content-around">
            <div class="col-md-2">自动分配剩余宽度到margin</div>
            <div class="col-md-3">自动分配剩余宽度到margin</div>
            <div class="col-md-5">自动分配剩余宽度到margin</div>
        </div>
        <div class="row mt-5 v-align justify-content-between">
            <div class="col-md-2">两边对齐中间自适应</div>
            <div class="col-md-3">两边对齐中间自适应</div>
            <div class="col-md-5">两边对齐中间自适应</div>
        </div>
        <hr>

排序： order-*

  		<div class="row mt-5">
            <div class="col-md">第一个</div>
            <div class="col-md order-4">第二个</div>
            <div class="col-md">第三个</div>
        </div>
        <div class="row mt-5">
            <div class="col-md order-last">第一个</div>
            <div class="col-md">第二个</div>
            <div class="col-md order-first">第三个</div>
        </div>
        <hr>

偏移 ： offset-{breakpoint}-*

 		<div class="row mt-5">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>  
        </div>
        <div class="row mt-5">
            <div class="col-md-2 col-lg-3">中屏占2格，大屏占3格</div>
            <div class="col-md-2 offset-lg-3">大屏偏移3格</div>
        </div>
        <hr>

间距

使用margin工具可以让列之间产生间距；
mr-{breakpoint}-auto 往右撑开、使右侧的列到最右边
ml-{breakpoint}-auto 玩左撑开、使左边的列到最左边

		<div class="row mt-5">
            <div class="col-3 mr-lg-auto">在大屏下往右侧撑开，使右侧的列到最右边</div>
            <div class="col-3"></div>
        </div>
        <div class="row mt-5">
            <div class="col-3"></div>
            <div class="col-3 ml-lg-auto">在大屏下往左侧撑开，使左侧的列到最左边</div>
        </div>
        <hr>

嵌套

	<div class="row mt-5">
        <div class="col-md-8">
           <div class="row">
                 <div class="col"></div>
                 <div class="col"></div>
                 <div class="col"></div>
                 <div class="col"></div>
                 <div class="col"></div>
                 <div class="col"></div>
                 <div class="col"></div>
                 <div class="col"></div>
                 <div class="col"></div>
                 <div class="col"></div>
                 <div class="col"></div>
                 <div class="col"></div>
           </div>
        </div>
     </div>
</div>