使用 bootstrap CSS 創(chuàng)建響應(yīng)式網(wǎng)格

時間：2023-05-09 20:00:01 | 來源：網(wǎng)站運營

時間：2023-05-09 20:00:01 來源：網(wǎng)站運營

使用 bootstrap CSS 創(chuàng)建響應(yīng)式網(wǎng)格：

響應(yīng)式設(shè)計需要響應(yīng)式網(wǎng)格和響應(yīng)式斷點。 Bootstrap 將這兩者作為其庫的一部分提供。 Bootstrap 是一種流行的 CSS 框架，它提供了一個預(yù)先準(zhǔn)備好的 CSS 和 JavaScript 組件庫，例如表單、按鈕和導(dǎo)航，可用于構(gòu)建響應(yīng)式和移動就緒的網(wǎng)站。 它旨在幫助開發(fā)人員快速輕松地創(chuàng)建響應(yīng)式、移動優(yōu)先的網(wǎng)站，廣泛應(yīng)用于前端 Web 開發(fā)。 Bootstrap 是開源的，可以免費使用。

BOOTSTRAP網(wǎng)格系統(tǒng)

引導(dǎo)網(wǎng)格系統(tǒng)幫助我們通過一系列容納我們內(nèi)容的行和列來創(chuàng)建網(wǎng)頁布局。 對于網(wǎng)格，bootstrap 使用了 12 列的網(wǎng)格系統(tǒng)，可以是 fluid 或 fixed，如果超過 12 個，元素將被堆疊。 引導(dǎo)網(wǎng)格系統(tǒng)總是有一個容器、行和列。 容器是網(wǎng)格的根元素。 它包含墊并對齊您的內(nèi)容。 容器提供了一種居中和水平填充站點內(nèi)容的方法。 將 .container 用于響應(yīng)式像素寬度（其寬度根據(jù)當(dāng)前響應(yīng)式斷點確定）或 .container-fluid 用于寬度：所有視口和設(shè)備尺寸的 100%。

由于 bootstrap 使用 12 列網(wǎng)格系統(tǒng)，如果為多行定義了兩列，Bootstrap 很聰明，會將兩列設(shè)置為跨越六列空間。

斷點是由特定布局要求確定的屏幕尺寸閾值。 在給定的斷點范圍內(nèi)，布局會調(diào)整以適應(yīng)屏幕大小和方向。 我們在修復(fù)中使用類來修復(fù) Bootstrap 網(wǎng)格系統(tǒng)中的響應(yīng)斷點。 以下是 bootstrap 中可用的響應(yīng)式斷點以及我們?nèi)绾问褂盟鼈儭?br>
Extra small 適用于寬度小于 576 像素的屏幕。

小適用于大于或等于 576 像素寬的屏幕。 在 bootstrap CSS 規(guī)則中，這縮寫為 SM。

中適用于大于或等于 768 像素寬的屏幕。 在 Bootstrap CSS 規(guī)則中，這縮寫為 MD。

大適用于大于或等于 992 像素寬的屏幕。 在 Bootstrap CSS 規(guī)則中，縮寫為 LG。

超大適用于大于或等于 1200 像素寬的屏幕。 在 bootstrap CSS 規(guī)則中，這縮寫為 XL。

Extra特大是指屏幕寬度大于或等于1400像素。

在 bootstrap CSS 規(guī)則中，這縮寫為 XXL。

以下是使用 Bootstrap 網(wǎng)格系統(tǒng)創(chuàng)建響應(yīng)式布局的示例：


<div class="container"> <div class="row"> <div class="col-sm-4">Column 1</div> <div class="col-sm-4">Column 2</div> <div class="col-sm-4">Column 3</div> </div></div>在此示例中，容器類用于為網(wǎng)格創(chuàng)建容器。 row 類用于創(chuàng)建一行，col-sm-4 類用于創(chuàng)建三個等寬的列，這些列將在較小的屏幕（低于 576px）上垂直堆疊。

您還可以根據(jù)屏幕大小使用不同的網(wǎng)格類來創(chuàng)建不同的布局。 例如，使用 col-md-6 和 col-lg-3 類，您可以在中等屏幕（768px 及以上）上創(chuàng)建兩個等寬列，在大屏幕（992px 及以上）上創(chuàng)建三個等寬列。

您還可以使用偏移類在列之間創(chuàng)建空白空間。


<div class="container"> <div class="row"> <div class="col-sm-4">Column 1</div> <div class="col-sm-4 offset-sm-4">Column 2</div> </div></div>這將創(chuàng)建一個 4 列布局，其中第 1 列采用 4 列，第 2 列采用 4 列，偏移量為 4 列。

您還可以使用推和拉類來更改不同屏幕的列順序。


<div class="container"> <div class="row"> <div class="col-sm-4 col-md-6 push-md-6">Column 1</div> <div class="col-sm-4 col-md-6 pull-md-6">Column 2</div> </div></div>這將為小屏幕創(chuàng)建 4 列布局，為中等屏幕創(chuàng)建 6 列布局，其中第 1 列在中等屏幕上被推到第 2 列的右側(cè)。

引導(dǎo)系統(tǒng)可以根據(jù)您的設(shè)計需要進(jìn)行定制。

Bootstrap 網(wǎng)格系統(tǒng)的優(yōu)點

Bootstrap 網(wǎng)格系統(tǒng)有幾個優(yōu)點，使其成為前端 Web 開發(fā)的熱門選擇：

響應(yīng)式設(shè)計

Bootstrap 的網(wǎng)格系統(tǒng)旨在響應(yīng)并適應(yīng)不同的屏幕尺寸，從而輕松創(chuàng)建適合移動設(shè)備的網(wǎng)站。

一致性

網(wǎng)格系統(tǒng)提供了一個可以跨網(wǎng)站的不同頁面和組件使用的一致布局，使得保持一致的設(shè)計變得容易。

靈活性

網(wǎng)格系統(tǒng)可以很容易地定制，以根據(jù)屏幕尺寸創(chuàng)建不同的布局，從而實現(xiàn)設(shè)計的靈活性。

使用方便

網(wǎng)格系統(tǒng)易于學(xué)習(xí)和使用，只需要最少的 CSS 和 JavaScript 知識。

大型社區(qū)

Bootstrap 是一個開源項目，擁有龐大的開發(fā)人員社區(qū)，因此有大量資源和教程可幫助您學(xué)習(xí)和使用網(wǎng)格系統(tǒng)。

跨瀏覽器兼容性

Bootstrap 網(wǎng)格系統(tǒng)旨在與大多數(shù)現(xiàn)代瀏覽器一起使用，并與最新版本的 chrome、firefox、safari 和 internet explorer 兼容。

加快發(fā)展

使用 Bootstrap 網(wǎng)格系統(tǒng)可以加快開發(fā)時間，因為它消除了為常用組件從頭開始編寫 CSS 和 JavaScript 代碼的需要。

輔助功能

Bootstrap 遵循 Web 可訪問性指南，確保所有用戶都可以訪問網(wǎng)格系統(tǒng)。

結(jié)論

Bootstrap 網(wǎng)格系統(tǒng)是一個強(qiáng)大的工具，可以幫助開發(fā)人員快速輕松地創(chuàng)建響應(yīng)式、移動就緒的網(wǎng)站，并具有一致且靈活的布局。 它可以幫助加快開發(fā)時間并使維護(hù)網(wǎng)站設(shè)計變得容易。