Bootstrap從入門到精通【1】(初識篇)?

Tags: 初識, 初識篇,

Bootstrap,來自 Twitter,是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷。

本經驗是《Bootstrap從入門到精通》系列經驗之一,主要熟悉Bootstrap框架的下載、簡單使用。

工具/原料

筆記本電腦或是臺式機

互聯網

Bootstrap

方法/步驟

在百度搜索引擎“Bootstrap”,訪問Bootstrap中文網。

Bootstrap從入門到精通【1】(初識篇)

Bootstrap從入門到精通【1】(初識篇)

下載Bootstrap最新穩定版,如下圖所示。

Bootstrap從入門到精通【1】(初識篇)

Bootstrap從入門到精通【1】(初識篇)

Bootstrap從入門到精通【1】(初識篇)

解壓bootstrap-3.3.5-dist.zip文件,Bootstrap框架文件夾目錄如下圖所示。

Bootstrap從入門到精通【1】(初識篇)

Bootstrap從入門到精通【1】(初識篇)

在項目中引入所需的Bootstrap庫和CSS文件

Bootstrap從入門到精通【1】(初識篇)

下載Bootstrap源碼,裡面有一些案例,初學者可以拿來學習。

Bootstrap從入門到精通【1】(初識篇)

Bootstrap從入門到精通【1】(初識篇)

Bootstrap從入門到精通【1】(初識篇)

在項目文件添加上述Javascript庫,用來支持HTML5和媒體查詢,如下圖所示。

Bootstrap從入門到精通【1】(初識篇)

官方網站提供的最簡單的 Bootstrap 頁面,如下圖所示,如此,Bootstrap環境搭建和一個最簡單的頁面就成功了,以後最就是 Bootstrap項目最基本的配置了。

Bootstrap從入門到精通【1】(初識篇)

注意事項

雖然v4.0.0-alpha已經發布,但是出於穩定性考慮還是選用Bootstrap 3.3.5

Bootstrap 的所有 JavaScript 插件都依賴 jQuery,因此 jQuery 必須在 Bootstrap 之前引入

相關問題答案