Bootstrap4在響應(yīng)式網(wǎng)站制作中應(yīng)用
前言：想要寫(xiě)出一篇引人入勝的文章？我們特意為您整理了Bootstrap4在響應(yīng)式網(wǎng)站制作中應(yīng)用范文，希望能給你帶來(lái)靈感和參考，敬請(qǐng)閱讀。
摘要：移動(dòng)互聯(lián)網(wǎng)時(shí)代，構(gòu)建響應(yīng)式跨平臺(tái)的網(wǎng)站前端已成為大勢(shì)所趨。Bootstrap基于HTML5、CSS3和JS開(kāi)發(fā)，因其靈活的響應(yīng)式柵格系統(tǒng)、豐富而強(qiáng)大的組件和插件成為當(dāng)前最流行的前端開(kāi)發(fā)框架。該文對(duì)其最流行的版本bootstrap4進(jìn)行了詳細(xì)介紹，希望能為Web開(kāi)發(fā)者提供借鑒和參考。
關(guān)鍵詞：網(wǎng)站前端制作；Bootstrap；響應(yīng)式網(wǎng)站
1背景
隨著手機(jī)、PAD等移動(dòng)設(shè)備的普及，我們已進(jìn)入移動(dòng)互聯(lián)網(wǎng)時(shí)代。人們獲取信息的方式也不再局限于從PC端訪問(wèn)，越來(lái)越多的依賴于移動(dòng)設(shè)備。然而移動(dòng)終端設(shè)備的屏幕尺寸大小迥異，瀏覽器也各不相同，面對(duì)多尺寸、多平臺(tái)的訪問(wèn)需求，構(gòu)建響應(yīng)式跨平臺(tái)的網(wǎng)站前端業(yè)已成為大勢(shì)所趨[1]。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)(ResponsiveWebdesign)理念由EthanMar⁃cotte于2010年提出，利用流式布局、媒體查詢、彈性圖片、彈性盒子布局等技術(shù)[1]，只開(kāi)發(fā)一套代碼，即可兼容各種終端設(shè)備，不用為每個(gè)終端分別開(kāi)發(fā)一套代碼[2]。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)能根據(jù)不同的用戶終端設(shè)備（如：計(jì)算機(jī)、筆記本、PAD、手機(jī)等），自動(dòng)切換圖片尺寸、菜單布局和內(nèi)容顯示方式等[3]，呈現(xiàn)不同的顯示效果以適應(yīng)不同設(shè)備，為用戶帶來(lái)良好的體驗(yàn)，也減少了管理者的后期維護(hù)工作。Bootstrap作為當(dāng)前網(wǎng)站前端設(shè)計(jì)的主流框架，本文將對(duì)其進(jìn)行深入探討。
2Bootstrap概述
2.1簡(jiǎn)介
Bootstrap是全球最受歡迎的前端框架之一，可用來(lái)構(gòu)建響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的網(wǎng)站[4]。Bootstrap基于less開(kāi)發(fā)，集合了HTML、CSS、JavaScript、Jquery等技術(shù)，是一套簡(jiǎn)潔靈活的前端開(kāi)源框架。Bootstrap中包含豐富的網(wǎng)頁(yè)制作組件，如：按鈕、菜單、輪播圖、分頁(yè)、卡片等，前端工程師可以利用這些組件快速搭建一個(gè)功能完備、樣式新穎的網(wǎng)站，使前端開(kāi)發(fā)變得快捷高效。
2.2瀏覽器支持
Bootstrap目前主流版本為v3.0、v4.5和v5.0，三個(gè)版本對(duì)各種主流操作系統(tǒng)中的各類(lèi)瀏覽器的最新版本基本都能支持。Bootstrap3是最穩(wěn)定的版本，支持IE8及以上版本；Bootstrap4.0于2018年1月，支持IE10-11以及MicrosoftEdge瀏覽器；2020年6月，Bootstrap推出了最新版本Bootstrap5.0，作為全新的版本，Bootstrap5明確不再支持IE瀏覽器。如需要兼容IE，請(qǐng)根據(jù)實(shí)際需求使用v3.0或v4.5版。綜合考慮3個(gè)版本的功能特征及瀏覽器兼容性，目前我們?cè)趯?shí)際應(yīng)用中使用最多的是Bootstrap4，Bootstrap4已經(jīng)成為當(dāng)前響應(yīng)式網(wǎng)站前端制作的主流框架。本文將對(duì)該版本的Boot⁃strap進(jìn)行詳細(xì)介紹。
3Bootstrap4工作原理
3.1柵格系統(tǒng)
Bootstrap4擁有一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)。該柵格系統(tǒng)提供了核心內(nèi)容居中顯示、由上至下條帶狀填充網(wǎng)頁(yè)內(nèi)容的布局方法，通過(guò)一系列的行（row）和列（column）的組合來(lái)創(chuàng)建網(wǎng)頁(yè)布局。柵格系統(tǒng)將容器（container）中的每行（row）平均分為12等列（col），在布局網(wǎng)頁(yè)時(shí)，根據(jù)實(shí)際情況指定col-size-num中num部分的值（如.col-sm-8或.col-xl-3，1<=num<=12），來(lái)設(shè)置div空間所占的列數(shù)，但是，每行最多有12列。Bootstrap4柵格系統(tǒng)根據(jù)終端屏幕尺寸的大小分為5個(gè)柵格等級(jí)，并為每種的柵格等級(jí)定義了不同的類(lèi)：特小col、小col-sm-*、中col-md-*、大/寬col-lg-*、超大/超寬col-xl-*。如表1所示。其中，col-size-num中size部分的命名是根據(jù)其所適用的終端屏幕尺寸區(qū)分的：col-適用于屏幕寬度小于576px的超小屏幕，col-sm-適用于寬度在576px～767px之間的小屏幕，col-md-適用于寬度在768px～991px之間的中等屏幕，col-lg-適用于寬度在992px～1199px之間的大/寬屏幕，col-xl-適用于寬度在1200px及以上的超大/超寬屏幕。柵格斷點(diǎn)的媒體查詢基于屏幕尺寸寬度的最小值，也就是說(shuō)適用于該等級(jí)及該等級(jí)之上的所有屏幕尺寸（如：定義col-md-6可以在中型、寬、超寬設(shè)備上呈現(xiàn)，但不能在超小型、小型設(shè)備上呈現(xiàn)）。
3.2布局方式
Bootstrap4引入彈性盒模型(flexbox)概念，完全基于flexbox流式布局構(gòu)建的，完全支持響應(yīng)式標(biāo)準(zhǔn)。每個(gè)Bootstrap實(shí)例都有一個(gè)總?cè)萜?container)，里面包含著行(row)，行中包含著列(col)，列里面再放各種網(wǎng)頁(yè)組件，也可以在行里面直接放置網(wǎng)頁(yè)組件。具體布局方式如圖1所示。
3.3組件內(nèi)容
Bootstrap4它包含50多個(gè)實(shí)用的網(wǎng)站布局類(lèi)、頁(yè)面內(nèi)容類(lèi)、網(wǎng)頁(yè)組件類(lèi)和公共樣式類(lèi)，其中最常用有容器container、行(row)、列(col-*)、卡片card、導(dǎo)航欄navbar、邊框border、顏色color等。Web前端工程師可以根據(jù)具體的設(shè)計(jì)需求選擇需要的組件搭建自己的網(wǎng)站。具體內(nèi)容如表2所示。
4Bootstrap4的使用方法
Bootstrap4組件在網(wǎng)站開(kāi)發(fā)中如何使用呢？我們可以在Bootstrap官網(wǎng)或Bootstrap中文網(wǎng)下載Bootstrap4.5壓縮包，然后在HTML5中引用下載包中的相應(yīng)文件，即可進(jìn)行響應(yīng)式網(wǎng)站的前端開(kāi)發(fā)。下面，本文通過(guò)一個(gè)具體實(shí)例來(lái)展示該框架的使用方法。具體效果圖如圖2所示。
4.1下載源文件
下載壓縮包文件bootstrap-4.5.0-dist.zip，解壓后在css文件夾中找到bootstrap.min.css文件，保存到本地項(xiàng)目的CSS文件夾中；在js文件夾中找到bootstrap.bundle.min.js文件，保存到本地項(xiàng)目的js文件夾中。從jQuery官網(wǎng)下載的jquery壓縮文件，保存到本地項(xiàng)目的js文件夾中。
4.2導(dǎo)入相關(guān)文件
1）響應(yīng)式meta標(biāo)簽Bootstrap4遵循移動(dòng)設(shè)備優(yōu)先的原則，載入后會(huì)優(yōu)先為移動(dòng)設(shè)備優(yōu)化代碼，之后才用CSS媒體查詢來(lái)擴(kuò)展組件。為了保證各種設(shè)備的渲染和觸摸效果，必須在HTML文件的頭部<head>區(qū)添加響應(yīng)式的viewport標(biāo)簽，簡(jiǎn)要地說(shuō)就是優(yōu)先引入下面一行。<metaname="viewport"content="width=device-width,ini⁃tial-scale=1,shrink-to-fit=no">注：上面代碼中的width=device-width會(huì)將網(wǎng)頁(yè)的整體寬度設(shè)置為終端屏幕的寬度；initial-scale=1.0會(huì)將頁(yè)面初次顯示時(shí)，展示給用戶的內(nèi)容窗口大小，設(shè)置為終端屏幕的100%；shrink-to-fit=no會(huì)在iOS9（iPhone操作系統(tǒng)）中使網(wǎng)頁(yè)寬度自動(dòng)適應(yīng)iPhone屏幕寬度。2）CSS和JS源文件在html文件頭部<head>標(biāo)簽中引入Bootstrap4的CSS文件bootstrap.min.css，代碼如下：<linkrel="stylesheet"href="http://css/bootstrap.min.css">。在html頁(yè)面尾部的</body>標(biāo)簽之前引入Bootstrap4的JS文件bootstrap.bundle.min.js文件。由于Boot⁃strap4的某些組件依賴于jQuery,所以必須在</body>標(biāo)簽之前加載對(duì)應(yīng)的jQuery.min.js文件，如jquery-3.4.1.min.js而且兩個(gè)js文件的順序是jQuery在前，bootstrap.bundle.min.js在后。導(dǎo)入文件后的代碼如下所示：<!DOCTYPEhtml><html><head><!--導(dǎo)入響應(yīng)式meta標(biāo)簽--><metaname="viewport"content="width=device-width,ini⁃tial-scale=1,shrink-to-fit=no"><!--導(dǎo)入bootstrap4的css文件--><linkrel="stylesheet"href="http://css/bootstrap.min.css"></head><body><divclass="container">...</div><!--先后導(dǎo)入jquery和bootstrap4的js文件--><scriptsrc="js/jquery-3.4.1.min.js"></script><scriptsrc="js/bootstrap.bundle.min.js"></script></body></html>
4.3整體布局并開(kāi)發(fā)
為了展示bootstrap4柵格系統(tǒng)的使用方式，我們將制作圖2所示的多屏適用網(wǎng)頁(yè)。分析頁(yè)面設(shè)計(jì)方式我們發(fā)現(xiàn)：1）“圖片+文字”這個(gè)組合在中等md及以上屏幕中始終是一個(gè)整體，但是在小及更小屏幕上卻分成了2個(gè)元素；2）在寬lg及以上的屏幕上，頁(yè)面元素總共分為3行，每行有2個(gè)“圖片+文字”組合元素。這種頁(yè)面布局用bootstrap4實(shí)現(xiàn)的話，我們可以先設(shè)置一個(gè)總?cè)萜鱟ontainer，然后在這個(gè)總?cè)萜鱟ontainer中設(shè)置3個(gè)行row，然后每行row里分成兩個(gè)相等寬度的列col-lg-6，每個(gè)列col-lg-6中放一個(gè)“圖片+文字”組合，這樣就實(shí)現(xiàn)了前面描述中2）的布局。為了實(shí)現(xiàn)前面描述中1）的布局，我們需要用到柵格系統(tǒng)嵌套的功能：首先在上面的列col-lg-6中再嵌套一個(gè)行row，然后在這個(gè)新的行row中放置兩個(gè)列col，分別放置圖片和文字。根據(jù)圖片和文字所占據(jù)的寬度比，我們?yōu)槠浞謩e設(shè)置了col-md-5和col-md-7兩個(gè)子列。部分代碼如圖3所示：圖3Bootstrap4柵格布局部分代碼通過(guò)該實(shí)例的制作過(guò)程我們發(fā)現(xiàn)，用Bootstrap制作網(wǎng)頁(yè)非常簡(jiǎn)潔和方便，只需導(dǎo)入相關(guān)文件，然后用柵格系統(tǒng)布局頁(yè)面，即可制作出適用于多種終端設(shè)備的響應(yīng)式網(wǎng)頁(yè)。
5結(jié)束語(yǔ)
本文對(duì)Bootstrap4的工作原理和重要組件進(jìn)行了詳細(xì)介紹，并基于此制作了一個(gè)應(yīng)用實(shí)例。該框架簡(jiǎn)單好用，利用其豐富的插件和組件可以大大縮短開(kāi)發(fā)時(shí)間，節(jié)省開(kāi)發(fā)和維護(hù)成本，還能夠適應(yīng)不同的終端屏幕，為移動(dòng)端用戶提供良好的視覺(jué)體驗(yàn)，希望此文能為web前端開(kāi)發(fā)者提供借鑒和參考。
參考文獻(xiàn)：
[1]龍德應(yīng),唐嫦燕.運(yùn)用Bootstrap優(yōu)化響應(yīng)式高校圖書(shū)館數(shù)字資源系統(tǒng)的研究[J].農(nóng)業(yè)圖書(shū)情報(bào)學(xué)刊,2018,30(4):41-45.
[2]曹樹(shù)金,吳育冰.響應(yīng)式Web設(shè)計(jì)及其在圖書(shū)館門(mén)戶網(wǎng)站中的應(yīng)用——以“211”高校圖書(shū)館為例[J].圖書(shū)情報(bào)研究,2016,9(1):30-34.
[3]陶瑜,龔花蘭,郭自飛.基于Bootstrap的響應(yīng)式高校招生網(wǎng)站的開(kāi)發(fā)[J].沙洲職業(yè)工學(xué)院學(xué)報(bào),2020,23(3):5-7.
[4]Bootstrap中文網(wǎng)[EB/OL].[2020-11-26].https://www.bootcss.com/.
作者:馬寧寧 單位:國(guó)家圖書(shū)館