由于组件部分官方整理的非常好,在这里不再整理
https://v4.bootcss.com/docs/4.0/components/alerts/
1.网格系统
v3:
https://v3.bootcss.com/css/#grid
v4:
https://v4.bootcss.com/docs/4.0/layout/grid/
container和container-fluid(v3,v4相同)
- container两边有一定的margin
- container-fluid占满横向全屏,无两侧margin
- 行用row,列col
- 一行共12份
<div class="container">
<div class="row">
<div class="col-lg-4" style="background-color: #09afff;"></div>
<div class="col-lg-4" style="background-color: red;"></div>
<div class="col-lg-4" style="background-color: #09afff;"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4" style="background-color: #09afff;"></div>
<div class="col-lg-4" style="background-color: red;"></div>
<div class="col-lg-4" style="background-color: #09afff;"></div>
</div>
</div>
container的不同之处
v3container由分成四段:
v4container由分成五段:
V4中可直接使用class="col-n"和class=“col”
- 在v3中只能使用col-md(lg,sm,xs)-n,实测显示在v3中使用class="col-n"和class=“col”,每个col分别占一行
- 在v4中假设使用col-4,则3个col-4占一行
- 在v4中假设使用col,则不管多少个,就算超出12份,所有的col都占一行,且均分
请看代码:(v4)
<container>
<div class="row">
<div class="col-4" style="background-color: red;"></div>
<div class="col-4" style="background-color: blue;"></div>
<div class="col-4" style="background-color: yellow;"></div>
<div class="col-4" style="background-color: yellow;"></div>
<div class="col-4" style="background-color: green;"></div>
<div class="col-4" style="background-color: red;"></div>
</div>
</container>
效果:
<container>
<div class="row">
<div class="col" style="background-color: red;"></div>
<div class="col" style="background-color: blue;"></div>
<div class="col" style="background-color: yellow;"></div>
<div class="col" style="background-color: yellow;"></div>
<div class="col" style="background-color: green;"></div>
<div class="col" style="background-color: red;"></div>
</div>
</container>
效果:
- 如果想要换行,可以加一个类 .w-100,意思是width:100%;
<container>
<div class="row">
<div class="col" style="background-color: red;"></div>
<div class="col" style="background-color: blue;"></div>
<div class="col" style="background-color: yellow;"></div>
<div class="col" style="background-color: yellow;"></div>
<div class="w-100" style="background-color: green;"></div>
<div class="col" style="background-color: red;"></div>
</div>
</container>
- 根据内容多少改变列的宽度col-auto
<div class="row" style="height:100px;border:1px solid red;">
<div class="col-lg-3" style="background-color: #09afff;"></div>
<div class="col-lg-auto mr-auto" style="background-color: red;">1111111111111</div>
<div class="col-lg-3" style="background-color: #09afff;"></div>