Bootstrap - 環境設定

你好，有志於網頁開發的同学们！我很興奮能成為你們在Bootstrap世界中的導航者。作為一個具有多年經驗的計算機科學老師，我見過無數學生在了解到Bootstrap能夠轉變他們的網頁開發技能時眼中閃爍的光芒。那麼，讓我們一起來設定我們的Bootstrap環境吧！

Bootstrap - Environment Setup

Bootstrap是什麼？

在我們開始之前，讓我們快速回顧一下Bootstrap是什麼。想像你正在蓋一個房子。Bootstrap就像是一個預製的套件，提供了所有必要的部件，讓你能夠快速建造一個堅固且外觀良好的房子。在網頁開發的術語中，它是一個強大的前端框架，提供了預製的組件和樣式，幫助你輕鬆創建響應式、移動優先的網站。

編譯好的CSS和JS

使用Bootstrap的最簡單方法是在你的項目中包含其編譯好的CSS和JavaScript文件。這就像獲得了一套現成的工具包——你不需要自己組裝工具！

以下是如何在HTML文件中包含Bootstrap的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的Bootstrap頁面</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 你的內容放在這裡 -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

在這個例子中，我們在<head>部分鏈接到Bootstrap的CSS文件，並在關閉的</body>標籤之前包含JavaScript文件。這樣可以確保樣式先被加載，JavaScript在頁面內容加載後運行。

源文件

對於那些喜歡拆解和定制（我看見你了，未來的開發者們！）的人來說，Bootstrap也提供了源文件。這些是組成Bootstrap的原始材料，使用Sass和JavaScript編寫。

要使用源文件，你需要設置一個使用任務運行器（如Gulp或Webpack）的構建過程。這稍微複雜一些，我們將留待將來的課程中再討論。記住，這就像有了一個蛋糕的配方和原料，從零開始烘烤蛋糕，而不是購買預製的蛋糕！

通過jsDelivr使用CDN

CDN代表內容分發網絡。這就像在世界各地的圖書館中有這本書的副本——用戶可以快速訪問最近的副本。jsDelivr是一個免費、開源的CDN，托管Bootstrap文件。

以下是如何通過jsDelivr使用Bootstrap：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

integrity和crossorigin屬性是為了安全。它們就像一個秘密握手，確保你獲得了你期望的 exact 文件。

包管理器

對於更複雜的項目，你可能会使用包管理器，如npm或yarn。這些是幫助管理項目依賴的工具。把他們看作是一個個人的助手，為你的網頁開發配方跟蹤所有需要的原料。

要使用npm安裝Bootstrap，你會打開終端並輸入：

npm install bootstrap

然後在你的JavaScript文件中，你可以這樣導入Bootstrap：

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';

HTML模板

現在，讓我們把所有這些放在一個基本的HTML模板中：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap演示</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<h1>你好，Bootstrap世界！</h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>

這個模板包含了必要的meta標籤，通過CDN鏈接到Bootstrap的CSS和JS文件，並有一個簡單的"你好，Bootstrap世界！"標題來幫助你開始。

結論

恭喜你！你剛剛設置好了你的Bootstrap環境。這就像你剛剛打開了你的工具箱，並且把所有的工具都擺好了。現在，你可以開始建造令人驚艷的、響應式的網站了。

記住，精通Bootstrap（或任何技術）的關鍵是練習。不要害怕嘗試和犯錯誤——我們都是這樣學習的。在我多年的教學中，我見過學生從完全的初學者變得能在很短的時間內使用Bootstrap創建出令人驚艷的網站。

在我們的下一次課程中，我們將深入探討使用Bootstrap的網格系統來創建佈局。這將會非常刺激，所以請繼續關注！

快樂編程，願你的網站總是響應式！??

方法	描述	使用難度	定制性
編譯好的CSS和JS	使用預編譯的Bootstrap文件	簡單	有限
源文件	使用Bootstrap的原始源文件	高級	高
通過jsDelivr使用CDN	鏈接到CDN上托管的Bootstrap文件	非常簡單	有限
包管理器	使用npm或yarn安裝Bootstrap	中等	中等

Credits: Image by storyset