Bootstrap 5.0.0 正式發(fā)布

品|開源中國

文|Travis

Bootstrap 5.0.0 正式發(fā)布。

該版本更新內(nèi)容如下：

亮點(diǎn)：

#32155: 更新了 make-col() mixin，以便在沒有指定尺寸時(shí)生成相等的列。
#32763: 添加了新的 color-scheme() mixin
#33389: 下拉菜單現(xiàn)在有了可點(diǎn)擊的選項(xiàng)
#33453: 添加了新的文檔頁腳
#33548: 畫布外的 header 組件現(xiàn)在可以垂直對齊了
#33549: 添加了 offcanvas-top 修改器
#33634: 增加了對用 <li> 包裹的 .dropdown-item 的支持
#33626: 修復(fù) v5 版本中標(biāo)簽下拉功能的回歸問題

CSS：

#32155: 添加等分列 mixin
#32763: 添加 color-scheme mixin
#33292: 使 accordion 圖標(biāo)的旋轉(zhuǎn)更加自然
#33411: 修復(fù)多選中的驗(yàn)證反饋圖標(biāo)
#33478: 使用按鈕時(shí)使 .nav-link 的顏色一致
#33482: 下拉菜單--只在不使用Popper時(shí)應(yīng)用定位
#33550: Spinner 對齊方式的改變
#33598: Hide validation icons from multiple selects
#33600: 讓 $form-check-input-border 的默認(rèn)值來源于 $black
#33607: 減少 color-scheme 的復(fù)雜性
#33642: 使用 :read-only css選擇器代替 [readonly] 以保持一致性
#33658: 修正：使用 list-group 變量而不是 alert
#33736: accordion: 修復(fù) Firefox 上的 border-top

JavaScript：

#32439: 將 BackDrop 與 modal 解耦
#33245: 解耦 Modal 的滾動(dòng)條功能
#33249: 簡化 Modal 配置
#33250: 簡化ScrollSpy配置
#33310: 修正：讓 EventHandler 更好地處理 mouseenter/mouseleave 事件
#33429: 通過基礎(chǔ)組件移除元素事件監(jiān)聽器
#33451: 在 Dropdown 的 hide 方法中添加缺失的東西
#33456: 在 Dropdown 上使用 isDisabled 工具
#33466: 重構(gòu) Dropdown 的隱藏功能
#33496: 使用緩存的 noop 函數(shù)
#33497: 使用模板字面量而不是連接法
#33586: Tab.js: 修復(fù)點(diǎn)擊處理的問題
#33589: 重構(gòu)：使靜態(tài)的 selectMenuItem 方法成為私有方法
#33612: 測試：修復(fù)滾動(dòng)條中隨機(jī)出現(xiàn)的 BrowserStack 故障
#33643: 修正：在 Firefox 瀏覽器中，點(diǎn)擊導(dǎo)航欄下拉菜單中的項(xiàng)目不應(yīng)折疊下拉菜單
#33666: Modal.js：修正對滾動(dòng)條的測試
#33684: 不要改變 altBoundary 選項(xiàng)的值

了保證HTML5能與之前的HTML版本達(dá)到最大的兼容，HTML5對一些元素標(biāo)記的省略、boolean值的屬性，以及引號的省略這幾方面進(jìn)行了兼顧，確保與之前版本的HTML達(dá)到兼容。在下面示例中，將本節(jié)介紹的幾個(gè)HTML5新應(yīng)用方法集成在一起使用：

可以省略標(biāo)記的元素

元素的標(biāo)記分為三種情況：不允許寫結(jié)束標(biāo)記的元素，可以省略結(jié)束標(biāo)記的元素和開始標(biāo)記結(jié)束標(biāo)記都可省略三種類型。不允許寫結(jié)束標(biāo)記的元素是指不允許使用開始標(biāo)記和結(jié)束標(biāo)記將元素括起來的形式，例如，換行標(biāo)記正確的書寫方式為“<br/>”，而“<br>…</br>”的書寫就是錯(cuò)誤的。可以省略全部標(biāo)記的元素是指該元素可以完全被省略，當(dāng)然被省略的標(biāo)記還是以隱式的方式存在的，例如“<html>”元素省略不寫時(shí)還是存在的。針對這三種情況的列舉清單如表所示：

表　三種情況列舉清單

參考上例1-8行代碼所示。

具有boolean值的屬性

在html中有一些元素的屬性，當(dāng)只寫屬性名稱而不指定屬性值時(shí)，表示屬性值為true，如果設(shè)置該屬性值為false，則不使用該屬性即可。另外，要想將屬性值設(shè)定true時(shí)，也可以將屬性名設(shè)定為屬性值，或?qū)⒖兆址O(shè)定為屬性值。例如input元素中的disabled與readonly就是這樣的屬性。參考上例10-13行代碼所示。

引號使用

在html中使用屬性時(shí)，屬性值可以使用雙引號，也可以使用單引號括起來，在HTML5中做了一些改進(jìn)，當(dāng)屬性值不包括空字符串、“<”、“>”、“=”、單引號、雙引號等字符時(shí)，屬性兩邊的引號是可以省略的。參考上例15-17行代碼所示。

、HTML表單

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 1.表單元素
用來聲明數(shù)據(jù)提交的范圍
只有在此元素內(nèi)的數(shù)據(jù)可以提交給服務(wù)器 -->
<form action="http://www.baidu.com">
<!-- 2.表單控件
用來讓用戶輸入數(shù)據(jù)的
1）input元素（9個(gè) ），它們之間用type元素區(qū)分-->
<!-- 文本框
value:設(shè)置默認(rèn)值 maxlength:設(shè)置最大長度 readonly:設(shè)置只讀 -->
<p>
賬號:<input type="text" value="lcz" maxlength="10"/>
</p>
<p>
密碼:<input type="password">
</p>
<!-- 單選框 name:組名。同一組名互相排斥
checked設(shè)置默認(rèn)選中-->
<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：提交表單中的數(shù)據(jù)
reset：將表單中的數(shù)據(jù)重置為初始值
button:沒有任何功能，需通過js定義功能 -->
<p>
<input type="submit" value="注冊">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</p>
<!-- label：用來管理表單中的文本 id:是元素的唯一標(biāo)志，相當(dāng)于元素的身份證號，任何元素都可以由id，程序員有義務(wù)保證元素的id不重復(fù)
可以將文本與空間綁定在一起，從而增加了控件的受力面積。-->
<p>
<input type="checkbox" id="xieyi"/>
<label for="xieyi">我已閱讀并且自愿遵守此協(xié)議！</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">這是文本域的默認(rèn)值</textarea>
</p>
</form>
</body>
</html>

在線咨詢

上一篇：PHPStorm屬性的HTML縮進(jìn)
下一篇：如何使用CSS變量 - 通過代碼示例解釋

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Bootstrap 5.0.0 正式發(fā)布

您的項(xiàng)目需求