Bootstrap 5.0.0 正式发布

品|开源中国

文|Travis

Bootstrap 5.0.0 正式发布。

该版本更新内容如下：

亮点：

#32155: 更新了 make-col() mixin，以便在没有指定尺寸时生成相等的列。
#32763: 添加了新的 color-scheme() mixin
#33389: 下拉菜单现在有了可点击的选项
#33453: 添加了新的文档页脚
#33548: 画布外的 header 组件现在可以垂直对齐了
#33549: 添加了 offcanvas-top 修改器
#33634: 增加了对用 <li> 包裹的 .dropdown-item 的支持
#33626: 修复 v5 版本中标签下拉功能的回归问题

CSS：

#32155: 添加等分列 mixin
#32763: 添加 color-scheme mixin
#33292: 使 accordion 图标的旋转更加自然
#33411: 修复多选中的验证反馈图标
#33478: 使用按钮时使 .nav-link 的颜色一致
#33482: 下拉菜单--只在不使用Popper时应用定位
#33550: Spinner 对齐方式的改变
#33598: Hide validation icons from multiple selects
#33600: 让 $form-check-input-border 的默认值来源于 $black
#33607: 减少 color-scheme 的复杂性
#33642: 使用 :read-only css选择器代替 [readonly] 以保持一致性
#33658: 修正：使用 list-group 变量而不是 alert
#33736: accordion: 修复 Firefox 上的 border-top

JavaScript：

#32439: 将 BackDrop 与 modal 解耦
#33245: 解耦 Modal 的滚动条功能
#33249: 简化 Modal 配置
#33250: 简化ScrollSpy配置
#33310: 修正：让 EventHandler 更好地处理 mouseenter/mouseleave 事件
#33429: 通过基础组件移除元素事件监听器
#33451: 在 Dropdown 的 hide 方法中添加缺失的东西
#33456: 在 Dropdown 上使用 isDisabled 工具
#33466: 重构 Dropdown 的隐藏功能
#33496: 使用缓存的 noop 函数
#33497: 使用模板字面量而不是连接法
#33586: Tab.js: 修复点击处理的问题
#33589: 重构：使静态的 selectMenuItem 方法成为私有方法
#33612: 测试：修复滚动条中随机出现的 BrowserStack 故障
#33643: 修正：在 Firefox 浏览器中，点击导航栏下拉菜单中的项目不应折叠下拉菜单
#33666: Modal.js：修正对滚动条的测试
#33684: 不要改变 altBoundary 选项的值

了保证HTML5能与之前的HTML版本达到最大的兼容，HTML5对一些元素标记的省略、boolean值的属性，以及引号的省略这几方面进行了兼顾，确保与之前版本的HTML达到兼容。在下面示例中，将本节介绍的几个HTML5新应用方法集成在一起使用：

可以省略标记的元素

元素的标记分为三种情况：不允许写结束标记的元素，可以省略结束标记的元素和开始标记结束标记都可省略三种类型。不允许写结束标记的元素是指不允许使用开始标记和结束标记将元素括起来的形式，例如，换行标记正确的书写方式为“<br/>”，而“<br>…</br>”的书写就是错误的。可以省略全部标记的元素是指该元素可以完全被省略，当然被省略的标记还是以隐式的方式存在的，例如“<html>”元素省略不写时还是存在的。针对这三种情况的列举清单如表所示：

表　三种情况列举清单

参考上例1-8行代码所示。

具有boolean值的属性

在html中有一些元素的属性，当只写属性名称而不指定属性值时，表示属性值为true，如果设置该属性值为false，则不使用该属性即可。另外，要想将属性值设定true时，也可以将属性名设定为属性值，或将空字符串设定为属性值。例如input元素中的disabled与readonly就是这样的属性。参考上例10-13行代码所示。

引号使用

在html中使用属性时，属性值可以使用双引号，也可以使用单引号括起来，在HTML5中做了一些改进，当属性值不包括空字符串、“<”、“>”、“=”、单引号、双引号等字符时，属性两边的引号是可以省略的。参考上例15-17行代码所示。

、HTML表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 1.表单元素
用来声明数据提交的范围
只有在此元素内的数据可以提交给服务器 -->
<form action="http://www.baidu.com">
<!-- 2.表单控件
用来让用户输入数据的
1）input元素（9个），它们之间用type元素区分-->
<!-- 文本框
value:设置默认值 maxlength:设置最大长度 readonly:设置只读 -->
<p>
账号:<input type="text" value="lcz" maxlength="10"/>
</p>
<p>
密码:<input type="password">
</p>
<!-- 单选框 name:组名。同一组名互相排斥
checked设置默认选中-->
<p>
性别:
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女
</p>
<p>
兴趣爱好:
<input type="checkbox" checked="checked"/>音乐
<input type="checkbox" checked="checked"/>看书
<input type="checkbox"/>打球
</p>
<p>
头像上传:<input type="file"/>
</p>
<p>
<input type="hidden" value="abc"/>
</p>
<!-- 按钮
submit：提交表单中的数据
reset：将表单中的数据重置为初始值
button:没有任何功能，需通过js定义功能 -->
<p>
<input type="submit" value="注册">
<input type="reset" value="重置">
<input type="button" value="按钮">
</p>
<!-- label：用来管理表单中的文本 id:是元素的唯一标志，相当于元素的身份证号，任何元素都可以由id，程序员有义务保证元素的id不重复
可以将文本与空间绑定在一起，从而增加了控件的受力面积。-->
<p>
<input type="checkbox" id="xieyi"/>
<label for="xieyi">我已阅读并且自愿遵守此协议！</label>
</p>
<p>
城市:
<select>
<option>请选择</option>
<option selected="selected">北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>杭州</option>
</select>
</p>
<p>
简介：<br>
<textarea rows="10" cols="100">这是文本域的默认值</textarea>
</p>
</form>
</body>
</html>

在线咨询

上一篇：PHPStorm属性的HTML缩进
下一篇：如何使用CSS变量 - 通过代码示例解释

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Bootstrap 5.0.0 正式发布

您的项目需求