网站首页
教育杂志
CSSCI期刊 北大期刊 CSCD期刊 统计源期刊 知网收录期刊 维普收录期刊 万方收录期刊 SCI期刊(美)
医学杂志
CSSCI期刊 北大期刊 CSCD期刊 统计源期刊 知网收录期刊 维普收录期刊 万方收录期刊 SCI期刊(美)
经济杂志
CSSCI期刊 北大期刊 CSCD期刊 统计源期刊 知网收录期刊 维普收录期刊 万方收录期刊 SCI期刊(美)
金融杂志
CSSCI期刊 北大期刊 CSCD期刊 统计源期刊 知网收录期刊 维普收录期刊 万方收录期刊 SCI期刊(美)
管理杂志
CSSCI期刊 北大期刊 CSCD期刊 统计源期刊 知网收录期刊 维普收录期刊 万方收录期刊 SCI期刊(美)
科技杂志
CSSCI期刊 北大期刊 CSCD期刊 统计源期刊 知网收录期刊 维普收录期刊 万方收录期刊 SCI期刊(美)
工业杂志
CSSCI期刊 北大期刊 CSCD期刊 统计源期刊 知网收录期刊 维普收录期刊 万方收录期刊 SCI期刊(美)
SCI杂志
中科院1区 中科院2区 中科院3区 中科院4区
全部期刊
公務(wù)員期刊網(wǎng) 論文中心 正文

Bootstrap4在響應(yīng)式網(wǎng)站制作中應(yīng)用

前言:想要寫出一篇引人入勝的文章?我們特意為您整理了Bootstrap4在響應(yīng)式網(wǎng)站制作中應(yīng)用范文,希望能給你帶來靈感和參考,敬請閱讀。

Bootstrap4在響應(yīng)式網(wǎng)站制作中應(yīng)用

摘要:移動互聯(lián)網(wǎng)時代,構(gòu)建響應(yīng)式跨平臺的網(wǎng)站前端已成為大勢所趨。Bootstrap基于HTML5、CSS3和JS開發(fā),因其靈活的響應(yīng)式柵格系統(tǒng)、豐富而強大的組件和插件成為當前最流行的前端開發(fā)框架。該文對其最流行的版本bootstrap4進行了詳細介紹,希望能為Web開發(fā)者提供借鑒和參考。

關(guān)鍵詞:網(wǎng)站前端制作;Bootstrap;響應(yīng)式網(wǎng)站

1背景

隨著手機、PAD等移動設(shè)備的普及,我們已進入移動互聯(lián)網(wǎng)時代。人們獲取信息的方式也不再局限于從PC端訪問,越來越多的依賴于移動設(shè)備。然而移動終端設(shè)備的屏幕尺寸大小迥異,瀏覽器也各不相同,面對多尺寸、多平臺的訪問需求,構(gòu)建響應(yīng)式跨平臺的網(wǎng)站前端業(yè)已成為大勢所趨[1]。響應(yīng)式網(wǎng)頁設(shè)計(ResponsiveWebdesign)理念由EthanMar⁃cotte于2010年提出,利用流式布局、媒體查詢、彈性圖片、彈性盒子布局等技術(shù)[1],只開發(fā)一套代碼,即可兼容各種終端設(shè)備,不用為每個終端分別開發(fā)一套代碼[2]。響應(yīng)式網(wǎng)頁設(shè)計能根據(jù)不同的用戶終端設(shè)備(如:計算機、筆記本、PAD、手機等),自動切換圖片尺寸、菜單布局和內(nèi)容顯示方式等[3],呈現(xiàn)不同的顯示效果以適應(yīng)不同設(shè)備,為用戶帶來良好的體驗,也減少了管理者的后期維護工作。Bootstrap作為當前網(wǎng)站前端設(shè)計的主流框架,本文將對其進行深入探討。

2Bootstrap概述

2.1簡介

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

2.2瀏覽器支持

Bootstrap目前主流版本為v3.0、v4.5和v5.0,三個版本對各種主流操作系統(tǒng)中的各類瀏覽器的最新版本基本都能支持。Bootstrap3是最穩(wěn)定的版本,支持IE8及以上版本;Bootstrap4.0于2018年1月,支持IE10-11以及MicrosoftEdge瀏覽器;2020年6月,Bootstrap推出了最新版本Bootstrap5.0,作為全新的版本,Bootstrap5明確不再支持IE瀏覽器。如需要兼容IE,請根據(jù)實際需求使用v3.0或v4.5版。綜合考慮3個版本的功能特征及瀏覽器兼容性,目前我們在實際應(yīng)用中使用最多的是Bootstrap4,Bootstrap4已經(jīng)成為當前響應(yīng)式網(wǎng)站前端制作的主流框架。本文將對該版本的Boot⁃strap進行詳細介紹。

3Bootstrap4工作原理

3.1柵格系統(tǒng)

Bootstrap4擁有一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)。該柵格系統(tǒng)提供了核心內(nèi)容居中顯示、由上至下條帶狀填充網(wǎng)頁內(nèi)容的布局方法,通過一系列的行(row)和列(column)的組合來創(chuàng)建網(wǎng)頁布局。柵格系統(tǒng)將容器(container)中的每行(row)平均分為12等列(col),在布局網(wǎng)頁時,根據(jù)實際情況指定col-size-num中num部分的值(如.col-sm-8或.col-xl-3,1<=num<=12),來設(shè)置div空間所占的列數(shù),但是,每行最多有12列。Bootstrap4柵格系統(tǒng)根據(jù)終端屏幕尺寸的大小分為5個柵格等級,并為每種的柵格等級定義了不同的類:特小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及以上的超大/超寬屏幕。柵格斷點的媒體查詢基于屏幕尺寸寬度的最小值,也就是說適用于該等級及該等級之上的所有屏幕尺寸(如:定義col-md-6可以在中型、寬、超寬設(shè)備上呈現(xiàn),但不能在超小型、小型設(shè)備上呈現(xiàn))。

3.2布局方式

Bootstrap4引入彈性盒模型(flexbox)概念,完全基于flexbox流式布局構(gòu)建的,完全支持響應(yīng)式標準。每個Bootstrap實例都有一個總?cè)萜?container),里面包含著行(row),行中包含著列(col),列里面再放各種網(wǎng)頁組件,也可以在行里面直接放置網(wǎng)頁組件。具體布局方式如圖1所示。

3.3組件內(nèi)容

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

4Bootstrap4的使用方法

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

4.1下載源文件

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

4.2導入相關(guān)文件

1)響應(yīng)式meta標簽Bootstrap4遵循移動設(shè)備優(yōu)先的原則,載入后會優(yōu)先為移動設(shè)備優(yōu)化代碼,之后才用CSS媒體查詢來擴展組件。為了保證各種設(shè)備的渲染和觸摸效果,必須在HTML文件的頭部<head>區(qū)添加響應(yīng)式的viewport標簽,簡要地說就是優(yōu)先引入下面一行。<metaname="viewport"content="width=device-width,ini⁃tial-scale=1,shrink-to-fit=no">注:上面代碼中的width=device-width會將網(wǎng)頁的整體寬度設(shè)置為終端屏幕的寬度;initial-scale=1.0會將頁面初次顯示時,展示給用戶的內(nèi)容窗口大小,設(shè)置為終端屏幕的100%;shrink-to-fit=no會在iOS9(iPhone操作系統(tǒng))中使網(wǎng)頁寬度自動適應(yīng)iPhone屏幕寬度。2)CSS和JS源文件在html文件頭部<head>標簽中引入Bootstrap4的CSS文件bootstrap.min.css,代碼如下:<linkrel="stylesheet"href="http://css/bootstrap.min.css">。在html頁面尾部的</body>標簽之前引入Bootstrap4的JS文件bootstrap.bundle.min.js文件。由于Boot⁃strap4的某些組件依賴于jQuery,所以必須在</body>標簽之前加載對應(yīng)的jQuery.min.js文件,如jquery-3.4.1.min.js而且兩個js文件的順序是jQuery在前,bootstrap.bundle.min.js在后。導入文件后的代碼如下所示:<!DOCTYPEhtml><html><head><!--導入響應(yīng)式meta標簽--><metaname="viewport"content="width=device-width,ini⁃tial-scale=1,shrink-to-fit=no"><!--導入bootstrap4的css文件--><linkrel="stylesheet"href="http://css/bootstrap.min.css"></head><body><divclass="container">...</div><!--先后導入jquery和bootstrap4的js文件--><scriptsrc="js/jquery-3.4.1.min.js"></script><scriptsrc="js/bootstrap.bundle.min.js"></script></body></html>

4.3整體布局并開發(fā)

為了展示bootstrap4柵格系統(tǒng)的使用方式,我們將制作圖2所示的多屏適用網(wǎng)頁。分析頁面設(shè)計方式我們發(fā)現(xiàn):1)“圖片+文字”這個組合在中等md及以上屏幕中始終是一個整體,但是在小及更小屏幕上卻分成了2個元素;2)在寬lg及以上的屏幕上,頁面元素總共分為3行,每行有2個“圖片+文字”組合元素。這種頁面布局用bootstrap4實現(xiàn)的話,我們可以先設(shè)置一個總?cè)萜鱟ontainer,然后在這個總?cè)萜鱟ontainer中設(shè)置3個行row,然后每行row里分成兩個相等寬度的列col-lg-6,每個列col-lg-6中放一個“圖片+文字”組合,這樣就實現(xiàn)了前面描述中2)的布局。為了實現(xiàn)前面描述中1)的布局,我們需要用到柵格系統(tǒng)嵌套的功能:首先在上面的列col-lg-6中再嵌套一個行row,然后在這個新的行row中放置兩個列col,分別放置圖片和文字。根據(jù)圖片和文字所占據(jù)的寬度比,我們?yōu)槠浞謩e設(shè)置了col-md-5和col-md-7兩個子列。部分代碼如圖3所示:圖3Bootstrap4柵格布局部分代碼通過該實例的制作過程我們發(fā)現(xiàn),用Bootstrap制作網(wǎng)頁非常簡潔和方便,只需導入相關(guān)文件,然后用柵格系統(tǒng)布局頁面,即可制作出適用于多種終端設(shè)備的響應(yīng)式網(wǎng)頁。

5結(jié)束語

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

參考文獻:

[1]龍德應(yīng),唐嫦燕.運用Bootstrap優(yōu)化響應(yīng)式高校圖書館數(shù)字資源系統(tǒng)的研究[J].農(nóng)業(yè)圖書情報學刊,2018,30(4):41-45.

[2]曹樹金,吳育冰.響應(yīng)式Web設(shè)計及其在圖書館門戶網(wǎng)站中的應(yīng)用——以“211”高校圖書館為例[J].圖書情報研究,2016,9(1):30-34.

[3]陶瑜,龔花蘭,郭自飛.基于Bootstrap的響應(yīng)式高校招生網(wǎng)站的開發(fā)[J].沙洲職業(yè)工學院學報,2020,23(3):5-7.

[4]Bootstrap中文網(wǎng)[EB/OL].[2020-11-26].https://www.bootcss.com/.

作者:馬寧寧 單位:國家圖書館

免责声明

本站为第三方开放式学习交流平台,所有内容均为用户上传,仅供参考,不代表本站立场。若内容不实请联系在线客服删除,服务时间:8:00~21:00。

AI写作,高效原创

在线指导,快速准确,满意为止

立即体验
文秘服务 AI帮写作 润色服务 论文发表