栅格系统
不管在多大的屏下,一行都是分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>