基于bootstrap框架在web前端開(kāi)發(fā)的應(yīng)用與研究

何姣 劉薇

摘要：本文介紹了當(dāng)前比較流行的bootstrap前端響應(yīng)式框架，并且介紹了這個(gè)框架的大致功能，以及bootstrap重要的插件和實(shí)際應(yīng)用。

關(guān)鍵詞：Bootstrap;Modal;Carousel;前端開(kāi)發(fā)

中圖分類(lèi)號(hào)：TP393.09文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1672-9129（2020）14-0062-02

引言：為了滿(mǎn)足人們的需求，web系統(tǒng)的業(yè)務(wù)需求越來(lái)越復(fù)雜，對(duì)web開(kāi)發(fā)人員的技術(shù)要求越來(lái)越高，開(kāi)發(fā)的網(wǎng)頁(yè)不僅僅要適用于PC端，還要適用于各種各樣的移動(dòng)應(yīng)用設(shè)備。Web前端開(kāi)發(fā)框架bootstrap能夠幫助開(kāi)發(fā)人員簡(jiǎn)化其重復(fù)性進(jìn)行編寫(xiě)的各種模板、固定樣式以及特定的動(dòng)態(tài)交互效果等等過(guò)程，例如CSS、JAVA等等，大大提高他們的工作效率。

1關(guān)于BootStrap框架技術(shù)的功能介紹

首先，“Bootstrap”中配置的“柵格系統(tǒng)”，其具備比較明顯的響應(yīng)式特征，且以移動(dòng)設(shè)備作為最優(yōu)先級(jí)，是流式的柵格系統(tǒng)，參考CSS查詢(xún)手段，能夠令構(gòu)建的網(wǎng)頁(yè)因終端設(shè)備的分辨率數(shù)值自主適應(yīng)。整體來(lái)說(shuō)，柵格系統(tǒng)在“Bootstrap”中是核心性的設(shè)計(jì)環(huán)節(jié)，同時(shí)也是滿(mǎn)足其核心設(shè)計(jì)理念的實(shí)現(xiàn)形式之一，能夠在自動(dòng)的狀態(tài)下將窗口容器分成12列。該系統(tǒng)最大的優(yōu)勢(shì)是令網(wǎng)頁(yè)排版的布局呈現(xiàn)出更加規(guī)范性的特征，而且開(kāi)發(fā)方式也會(huì)更加靈活，較之其他方式美觀性也更加理想。

其次，“Bootstrap”基礎(chǔ)性布局的基礎(chǔ)樣式種類(lèi)相對(duì)比較繁多，例如表格、按鈕、表單等，使用者借助CSS類(lèi)就能夠?qū)崿F(xiàn)樣式的實(shí)際應(yīng)用，而且能夠針對(duì)頁(yè)面中所有HTML元素進(jìn)行應(yīng)用。例如說(shuō)，用戶(hù)想要將表單樣式呈現(xiàn)到網(wǎng)頁(yè)中，就只需要為該元素增設(shè)“Bootstrap”預(yù)定義表單類(lèi)名，并不需要完成CSS代碼繁雜的編寫(xiě)過(guò)程。

第三，CSS組件。Bootstrap內(nèi)置了一套可用于設(shè)計(jì)用戶(hù)界面、交互功能的無(wú)數(shù)可復(fù)用的CSS組件，這些組件能夠?qū)崿F(xiàn)字體圖標(biāo)、下拉菜單、導(dǎo)航、輸入框、媒體對(duì)象、進(jìn)度條、面板、列表組等功能。比如字體圖標(biāo)的使用，出于性能的考慮，所有圖標(biāo)都需要一個(gè)基類(lèi)和對(duì)應(yīng)每個(gè)圖標(biāo)的類(lèi)。圖標(biāo)類(lèi)不能和其它組件直接聯(lián)合使用，它們不能在同一個(gè)元素上與其他類(lèi)共同存在。應(yīng)該創(chuàng)建一個(gè)嵌套的 標(biāo)簽，并將圖標(biāo)類(lèi)應(yīng)用到這個(gè) 標(biāo)簽上。

最后，插件“JavaScript”。在“Bootstrap”中，增設(shè)了攜帶12個(gè)在jQuery基礎(chǔ)之上的插件，涵蓋過(guò)渡效果、輪播功能、折疊功能等等，這12個(gè)“JavaScript”插件因?yàn)榛趈Query開(kāi)發(fā)，所以基本上是遵循著其使用規(guī)范以及使用習(xí)慣的，常用在網(wǎng)站功能的擴(kuò)展工作當(dāng)中，有效增加用戶(hù)的實(shí)際體驗(yàn)，整體來(lái)說(shuō)，全部插件都需要和CSS其他組件相互配合，才能夠真正起到良好的頁(yè)面展示效果以及使用功能。

2關(guān)于“Bootstrap”關(guān)鍵插件以及應(yīng)用介紹

在“Bootstrap”中，除了能夠帶來(lái)Web組件，還能夠?yàn)橛脩?hù)提供12個(gè)基于jQuery開(kāi)發(fā)的插件資料庫(kù)，其代碼經(jīng)過(guò)壓縮之后，涵蓋于“Bootstrap.js”插件內(nèi)部。整體而言，在“Bootstrap”中js插件基本上都要依賴(lài)“JavaScript”，因此，在應(yīng)用js插件之前，首先要將jQuery的核心包及時(shí)引入，具體操作方式包括單獨(dú)引用以及同時(shí)引用兩種，前者借助個(gè)別js文件，明確插件間存在的依賴(lài)性聯(lián)系;后者則是借助js插件或者是壓縮的min.js插件。在“Bootstrap”當(dāng)中，設(shè)置12個(gè)不同的插件庫(kù)，在這里介紹幾種重要的插件。

其一，“Modal”，即模態(tài)框，屬于一種子窗體，覆蓋于父窗體。該子窗體能夠?yàn)橛脩?hù)提供信息服務(wù)以及交互功能，大多數(shù)情況下是為展示單獨(dú)源內(nèi)容而存在，能夠在不和父窗體相互脫離的情況下完成部分互動(dòng)操作。將“Modal”（模態(tài)框）切換隱藏的方式有兩種：借助data屬性，于控制器（包括控制按鈕或者是連接）設(shè)置屬性，即 ，另外，在設(shè)置的同時(shí)，再次進(jìn)行設(shè)置， 或者是 均可，以此來(lái)明確需要進(jìn)行切換的模態(tài)框（攜帶 ）;另外則是依托于“JavaScript”，借助簡(jiǎn)單的“JavaScript”調(diào)用涵蓋 的Modal：。通常來(lái)說(shuō)，模態(tài)對(duì)話(huà)框的結(jié)構(gòu)有以下內(nèi)容：

class="modal"：對(duì)話(huà)框的最外層容器，可以控制對(duì)話(huà)框的顯示與隱藏。

class= "modal- dialog "：第二層容器。

class= "modal- content"：第三層容器，控制對(duì)話(huà)框的邊框、邊距、背景、陰影效果等;而這個(gè)容器里面又包含了另外三個(gè)部分：

class= "modal-header"：對(duì)話(huà)框頭部，包含標(biāo)題、關(guān)閉按鈕等。

class= "modal- body"：對(duì)話(huà)框主體，是對(duì)話(huà)框的主要內(nèi)容。

class= "modal-footer"：對(duì)話(huà)框腳注，包含操作按鈕等。

其二，在下拉菜單當(dāng)中由“JavaScript”提供的支持與Modal基本一致，下拉的框架中同樣提供了不同的觸發(fā)形式予以顯示，即聲明式觸發(fā)以及“JavaScript”觸發(fā)兩種。前者一般需要涉及到“data-*屬性”，其下拉菜單通常會(huì)應(yīng)用到導(dǎo)航條當(dāng)中，具體的實(shí)例代碼可以用下述形式表現(xiàn)：

其三，“Bootstrap”中配置的輪播插件（即“Carousel”插件），屬于相對(duì)比較靈活的添加站點(diǎn)滑塊的形式，其具體涉及到的輪播內(nèi)容也相對(duì)比較靈活，除了常規(guī)性的圖像文件、視頻資料以及內(nèi)嵌框架等用戶(hù)需求置入的內(nèi)容類(lèi)型之外還有較多的選擇，一般會(huì)結(jié)合實(shí)際情況進(jìn)行具體應(yīng)用。具體來(lái)說(shuō)，其結(jié)構(gòu)代碼可以表現(xiàn)為：首先定義一個(gè)