Bootstrap 環境安裝

Bootstrap,來自 Twitter,是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷。
Bootstrap 安裝是非常容易的。下面將講解如何下載並安裝 Bootstrap,討論 Bootstrap 文件結構,並通過一個實例演示它的用法。
您可以從 http://getbootstrap.com/ 上下載 Bootstrap 的最新版本。當您點擊這個鏈接時,您將看到如下所示的網頁:
這裏寫圖片描述
點擊Download Bootstrap
您會看到兩個按鈕:
這裏寫圖片描述

由於文件是被編譯過和壓縮過的,在獨立的功能開發中,您不必每次都包含這些獨立的文件。

當您下載了 Bootstrap 的已編譯的版本,解壓縮 ZIP 文件,您將看到下面的文件/目錄結構:
這裏寫圖片描述
如果您下載了 Bootstrap 源代碼,那麼文件結構將如下所示:
這裏寫圖片描述
直接在eclipse中新建一個web project,將壓縮後的文件複製到WebContent下面,再新建一個hello.html.
這裏寫圖片描述
hello.html裏面代碼爲:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
</head>
<body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</body>
</html>

運行結果爲
這裏寫圖片描述
就OK啦

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章