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

Posted 2021-09-15 但老师

目录

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

布局

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

提示

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

样式

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