大香蕉精品网,碰碰视频,国产人妻人伦精品无码.麻花豆,999一区二区三区,色护士无遮挡精品,成人精品黄色稫利视频,亚洲免费高清视频,经典无码一区二区三区

Bootstrap 是最流行的 CSS 庫之一。它允許開發(fā)人員輕松使用漂亮的樣式和組件并創(chuàng)建響應式網站。使用 Bootstrap 可以節(jié)省開發(fā)人員的時間，尤其是對于幾乎每個項目中都使用的組件。

Bootstrap 5（當前的主要版本，于 2021 年 5 月發(fā)布）帶來了大量的變化和改進，包括添加新組件、新類、舊組件的新樣式、更新的瀏覽器支持、刪除一些舊組件，以及更多。

在本文中，我們將介紹 Bootstrap 5 中的更改、刪除的內容，以及最令人興奮的新內容。

何時使用 Bootstrap（何時不使用）

Bootstrap 將自己標榜為“世界上最流行的用于構建響應式、移動優(yōu)先站點的框架”，并且在 GitHub 上擁有 152k 顆星，我認為這種說法并不過分。特別是對于初學者來說，Bootstrap 是開始創(chuàng)建現代和干凈網站的好方法。它可以輕松實現復雜的、移動優(yōu)先的設計，并提供您在多個項目中可能需要的許多組件。

Bootstrap的學習曲線很低，很適合不需要構建步驟的靜態(tài)網站，因為你可以直接從Bootstrap的CDN引用庫。這與其他一些流行的CSS框架形成鮮明對比，這些框架可能為使用捆綁器或任務運行器進行優(yōu)化。

不過，你也應該知道，Bootstrap并不是一顆銀彈。對于沒有經驗的人來說，Bootstrap很容易產生混亂和復雜的標記。就千字節(jié)而言，它也是一個相對較重的庫（盡管每次發(fā)布都在改進），所以如果你只使用它的一兩個功能，它可能不是最佳選擇。就像任何抽象一樣，如果你對底層技術有很好的掌握，并能對何時使用它做出明智的決定，那將會有很大的幫助。

從 Bootstrap 4 升級到 5

從Bootstrap 4升級到5一般來說是很容易的。Bootstrap 4中的大部分組件、它們的類和實用類在Bootstrap 5中仍然可用。在遷移時，您應該關注的主要事情是您正在使用的類或組件是否已經被刪除。如果它們被刪除了，那么可以使用實用工具類替換它們，或者使用其他方法來實現相同的結果。你應該關注的第二件事是在組件中從 data- 屬性轉換到 data-bs-，這些組件需要JavaScript作為其功能的一部分。(我們將在下一節(jié)中詳細介紹這一點。)

如果你使用Bootstrap的Sass文件，有一些變量和mixin被重命名。Bootstrap 5有一個廣泛和詳細的部分，所有關于定制，以及關于每個組件的Sass變量和mixin的詳細信息，在他們各自的文檔頁面。

變化的內容

Bootstrap 5 為作為庫的 Bootstrap 帶來了核心更改，包括所需依賴項、瀏覽器支持等方面的更改。它還對我們在以前版本中一直使用的組件和類進行了更改。

jQuery不再是一個依賴項

與之前的版本相比，jQuery 不再是 Bootstrap 的依賴項?，F在，你可以在沒有它的情況下充分利用 Bootstrap，但你仍然需要 Popper.js。這一變化使得在不需要或使用 jQuery 的項目中使用 Bootstrap 變得更容易——例如在將 Bootstrap 與 React 結合使用時。

如果Bootstrap是你網站的一部分，你仍然可以使用jQuery。如果Bootstrap在 window 對象中檢測到jQuery，它會自動將所有組件添加到jQuery的插件系統(tǒng)中。因此，如果您從v4遷移到v5，就不需要擔心這個更改，并且仍然可以在必要時使用jQuery和Bootstrap。

但如果你在網站中使用jQuery，但你不希望Bootstrap使用jQuery呢?你可以通過在文檔的body元素中添加屬性 data-bs-no-jquery 來實現：

<body data-bs-no-jquery="true">
</body>

沒有jQuery，Bootstrap是如何工作的？例如，在v4中，你可以在JavaScript中使用以下代碼來創(chuàng)建一個Toast元素。

$('.toast').toast()

在Bootstrap 5中，如果你的網站已經使用了jQuery，你可以使用同樣的代碼來創(chuàng)建一個Toast元素。如果沒有jQuery，你需要使用類似下面的代碼來創(chuàng)建一個Toast元素：

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

這只是使用原生JavaScript來查詢文檔中具有 .toast 類的元素，然后使用 new bootstrap.Toast() 在元素上初始化一個Toast組件。

瀏覽器支持更改

在 v4 之前，Bootstrap 曾經支持 Internet Explorer (IE) 10 和 11。從 Bootstrap 5 開始，對 IE 的支持已完全取消。因此，如果您的網站需要支持 IE，則在遷移到 v5 時可能應該小心。

瀏覽器支持的其他變化包括：

Firefox和Chrome現在從60版開始支持
Safari和iOS支持現在從版本12開始
Android瀏覽器和WebView支持現在從版本6開始

數據屬性的更改

Bootstrap 5改變了數據屬性的命名方式，這些數據屬性通常被其使用JavaScript作為功能的一部分的組件所使用。以前，大多數依賴某些JavaScript功能的組件的數據屬性都是以 data- 開頭。例如，要在Bootstrap 4中創(chuàng)建一個Tooltip組件：

<button 
  type="button" 
  class="btn btn-secondary" 
  data-toggle="tooltip" 
  data-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

請注意 data-toggle 和 data-placement 的用法。在Bootstrap 5中，這些組件的數據屬性現在以 data-bs 開頭，以方便命名Bootstrap屬性。例如，要在Bootstrap 5中創(chuàng)建一個Tooltip組件：

<button 
  type="button" 
  class="btn btn-secondary" 
  data-bs-toggle="tooltip" 
  data-bs-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

我們不使用 data-toggle 和 data-placement ，而使用 data-bs-toggle 和 data-bs-placement。如果你在Bootstrap中使用JavaScript來創(chuàng)建組件，可能不需要做任何改變。但是，如果你的組件只依靠數據屬性來運作，你需要將所有以data開頭的數據屬性改為以 data-bs 開頭。

修復了一些Bug

在 Bootstrap 4 的“瀏覽器和設備”下的文檔中，列出了一些瀏覽器上發(fā)生的Bug。這些Bug不再列在 Bootstrap 5 的同一列表中。該列表包括以下內容：

在iOS上，鼠標懸停樣式被應用到觸摸事件的元素上，這是不可取的，因為它被認為是一個意外的行為。
在Safari 8及以上版本中使用 .container 會導致打印時字體變小。
Border radius被驗證反饋所覆蓋（但可以通過增加一個額外的 .has-validation 類來解決）。

Bootstrap 4文檔中的bug和問題列表還詳細說明了在不再支持的瀏覽器版本中出現的bug。

其他變化

還有更多的變化，要么是微小的，要么不會引起劇烈的、值得注意的變化。這些變化是：

Bootstrap 5現在使用Popper v2。確保升級你的Popper版本。Popper v1將不再工作，因為Bootstrap 5需要 @popperjs/core 而不是以前的 Popper.js。
現在，Bootstrap 5可以作為一個模塊在瀏覽器中使用，使用的是作為ECMAScript模塊構建的Bootstrap版本。
由于Libsass和Node Sass (Bootstrap 4中使用的)現在已棄用，Bootstrap 5使用Dart Sass將源Sass文件編譯為CSS。
以前，為了使一個元素隱藏，但又能讓輔助技術發(fā)現它，可以使用 .sr-only 類?，F在這個類被替換為 .visually-hidden。
以前，為了使一個交互式元素隱藏起來，但又能讓輔助技術發(fā)現它，你需要同時使用 .sr-only 和 .sr-only-focusable 類。在Bootstrap 5中，你只需要使用 .visually-hidden-focusable 而不需要 .visually-hidden。
具有命名來源的Blockquotes現在由 <figure> 元素包裹。以下是 Bootstrap 5 中 Blockquotes 現在的示例：
在以前的版本中，表的樣式是繼承的。這意味著，如果一個表嵌套在另一個表中，嵌套的表將繼承父表。在Bootstrap 5中，表格樣式是相互獨立的，即使它們是嵌套的。
Border utilities現在支持表格。這意味著你現在可以使用邊框顏色工具改變表格的邊框顏色。下面是一個在Bootstrap 5中使用表格的border utilities的例子。
面包屑的默認樣式已經更改，刪除了在以前版本中默認的灰色背景、填充和邊框半徑。下面是 Bootstrap 5 中面包屑樣式的示例：
使用 left 和 right 來引用使用 start 和 end 的位置的類的命名已更改。例如，下拉列表中的 .dropleft 和 .dropright 分別替換為 .dropstart 和 .dropend 。
與前一點類似，使用 l 表示左和 r 表示右的實用程序類現在分別使用 s 表示開始和 e 表示結束。例如，.mr-* 現在是 .me-*。
用于范圍輸入的 .form-control-range 類現在是 .form-range。
Gutters現在設置為 rem，而不是以前的 px。
.no-gutters 已經被改名為 .g-0，作為新添加的Gutters類的一部分（在后面的章節(jié)中會有更多介紹）。
鏈接現在默認下劃線，即使沒有懸停。
自定義表單元素類的名稱已經從 .custom-* 變成了表單組件類的一部分。例如，.custom-check 被 .form-check 所取代，.custom-select 被 .form-select 所取代，以此類推。
現在需要在標簽中添加 .form-label。
Alert、面包屑、卡片、下拉菜單、列表組、模態(tài)、彈出窗口和工具提示現在使用相同的填充值，使用 $spacer 變量。
徽章元素中的默認填充現在從 .25em/.5em 更改為 .35em/.65em。

切換按鈕的封裝器被用于復選框和單選按鈕?，F在的標記也被簡化了。在Bootstrap 4中，切換按鈕的復選框是通過以下標記實現的：

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

在Bootstrap 5中，可以用一種更簡單的方式來完成：

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Checked</label>

按鈕的 active 和 hover 狀態(tài)在顏色上增加了對比。
關閉按鈕類現在從 .close 重命名為 .btn-close，并使用SVG圖標而不是 &times。
下拉分割線現在更暗，以更好的對比。

Navbar內容現在應該被包裝在容器元素中。例如在Bootstrap 4中：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  ...
</nav>

在 Bootstrap 5 中變成：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    ...
  </div>
</nav>

popover 組件中的 .arrow 類現在被 .popover-arrow 替換，Tooltip 組件中的 .arrow 類現在被 .tooltip-arrow 替換。
默認 Toast 持續(xù)時間更改為 5 秒。
工具提示、下拉菜單和彈出窗口組件中 fallbackPlacements 的默認值已更改為數組 ['top', 'right', 'bottom', 'left']。
.text-monospace 已重命名為 .font-monospace。
.font-weight-* 已重命名為 .fw-*，.font-style-* 已重命名為 .fst-*。
.rounded-sm 和 .rounded-lg 現在已被一系列從 0 到 3 的四舍五入類 .rounded-* 所取代。

有什么新東西？

最后，在版本5中，Bootstrap為它的庫添加了許多令人興奮的新功能。其中一些變化包括新的特性、新的受支持的概念、新的組件、新的實用程序類等等。

響應式字體大小現在是默認啟用

響應性字體大?。≧FS）在以前的Bootstrap版本中出現過，但默認是禁用的。Bootstrap 5默認啟用了RFS，使Bootstrap中的字體更具響應性。RFS是Bootstrap創(chuàng)建的一個輔助項目，最初是為了響應地縮放和調整字體大小?，F在，它也能為margin、padding、box-shadow等屬性做同樣的事情。

它所做的基本上是根據瀏覽器的尺寸計算出最合適的數值，這些計算在編譯時被翻譯成計算函數。使用RFS也拋棄了以前使用px的做法，而使用rem，因為它有助于實現更好的響應性。

如果你在Bootstrap中使用Sass文件，你現在可以使用由RFS制作的mixins，包括字體大小、邊距、填充等等，這允許你確保你的組件和樣式是響應的。

從右到左的支持

Bootstrap 5使用RTLCSS增加了從左到右（RTL）的支持。由于Bootstrap在全世界范圍內使用，因此，開箱即提供RTL支持是一個重要的步驟。出于這個原因，Bootstrap 5 放棄了特定的方向命名（例如，使用 left 和 right），轉而使用 start 和 end。這使得 Bootstrap 足夠靈活，可以同時處理從左到右 (LTR) 和 RTL 的網站。例如，.dropleft 現在是 .dropstart，.ml-* 現在是 .ms-*，等等。

為了讓Bootstrap識別并在你的網站上應用RTL風格，你需要將 <html> 的 dir 設置為 rtl，并添加一個帶有網站RTL語言的 lang 屬性。例如，lang="ar"。

最后，你需要包含Bootstrap的RTL CSS文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

這樣，你的網站就可以支持RTL了。

新組件

Bootstrap 5 為庫帶來了一些新組件。其中一些組件是其他組件的一部分，現在是獨立組件。

Accordion 手風琴

以前，Accordion是Collapsible組件的一部分，而不是它自己的組件。在Bootstrap 5中，Accordion是一個新的組件。Accordion有一個新的類，即 .accordion，它里面有一個accordion項目的列表。此外，與之前Bootstrap 4中的風格相比，Accordion有一個新的風格。下面是accordion組件的一個例子。

Offcanvas 重疊側邊欄

另一個新組件是 Offcanvas，它允許您創(chuàng)建一個重疊的側邊欄。這個側邊欄通常用于在小型設備上顯示菜單。你可以通過在LTR中使用 .offcanvas-start 代表左邊，.offcanvas-top 代表上面，.offcanvas-end 代表LTR中的右邊，以及 .offcanvas-bottom 代表下面，將其放置在頁面的任何一邊。你也可以指定Offcanvas是否應該有背景。下面是Offcanvas組件的使用示例：

Floating Label 浮動標簽

Floating Label 是 Form 組件的一個新組件。它允許你創(chuàng)建一個輸入，其標簽一開始看起來像一個占位符，然后當輸入收到焦點時，標簽會浮動到輸入的頂部，高于數值。它也適用于 <select> 元素和 <textarea> 元素。以下是使用浮動標簽的示例：

除了新的組件，還有現有組件的新類、新的實用類、新的輔助類，以及更多。

原文：https://www.sitepoint.com/bootstrap-5-new-features-examples
作者：Shahed Nasser

Bootstrap 5都有什么新功能？