bootstrap5基本使用
前言
bootstrap5官方文档： https://getbootstrap.com/docs/5.1 bootstrap虽然没有Vue强大，但是对于新手快速建造精美的web有着非常大的帮助。我觉得bootstrap5更像是一个组件库，对于小型网页来说非常的nice。组件库非常精美、简洁。而且上手很快。非常的高兴的是官方文档很详细，不仅有详细的api文档，而且有完善的示例，对新手来说，一个例子胜过千字文。
导入
css导入
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">js导入
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>常用
隐藏元素：
.d-none
.visually-hidden
Flex基础
注意
：flex是对容器操作的，是设置的容器，但是控制的是容器内的内容。
css原生flex布局详见： https://www.runoob.com/w3cnote/flex-grammar.html
- 开启
display:flex;- 对主轴的操作：水平对齐
justify-content:center- 对交叉轴的操作：垂直对齐
align-items:centerContainer
container是最基本的布局。 给一个元素的class赋值为container之后，如果显示屏幕小于576，元素将要横向占满屏幕，但是大于576小于576像素的时候，宽度恒定为540,。就是说你的屏幕很宽的时候，元素永远不会横向占满整个屏幕，与边距有孔隙。但是赋值为.container-fluid的时候，元素永远横向占满屏幕，不会留有孔隙。
Gird网格
container里面自动就有gird布局，里面的row元素内的列元素没有类属性col则元素占一行的全部宽度。若有，则会按照12列原则分配列宽。
实例：
<div class="container">
<div class="row">
<div class="col">
Column
<div class="col">
Column
<div class="col">
Column
</div>
列的class属性解释：
.col-6
一行有12列，这个列表示占6份，用来调整列元素的宽度
.col-lg-6
当视图宽度大于992时，col才起作用，此列占6份。如果小于，则无效果，等于没有col这个东西。
.col-md-auto
当视图大于md时，自动计算宽度，重新排列。
.row-cols-2
设置在行元素中，表示一行中最多显示几个列元素。
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
.row-cols-auto
设置在行元素中。列数自适应，一行能放下列元素就排，放不下就自动另起一行排。
行元素类属性也可以加断点。
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>Columns列
垂直居中
.align-items-
设置在row元素类中。后加start、center、end，分别是顶部对齐，垂直居中，底部对齐
.align-self-
与上面的不同但相似，设置在column元素类中，单独对自身垂直方向对齐
<div class="row align-items-center">
<div class="col">
One of three columns
<div class="col">
One of three columns
<div class="col">
One of three columns
</div> <div class="row">
<div class="col align-self-start">
One of three columns
<div class="col align-self-center">
One of three columns
<div class="col align-self-end">
One of three columns
</div>水平居中
.justify-content-
设置在row元素类中。后加start、center、end、around、between、evenly。表示左端对齐，水平居中、右端对齐、水平等距对齐，两端对齐。
.order-
给列排序，可以改变列的顺序
.offset-
列偏移几个宽度。
如果水平居中无效，那么试一试class加上
d-flex
间距margin、padding
.mx- .my- .mb- .mt- .ms- .me-
设置margin
.p-
设置padding，同上
Gutter列填充
特别方便、简单、规范的设置元素间距。
.gx-
水平填充
.gy-
垂直填充
.g-
水平垂直都设置
Reboot 重置样式
Typography排版
设置标题大小
.h1 .h2 .h3
文本样式
<del><s><strong><u><em>
列表去除样式
.list-unstyled
Image图片
.img-fluid
响应式图片。等同于：max-width: 100%;随宽度自适应
.img-thumbnail
: 给图像加上一像素的边框
对齐：
.float-start
或者想居中对齐的话，给父对象设置
.text-center
四角变圆：
rounded
Table表格
标准格式
<table class="table">
<thead>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</thead>
<tbody>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tbody>
</table>
表格行颜色设置：
.table-颜色变量
斑马纹:
<table class="table table-striped">
</table>悬停行
<table class="table table-hover">
</table>
对齐：
.align-
Figures图形组件
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>Form表单控件
标准
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
<button type="submit" class="btn btn-primary">Submit</button>
</form>input禁用
<input ... disabled>input只读
<input ... readonly>
input调整大小：
.form-control-lg
input颜色选择器：
<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">Datalists数据列表
<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>Nav导航栏
导航栏控件也是“容器”，是可以自适应的控件。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">🚽导航栏名称</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">链接1</a>
<li class="nav-item">
<a class="nav-link" href="#">链接2</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">项1</a></li>
<li><a class="dropdown-item" href="#">项2</a></li>
<hr class="dropdown-divider">
<li><a class="dropdown-item" href="#">项3</a></li>
<li class="nav-item">
<a class="nav-link disabled">禁止按下</a>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="搜索" aria-label="Search">
<button class="btn btn-outline-success " type="submit">搜索</button>
</form>
</nav>Tab
<ul class="nav nav-tabs">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">选项1</a>
<li class="nav-item">
<a class="nav-link" href="#">选项2</a>
<li class="nav-item">
<a class="nav-link" href="#">选项3</a>
<li class="nav-item">
<a class="nav-link disabled">选项4（禁止状态）</a>
</ul>UI小组件
1、折叠框（Accordion）
使用折叠框组件需要在div元素中添加class属性：
.accordion
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
</button>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>1、</strong> 这是一个内容
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
</button>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="accordion-body">