原文位址： http://www.work100.net/training/monolithic-frameworks-bootstrap-environment-setup.html 更多教程： 光束雲 - 免費課程
環境搭建
| 序号 | 文内章節 | 視訊 |
|---|---|---|
| 1 | 概述 | - |
| 2 | 下載下傳Bootstrap | |
| 3 | 檔案結構 | |
| 4 | HTML模闆 | |
| 5 | 執行個體 |
請參照如上
章節導航
進行閱讀
1.概述
Bootstrap 安裝是非常容易的。本章将講解如何下載下傳并安裝 Bootstrap，讨論 Bootstrap 檔案結構，并通過一個執行個體示範它的用法。
2.下載下傳Bootstrap
您可以通過位址
http://getbootstrap.com/ http://getbootstrap.com/下載下傳 Bootstrap 的最新版本。
當您點選這個連結時，您将看到如下所示的網頁：
點選
Download
按鈕進入下載下傳頁面，如下：
如果您使用的是未編譯的源代碼，您需要編譯 LESS 檔案來生成可重用的 CSS 檔案。
為了更好的了解和更友善的使用，我們将在本教程中使用 Bootstrap 的預編譯版本。
由于檔案是被編譯過和壓縮過的，在獨立的功能開發中，您不必每次都包含這些獨立的檔案。
本教程編寫時，使用的是最新版（
Bootstrap 4.4.1）。
3.檔案結構
當您下載下傳了 Bootstrap 的已編譯的版本，解壓縮 ZIP 檔案，您将看到下面的檔案/目錄結構：
-
bootstrap.*
-
bootstrap.min.*
3.1.CSS檔案
Bootstrap包含一些選項，可以包含部分或全部已編譯的CSS。
| CSS files | Layout | Content | Components | Utilities |
|---|---|---|---|---|
| bootstrap.css bootstrap.min.css | Included | |||
| bootstrap-grid.css bootstrap-grid.min.css | Only grid system | Not included | Only flex utilities | |
| bootstrap-reboot.css bootstrap-reboot.min.css | Only Reboot |
3.2.JS檔案
同樣，我們可以選擇包含部分或全部已編譯的JavaScript。
| JS files | Popper | jQuery |
|---|---|---|
| bootstrap.bundle.js bootstrap.bundle.min.js | ||
| bootstrap.js bootstrap.min.js |
4.HTML模闆
一個使用了 Bootstrap 的基本的 HTML 模闆如下所示：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, Bootstrap!</title>
</head>
<body>
<h1>Hello, Bootstrap!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html> 5.執行個體
我們通過一個執行個體展示下如何建構基于
Bootstrap
的項目。
5.1.建立項目
首先通過
IDEA
建立一個
hello-bootstrap
項目，并建構如下目錄結構：
目錄結構說明：
| 目錄 | 含義 |
|---|---|
| assets/css/ | 樣式 |
| assets/images/ | 圖檔 |
| assets/js/ | JS |
| assets/plugins/ | 插件 |
| assets/plugins/bootstrap/ | Bootstrap 架構 |
| assets/plugins/bootstrap/css/ | Bootstrap 架構的樣式 |
| assets/plugins/bootstrap/js/ | Bootstrap 架構的JS |
| assets/plugins/jquery-3.4.1.js | jQuery檔案 |
5.2.建立測試檔案
在項目根目錄建立一個
index.html
檔案，引入
Bootstrap
架構，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="./assets/plugins/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Hello Bootstrap</h1>
<script src="./assets/plugins/jquery-3.4.1.min.js"></script>
<script src="./assets/plugins/bootstrap/js/bootstrap.min.js"></script>
</body>
</html> 為了對比使用和未使用
Bootstrap
的差異，我們新增一個未引入
Bootstrap
架構的
test.html
檔案，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<h1>Hello Bootstrap</h1>
</body>
</html> 5.3.運作
在
IDEA
編輯器中打開
index.html
和
test.html
檔案，點選圖示位置運作：
對比下運作結果：
5.4.源碼擷取
執行個體源碼已經托管到如下位址：
- https://github.com/work100-net/training-stage2/tree/master/hello-bootstrap https://github.com/work100-net/training-stage2/tree/master/hello-bootstrap
- https://gitee.com/work100-net/training-stage2/tree/master/hello-bootstrap https://gitee.com/work100-net/training-stage2/tree/master/hello-bootstrap
上一篇：
簡介下一篇：
網格系統如果對課程内容感興趣，可以掃碼關注我們的或公衆号
，及時關注我們的課程更新QQ群