Bootstrap 在Web 開發中的應用與研究

王莉 廣州華夏職業學院

引言

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

1 .Bootstrap 概念

1.1 Bootstrap 概念

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

1.2 為什么使用Bootstrap?

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

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

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

2. Bootstrap 功能介紹

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

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

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

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

3. Bootstrap 在Web 開發中的應用

1)Bootstrap 下載：

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

2)Bootstrap 結構

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

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 創建藍色背景的圓角按鈕

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

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

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

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

4. 總結

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