Bootstrap 4 的期望

已發表: 2015-11-17

在過去的幾年裡，Bootstrap 變得非常流行。您很有可能遇到或創建了包含 Bootstrap 元素的 WordPress 主題。它已經從一個基本的預響應框架發展為一個健壯、功能豐富的現代響應框架。 Bootstrap 3 已經出現了很長一段時間，因此了解 Bootstrap 4 的下一步是令人興奮的。

引導狀態 4

Bootstrap 4 目前正在開發中，還沒有準備好在生產中使用。目前它是 alpha 版本。這是預覽和熟悉它將如何幫助您完成未來項目的好機會。

Bootstrap 4 的文檔還沒有完成，所以實驗是測試一些新功能的好方法。一旦它正式可用於生產，您將清楚地了解所有重大的新改進。

bootstrap-4-下載

專為現代瀏覽器打造

隨著我們在 Web 上的發展，在使用 Web 開發所提供的最新和最好的東西的同時支持舊瀏覽器變得越來越難。無論這對你來說是否是音樂，我們都同意更好的 CSS3 技術在使用現代瀏覽器時變得更容易。 Bootstrap 4 可能是徹底擺脫舊瀏覽器的完美方式。在此更新中，完全放棄了對 Internet Explorer 8 的支持。請記住，該框架仍然支持 Internet Explorer 9，並且仍然支持 CSS3，沒有很多問題。

改進的重置

您可能已經習慣了 Normalize.css，這是一個很好的重置選項。有一個新的和改進的重置，其中添加了 Bootstrap 特定的東西，稱為 reboot.css。 Bootstrap 的細節是 box-sizing 之類的：邊框、rems 作為度量單位、鏈接樣式和表單樣式。它是 Normalize.css 和特定 Bootstrap 需求之間的完美結合，因此您一定會有一個良好的開端。

bootstrap-4-重啟

SASS

在 Bootstrap 的前幾天，似乎首選 LESS。隨著行業變化和設計師偏好向 SASS 傾斜，這是當前的青睞。如果您還記得版本 3，那是 SASS 選項與 port 選項一起可用的時候。截至目前，還沒有計劃支持 LESS。

bootstrap-4-sass

定制

Bootstrap 4 使您可以輕鬆創建自定義設計，所有這些都以有組織的方式完成。所有變量選項都合併到一個文件中。 SASS 可以很容易地編譯，並且不需要像過去那樣單獨的樣式表。

bootstrap-4 變量

Bootstrap 4 中有很多新的自定義選項。您可以在此處查看當前狀態。隨著細節的不斷發布，它很可能會有所發展。

請記住，這些是在開始時設置的簡單自定義：

正文默認值
顏色變量
彈性盒
CSS3 設計選項，如過渡、圓角、陰影等。
間距測量
鏈接樣式
網格斷點
網格容器
網格列
字體大小
組件
表
更多的！

Flexbox 有人嗎？

Flexbox 肯定越來越受歡迎，我們會看到越來越多的網頁設計師使用它。這是一個很棒的工具，因為它提供了簡單靈活的佈局選項和 CSS 樣式。如果您發現自己喜歡在父元素中輕鬆垂直對齊內容，借助媒體查詢跨設備和屏幕分辨率重新排序內容，並欣賞在網格中具有等高列的簡單方法，那麼 Flexbox 是一個很好的解決方案.

在您運行並轉換所有項目之前，有一件重要的事情需要提及。儘管瀏覽器支持大幅增加，但 Internet Explorer 9 仍然缺乏對 Flexbox 的支持。在易用性方面，如果您不需要 IE9 支持，Bootstrap 4 可以讓您輕鬆使用 Flexbox。本質上，您所要做的就是找到_variables.scss文件並將 $enable-flex 從 false 更改為 true。如果你熟悉 SASS，這是一件很快的事情。

網格更新

如果您長期以來一直是 Bootstrap 的粉絲，那麼您可能是網格系統如何工作以及命名約定方面的專家。使用 Bootstrap 4，語法保持不變，但使用的測量值有所不同。網格系統現在基於“rems”。如果您習慣於像素完美的設計，這是一個調整，因為現在事情會更加流暢。

與我們已經習以為常的像素分開時，讓我們看一下.container和.row. 容器現在有一個以 rems 為單位的最大寬度設置。行的默認負左右邊距為-.9375rem ，而列的默認左右填充為0.9375rem 。您可能還記得，這些值以前在 Bootstrap 3 中是15px 。這些新的 rem 值與之相當。

增強的媒體查詢

以前版本的 Bootstrap 中的媒體查詢有點籠統，有時必須創建自定義查詢。這是他們的樣子：

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

現在，可以使用這些更新的媒體查詢採取更移動的方法：

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }

// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }

// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }

如果您想要不同的東西，如果您想選擇自己的斷點，可以在 SASS 中配置斷點。

引導 4 卡

卡作為替代品

熟悉面板、孔和縮略圖？卡片現在是最新最好的，並提供了一些很棒的樣式選擇。一個例子是卡片組。即使文本數量不同，卡片的高度也相同，而不依賴於 JavaScript。這適用於 Flexbox 和默認網格模式。使用 Flexbox 時，卡片是使用 Flexbox 屬性構建的。默認網格使用 CSS 技巧來避免對 JavaScript 的需求。容器使用display: table; 並且每個“卡片”都是display: table-cell; 給它表格屬性——這是相等列高的來源。

排版

還記得網格現在是如何使用 rems 的嗎？好吧，排版也會這樣做才有意義！考慮這一點時，請記住所有字體大小都與根元素（即 HTML 標記）相關。當您更改 HTML 標記上的字體大小（或任何其他樣式）時，您可以輕鬆地在整個項目中設置樣式和縮放樣式。

假設您的 HTML 元素的樣式設置為font-size: 16px 。假設你希望你的 h5 標籤是那個大小，你會聲明一個 1rem 的字體大小。

h5 {
font-size: 1rem;
}

現在，可能會涉及一些數學問題。如果您希望您的 h1 標籤為 40 像素，請按以下方法計算：

h1 {
font-size: 2.5rem; /* 16 * 2.5 = 40px */
}

還沒感覺rems？如果您願意，您仍然可以使用像素和 ems 來調整大小。

bootstrap-4-標題

更小的文件大小

Bootstrap 4 佔用空間更小。它實際上比最新版本 Bootstrap 3 小了大約 30%。它以前大約是 ~123kb，現在是 ~88kb。它更小而且仍然具有相同的強大功能，這真是太棒了。

請記住，可以選擇僅使用您需要的 Bootstrap 部分，這會使文件大小更小。

字體真棒圖標

沒有更多的字形圖標？

Glyphicons 在以前的 Bootstrap 版本中被廣泛使用，所以很遺憾看到它們消失了。別擔心，這不是網絡圖標的終結。取而代之的是，FontAwesome 也應該為您服務。您還可以查看 Github 的 Octigons 以獲得出色的圖標選項。

遷移到 Bootstrap 4

雖然它目前處於 alpha 階段，但沒有理由不能在測試環境中使用它。源代碼位於 GitHub 上的 v4-dev 分支中。當您試驗並看到任何需要注意的地方時，會有一個開發和跟踪拉取請求，其中包括有關更改和任何其他新增強功能的註釋。

事物處於 alpha 階段，在特性和功能準備好進行測試後最終會有 beta 版本。在 beta 之後，將使用兩個候選版本在生產環境中進行測試。當一切順利時，最終版本將準備就緒！

我們剛剛在這裡觸及了表面，Bootstrap 4 的對話才剛剛開始。很高興看到未來會發生什麼，我很高興看到它從 alpha 中出來。請務必留意更新並下載副本以測試新的 Bootstrap 4 組件。