何姣 劉薇

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

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

中圖分類號：TP393.09文獻標(biāo)識碼：A文章編號：1672-9129（2020）14-0062-02

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

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

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

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

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

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

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

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

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

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

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

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

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

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

class= "modal-footer"：對話框腳注，包含操作按鈕等。

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

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