基于bootstrap框架在web前端開發的應用與研究

何姣 劉薇

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

關鍵詞：Bootstrap;Modal;Carousel;前端開發

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

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

1關于BootStrap框架技術的功能介紹

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

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

第三，CSS組件。Bootstrap內置了一套可用于設計用戶界面、交互功能的無數可復用的CSS組件，這些組件能夠實現字體圖標、下拉菜單、導航、輸入框、媒體對象、進度條、面板、列表組等功能。比如字體圖標的使用，出于性能的考慮，所有圖標都需要一個基類和對應每個圖標的類。圖標類不能和其它組件直接聯合使用，它們不能在同一個元素上與其他類共同存在。應該創建一個嵌套的 標簽，并將圖標類應用到這個 標簽上。

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

2關于“Bootstrap”關鍵插件以及應用介紹

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

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

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

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

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

class= "modal-header"：對話框頭部，包含標題、關閉按鈕等。

class= "modal- body"：對話框主體，是對話框的主要內容。

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

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

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