布局
- 新增
.row-cols-*
布局策略,从之前.row .col 的复杂布局变得更加快速 - 新增
.g-*
水平和垂直div间隙,.gx-*
水平间隙,.gy-*
垂直间隙 - 新增
.position-*
对div进行各种各样的布局
组件
文本
- 新增属性
role='button'
以实现cursor:pointer
互动,例如
<span role='button'>文字</span>
- 新增类
.user-select-all
,.user-select-auto
,.user-select-none
来实现点击选择,预设提取(?),预设不提取(?) - 新增类
.pe-none
使链接不可点击,.pe-auto
链接可以点击(默认) - 新增类
.overflow-auto
,.overflow-hidden
,.overflow-visible
,.overflow-scroll
调整overflow属性 - 新增类
.fw-*
调整粗细斜体,新增类.lh-*
调整行高
表单
- 新增附属于input的
datalist
,text,单选,可以在输入的时候进行设定的有限提示.就像搜索时候出现的历史搜索记录
<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>
- 新增按钮类
.btn-check
用以实现全选/全不选/反选/已选/未选 - 新增input的浮动标签(比较炫酷)
.form-floating
- 新增按钮布局
.d-grid
轮播
.carousel
类新增很多实用功能(虽然很少用)
导航
.navbar
新增一个.navbar-brand
类,看名字都知道通常是用来放logo的- 新增
.nav-link
实现页面滚动监听从而自动切换目录
进度
- 新增类
.spinner-border
在div和span中实现无限旋转的进度图标 - 新增类
.spinner-grow
在div和span中实现无限渐隐的进度图标
结合按钮使用更炫酷
提示
样式
- 新增
.bg-gradient
类,实现半透明白色到颜色到半透明白色的渐变