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 正式發布

您的項目需求