Bootstrap4在響應式網站制作中的應用研究

馬寧寧

摘要：移動互聯網時代，構建響應式跨平臺的網站前端已成為大勢所趨。Bootstrap基于HTML5、CSS3和JS開發，因其靈活的響應式柵格系統、豐富而強大的組件和插件成為當前最流行的前端開發框架。該文對其最流行的版本Bootstrap4進行了詳細介紹，希望能為Web開發者提供借鑒和參考。

關鍵詞：網站前端制作;Bootstrap;響應式網站

中圖分類號：G252? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）13-0241-03

1 背景

隨著手機、PAD等移動設備的普及，我們已進入移動互聯網時代。人們獲取信息的方式也不再局限于從PC端訪問，越來越多的依賴于移動設備。然而移動終端設備的屏幕尺寸大小迥異，瀏覽器也各不相同，面對多尺寸、多平臺的訪問需求，構建響應式跨平臺的網站前端業已成為大勢所趨[1]。

響應式網頁設計（Responsive Web design）理念由Ethan Marcotte于2010年提出，利用流式布局、媒體查詢、彈性圖片、彈性盒子布局等技術[1]，只開發一套代碼，即可兼容各種終端設備，不用為每個終端分別開發一套代碼[2]。響應式網頁設計能根據不同的用戶終端設備（如：計算機、筆記本、PAD、手機等），自動切換圖片尺寸、菜單布局和內容顯示方式等[3]，呈現不同的顯示效果以適應不同設備，為用戶帶來良好的體驗，也減少了管理者的后期維護工作。Bootstrap作為當前網站前端設計的主流框架，本文將對其進行深入探討。

2 Bootstrap概述

2.1 簡介

Bootstrap是全球最受歡迎的前端框架之一，可用來構建響應式、移動設備優先的網站[4]。Bootstrap基于less開發，集合了HTML、CSS、JavaScript、Jquery等技術，是一套簡潔靈活的前端開源框架。Bootstrap中包含豐富的網頁制作組件，如：按鈕、菜單、輪播圖、分頁、卡片等，前端工程師可以利用這些組件快速搭建一個功能完備、樣式新穎的網站，使前端開發變得快捷高效。

2.2 瀏覽器支持

Bootstrap目前主流版本為v3.0、v4.5和v5.0，三個版本對各種主流操作系統中的各類瀏覽器的最新版本基本都能支持。Bootstrap 3是最穩定的版本，支持IE8及以上版本;Bootstrap 4.0于2018年1月發布，支持IE 10-11以及Microsoft Edge瀏覽器;2020年6月，Bootstrap推出了最新版本Bootstrap5.0，作為全新的版本，Bootstrap5明確不再支持IE瀏覽器。如需要兼容IE，請根據實際需求使用v3.0或v4.5版。

綜合考慮3個版本的功能特征及瀏覽器兼容性，目前我們在實際應用中使用最多的是Bootstrap4，Bootstrap4已經成為當前響應式網站前端制作的主流框架。本文將對該版本的Bootstrap進行詳細介紹。

3 Bootstrap4工作原理

3.1 柵格系統

Bootstrap4擁有一套響應式、移動設備優先的流式柵格系統。該柵格系統提供了核心內容居中顯示、由上至下條帶狀填充網頁內容的布局方法，通過一系列的行（row）和列（column）的組合來創建網頁布局。柵格系統將容器（container）中的每行（row）平均分為12等列（col），在布局網頁時，根據實際情況指定col-size-num中num部分的值（如.col-sm-8或.col-xl-3，1<=num<=12），來設置div空間所占的列數，但是，每行最多有12列。

Bootstrap4柵格系統根據終端屏幕尺寸的大小分為5個柵格等級，并為每種的柵格等級定義了不同的類：特小col、小col-sm-*、中col-md-*、大/寬col-lg-*、超大/超寬col-xl-*。如表1所示。其中，col-size-num中size部分的命名是根據其所適用的終端屏幕尺寸區分的：col-適用于屏幕寬度小于576px的超小屏幕，col-sm-適用于寬度在576px～767px之間的小屏幕，col-md-適用于寬度在768px～991px之間的中等屏幕，col-lg-適用于寬度在992px～1199px之間的大/寬屏幕，col-xl-適用于寬度在1200px及以上的超大/超寬屏幕。柵格斷點的媒體查詢基于屏幕尺寸寬度的最小值，也就是說適用于該等級及該等級之上的所有屏幕尺寸（如：定義col-md-6可以在中型、寬、超寬設備上呈現，但不能在超小型、小型設備上呈現）。

3.2 布局方式

Bootstrap4引入彈性盒模型（flexbox）概念，完全基于flexbox流式布局構建的，完全支持響應式標準。每個Bootstrap實例都有一個總容器（container），里面包含著行（row），行中包含著列（col），列里面再放各種網頁組件，也可以在行里面直接放置網頁組件。具體布局方式如圖1所示。

3.3 組件內容

Bootstrap4它包含50多個實用的網站布局類、頁面內容類、網頁組件類和公共樣式類，其中最常用有容器container、行（row）、列（col-*）、卡片card、導航欄navbar、邊框border、顏色color等。Web前端工程師可以根據具體的設計需求選擇需要的組件搭建自己的網站。具體內容如表2所示。

4 Bootstrap4的使用方法

Bootstrap4組件在網站開發中如何使用呢？我們可以在Bootstrap官網或Bootstrap中文網下載Bootstrap 4.5壓縮包，然后在HTML5中引用下載包中的相應文件，即可進行響應式網站的前端開發。下面，本文通過一個具體實例來展示該框架的使用方法。具體效果圖如圖2所示。

4.1 下載源文件

下載壓縮包文件bootstrap-4.5.0-dist.zip，解壓后在css文件夾中找到bootstrap.min.css文件，保存到本地項目的CSS文件夾中;在js文件夾中找到bootstrap.bundle.min.js文件，保存到本地項目的js文件夾中。從jQuery官網下載的jquery壓縮文件，保存到本地項目的js文件夾中。

4.2 導入相關文件

1）響應式meta標簽

Bootstrap4遵循移動設備優先的原則，載入后會優先為移動設備優化代碼，之后才用CSS媒體查詢來擴展組件。為了保證各種設備的渲染和觸摸效果，必須在HTML文件的頭部區添加響應式的viewport標簽，簡要地說就是優先引入下面一行。

注：上面代碼中的width=device-width會將網頁的整體寬度設置為終端屏幕的寬度;initial-scale=1.0會將頁面初次顯示時，展示給用戶的內容窗口大小，設置為終端屏幕的100%;shrink-to-fit=no會在iOS9（iPhone操作系統）中使網頁寬度自動適應iPhone屏幕寬度。

2）CSS和JS源文件

在html文件頭部標簽中引入Bootstrap4的CSS文件bootstrap.min.css，代碼如下：。在html頁面尾部的 標簽之前引入Bootstrap4的JS文件bootstrap.bundle.min.js文件。由于Bootstrap4的某些組件依賴于jQuery，所以必須在 標簽之前加載對應的jQuery.min.js文件，如jquery-3.4.1.min.js而且兩個js文件的順序是jQuery 在前，bootstrap.bundle.min.js在后。導入文件后的代碼如下所示：

<！DOCTYPE html>

<！--導入響應式meta標簽-->

<！--導入bootstrap4的css文件-->

<！--先后導入jquery和bootstrap4的js文件-->

4.3 整體布局并開發

為了展示bootstrap4柵格系統的使用方式，我們將制作圖2所示的多屏適用網頁。

分析頁面設計方式我們發現：1）“圖片+文字”這個組合在中等md及以上屏幕中始終是一個整體，但是在小及更小屏幕上卻分成了2個元素;2）在寬lg及以上的屏幕上，頁面元素總共分為3行，每行有2個“圖片+文字”組合元素。

這種頁面布局用bootstrap4實現的話，我們可以先設置一個總容器container，然后在這個總容器container中設置3個行row，然后每行row里分成兩個相等寬度的列col-lg-6，每個列col-lg-6中放一個“圖片+文字”組合，這樣就實現了前面描述中2）的布局。

為了實現前面描述中1）的布局，我們需要用到柵格系統嵌套的功能：首先在上面的列col-lg-6中再嵌套一個行row，然后在這個新的行row中放置兩個列col，分別放置圖片和文字。根據圖片和文字所占據的寬度比，我們為其分別設置了col-md-5和col-md-7兩個子列。部分代碼如圖3所示：

通過該實例的制作過程我們發現，用Bootstrap制作網頁非常簡潔和方便，只需導入相關文件，然后用柵格系統布局頁面，即可制作出適用于多種終端設備的響應式網頁。

5 結束語

本文對Bootstrap4的工作原理和重要組件進行了詳細介紹，并基于此制作了一個應用實例。該框架簡單好用，利用其豐富的插件和組件可以大大縮短開發時間，節省開發和維護成本，還能夠適應不同的終端屏幕，為移動端用戶提供良好的視覺體驗，希望此文能為web前端開發者提供借鑒和參考。

參考文獻：

[1] 龍德應，唐嫦燕.運用Bootstrap優化響應式高校圖書館數字資源系統的研究[J].農業圖書情報學刊，2018，30（4）：41-45.

[2] 曹樹金，吳育冰.響應式Web設計及其在圖書館門戶網站中的應用——以“211”高校圖書館為例[J].圖書情報研究，2016，9（1）：30-34.

[3] 陶瑜，龔花蘭，郭自飛.基于Bootstrap的響應式高校招生網站的開發[J].沙洲職業工學院學報，2020，23（3）：5-7.

[4] Bootstrap中文網[EB/OL].[2020-11-26].https：//www.bootcss.com/.

【通聯編輯：謝媛媛】