Bootstrap3.0學習筆記之入門篇

2024-08-30 08:36:36

字體：大中小

來源：轉載

供稿：網友

作為本學習筆記的第一篇，開篇之作，我們還是跟其他系列的文章一樣，先來點Bootstrap的介紹，再循序漸進吧。

前言

在上一節中http://www.survivalescaperooms.com/wangyesheji/buju/43489.html主要是簡單的介紹了一下Bootstrap。從http://www.bootcss.com/中文網不難發現現在是針對兩個版本進行文檔說明，看來兩個版本的差別還是蠻大的。

Bootstrap3.0學習筆記之入門篇

不過從Visual Studio 2013的更新中看，微軟是將Bootstrap3的新版本加入到了VS當中，所以也沒什么好說的了，學習Bootstrap3也沒什么顧慮了。

下載BootStrap

官網的文件很詳細簡單，對于下載來說也有多種方式。對于我們開發者來說，估計最簡單的方式就是直接下載編譯和壓縮后的CSS、JavaScript文件，另外還包含字體文件，但是不包含文檔和源碼文件。打開解壓包之后可以發現包含三個文件夾 css、fonts、js。

可以來查看三個文件夾中的文件

Bootstrap3.0學習筆記之入門篇

這是最基本的Bootstrap組織形式：未壓縮版的文件可以在任意web項目中直接使用。我們提供了壓縮(bootstrap.min.*)與未壓縮 (bootstrap.*)的CSS和JS文件。字體圖標文件來自于Glyphicons。

bower.json中列出了Bootstrap所支持的jQuery版本。

Bootstrap3.0學習筆記之入門篇

可以看到依賴的jQuery庫的版本>=1.9.0即可。

下面通過訪問http://jquery.com/

Bootstrap3.0學習筆記之入門篇

我來下載最新的版本2.03

可以通過IE直接訪問http://code.jquery.com/jquery-2.0.3.min.js

Bootstrap3.0學習筆記之入門篇

另存到與Bootstrap文件夾下的js文件夾里面。

注意：所有Bootstrap插件都依賴jQuery。而且在正式的項目當中我們推薦使用壓縮之后的版本，因為它的體積很?。ɡ锩嫒〕隽俗⑨尩奈淖趾涂瞻祝?/p>

在網頁中使用Bootstrap

我們創建了一個最簡單的基本模版

復制代碼

代碼如下:

<!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">    </head> <body> <h1>Hello, world!</h1> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

1.首先我們可以將Bootstrap的樣式文件引用當網頁中

復制代碼

上一篇：Bootstrap之所以廣泛流傳的11大原因

下一篇：Bootstrap3.0學習筆記之柵格系統原理