bootstrap常用组合-随波逐码
以键盘为笔，代码写热爱；以 bug 为阶，打磨成长路。记录开发点滴、拆解技术难题，做有温度的技术分享，和大家在编程路上共赴山海～
如果是写用户中心，那element可能是最好的选择，但如果是前台展示页面，那bootstrap无疑是更好的选择，尤其是那些css类库，几乎可以不用手写css就能完成页面的布局操作，除了常用css类库，有一些类库名称不好记，现在整理在这里，需要的时候直接复制就可以使用。
可响应式
<div class="pt-1 pt-sm-2 pt-md-3 pt-lg-4 pt-xl-5 pt-xxl-1"> 这里的pt默认是1，如果在sm的断点时是2， md是3，lg是4，xxl还是1，bootstrap一共提供了 5个断点帮助我们在这5个页面宽度时候切换不同的宽度； sm: ≥576px, md: ≥768px, lg: ≥992px, xl: ≥1200px, xxl: ≥1400px </div>
容器
<div class="container"> <576px时候100%显示 </div> <div class="container-sm"> <576px时候100%显示 </div> <div class="container-md"> <768px时候100%显示 </div> <div class="container-lg"> <992x时候100%显示 </div> <div class="container-xl"> <1200x时候100%显示 </div> <div class="container-xxl"> <1400x时候100%显示 </div> <div class="container-fluid"> 任何时候都100%显示 </div>
栅格
bootstrap的栅格默认将行分为12个列，通过设置col参数来控制col的宽度比例
<!--均等的一行两列--> <div class="row"> <div class="col">6</div> <div class="col">6</div> </div> <!--均等的两行三列--> <div class="row"> <div class="col">4</div> <div class="col">4</div> <div class="col">4</div> <div class="col">4</div> <div class="col">4</div> <div class="col">4</div> </div> <!--两列铺满整行，并且第一个列是第二个列的一半宽度--> <div class="row"> <div class="col-2">4</div> <div class="col-4">8</div> </div> <!--第一个列会随内部内容的宽度做自动适配，第二个列将会占满剩余的宽度，常用于文章列表的展示--> <div class="row"> <div class="col-auto">...</div> <div class="col">...</div> </div> <!--两个自动适配内部宽度的列，分别贴近左右两侧，并横向居中对齐，常用于导航栏左右两侧贴边显示。--> <div class="row justify-content-between align-items-center"> <div class="col-auto">...</div> <div class="col-auto">...</div> </div> <!--通过row参数来控制col,在手机上是一列，pad上是两列，而在pc电脑上是3列，经常用于内容列表--> <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3"> <div class="col">...</div> <div class="col">...</div> <div class="col">...</div> </div> <!--通过沟槽设置列的间隔，gx横向，gy标识纵向，g标识全部，一同提供了1-5这几个数值--> <div class="row g-5"> <div class="col">...</div> <div class="col">...</div> <div class="col">...</div> </div>
