Bootstrap 在Web 開發(fā)中的應(yīng)用與研究

王莉 廣州華夏職業(yè)學院

引言

隨著網(wǎng)絡(luò)技術(shù)的發(fā)展,對于Web 開發(fā)技術(shù)要求也越高,Bootstrap 開發(fā)框架可以讓web 開發(fā)更迅速、簡單。Bootstrap將CSS 框架,JavaScript 庫組合在一起,適配不同終端,將大大簡化Web 開發(fā)工作,提高工作效率,降低工作成本。

1 .Bootstrap 概念

1.1 Bootstrap 概念

Bootstrap 是 由Twitter 公 司 Mark Otto 和 Jacob Thornton 兩位工程師共同開發(fā)的Web 前端框架。它基于 HTML、CSS、JAVASCRIPT，是一個簡潔、快速、靈活和最受歡迎的開源框架。它功能強大，它的響應(yīng)式布局可以適應(yīng)于PC 端及其他移動設(shè)備。

1.2 為什么使用Bootstrap?

1)響應(yīng)式布局：Bootstrap 的響應(yīng)式 布局，適應(yīng)于PC 端、平板電腦及其他移動設(shè)備，可以在這些不同的終端切換顯示，支持移動設(shè)備優(yōu)先。

2)跨瀏覽器：Bootstrap 的跨瀏覽器，可以兼容所有的主流瀏覽器。

3)容易上手：Bootstrap 的代碼簡潔，靈活，易懂，可以不懂設(shè)計的你設(shè)計出漂亮的效果。

2. Bootstrap 功能介紹

1)柵格系統(tǒng)，Bootstrap 的柵格系統(tǒng)，可以讓瀏覽器隨著屏幕大小的增減，自動分配最多12 列，以實現(xiàn)響應(yīng)式效果。

2)支持 HTML5、CSS3，Bootstrap 設(shè)置了HTML5 語義化標簽和 CSS3 屬性，可以通過 這些相應(yīng)設(shè)置得到不同效果。

3)功能強大的組件，Bootstrap 設(shè)置了一套功能強大、實用性很強的組件，包括導航、下拉菜單、標簽、工具條、字體圖標、警告框、彈出框等一系列功能。

4)JavaScript 插件，Bootstrap 設(shè)置了很多實用性的 jquery 插件。jquery 是一個快速JavaScript 框架，只要引入這些插件，就可以為開發(fā)者實現(xiàn) 各種Web 特效。

3. Bootstrap 在Web 開發(fā)中的應(yīng)用

1)Bootstrap 下載：

Bootstrap 下載方法：進入百度，搜索bootstrap，找到boostrap 中文網(wǎng)。

2)Bootstrap 結(jié)構(gòu)

Bootstrap下載并解壓后，我們可以發(fā)現(xiàn)它的核心目錄主要分為三大部分：

1.css 樣式目錄，bootstrap.css 和bootstrap.min.css 是兩個相同的css 文件。其中bootstrap.css 是未壓縮版，bootstrap.min.css是壓縮版，我們引用時，一般引入這個壓縮版。

2.js 腳本目錄，bootstrap.js 和bootstrap.min.js 是兩個相同的js 文件。它和css 目錄一樣，分為未壓縮和壓縮版，我們引用時，一般也引入這個.min 壓縮版。

3.fonts 字體，fonts 目錄包含了不同后綴的字體文件。

3)引用Bootstrap 創(chuàng)建藍色背景的圓角按鈕

我們先來看一個藍色背景圓角按鈕的例子,首先創(chuàng)建一個HTML5 的頁面,然后引入Bootstrap 的核心文件,包括bootstrap.min.css、jquery.min.js、bootstrap.min.js。

如果要實現(xiàn)移動設(shè)備優(yōu)先，為移動應(yīng)用設(shè)備提供更好的 支 持，我 們 需 要 加 上：＜meta> 中 name="viewport" 和content="width=device-width, initial-scale=1"屬性。

代碼：＜button type="button" class=" btn btn-info">按鈕＜/button>可以實現(xiàn)一個藍色背景的圓角按鈕。

可以看出，Bootstrap 簡潔，靈活，易懂。就算你不是專業(yè)的WEB 設(shè)計者，不懂HTML、CSS JavaScript 代碼，你也可以通過Bootstrap 強大的功能設(shè)計出一個非常不錯的效果，這為開發(fā)者提供有力的幫助。

4. 總結(jié)

總之，Bootstrap 是一個簡潔、快速、靈活和最受歡迎的WEB開源框架。它為WEB 開發(fā)者提供了有力的幫助，不僅降低了開發(fā)周期，提高了工作效率，也節(jié)約了開發(fā)成本，規(guī)范了WEB 開發(fā)者的編寫習慣。