Bootstrap5相对于4的个人更新笔记

分手后的思念是犯贱 2022-09-09 11:44 139阅读 0赞

### 目录 ###

*  布局
 *  组件
 *   *  文本
     *  表单
     *  轮播
     *  导航
     *  进度
     *  提示
     *  样式

# 布局 #

*  新增`.row-cols-*`布局策略,从之前.row .col 的复杂布局变得更加快速
 *  新增`.g-*`水平和垂直div间隙,`.gx-*`水平间隙,`.gy-*` 垂直间隙
 *  新增`.position-*`对div进行各种各样的布局

# 组件 #

## 文本 ##

*  新增属性`role='button'`以实现`cursor:pointer`互动,例如

*  新增类`.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中实现无限渐隐的进度图标  
    结合按钮使用更炫酷

## 提示 ##

*  新增`.toast`组合套件,以实现推送通知消息

## 样式 ##

*  新增`.bg-gradient`类,实现半透明白色到颜色到半透明白色的渐变