如果是写用户中心，那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>