Bootstrap - 概觀

你好，有志於網頁開發的各位！我很興奮能成為你們在Bootstrap世界的驚險旅程中的導遊。作為一個教了多年計算機科學的人，我可以告訴你們，Bootstrap是你在網頁開發冒險中將遇到的最強大的工具之一。那麼，讓我們一起來探索吧！

Bootstrap - Overview

Bootstrap是什麼？

Bootstrap就像網頁開發者的瑞士軍刀。它是一個免費的開源前端框架，讓建立響應式、以手機為先的網站變得輕鬆。把它當作一組預先編寫的CSS樣式和JavaScript插件，你可以使用它來創建有吸引力且功能性的網站，而不需要從頭開始。

一個快速的比喻

想像你正在蓋房子。沒有Bootstrap，你將不得不自己切割每一塊木材，混合所有的水泥，和製造每一根釘子。有了Bootstrap，就像你有一個裝滿預製部件的倉庫。你只需要選擇你想要的部件，然後把它們組裝起來。更快，不是嗎？

Bootstrap的歷史

Bootstrap並非總是如今日這般強大。讓我們一起回顧一下過去：

2010年：Twitter工程師Mark Otto和Jacob Thornton創建了Bootstrap，作為一個內部工具，以確保他們的项目之間的一致性。
2011年：Bootstrap作為一個開源項目公開釋出。
2013年：Bootstrap 3引入了以手機為先的方法。
2018年：Bootstrap 4帶來了重大的改進和新功能。
2021年：Bootstrap 5發布，移除了jQuery的依賴，並引入了新的組件。

Bootstrap 5及之後版本中的關鍵點

Bootstrap 5及其後續更新帶來了一些遊戲規則改變的功能：

移除jQuery：這減少了框架的大小，並提高了性能。
增強的網格系統：在創建響應式佈局方面有更多的靈活性。
新的工具類：為更輕鬆的自定義提供了額外的工具類。
改善的文件：使初學者更容易學習。
暗色模式：內置支持創建暗色主題的網站。

Bootstrap - 優勢

你應該使用Bootstrap嗎？這裡有一些令人信服的原因：

響應式設計：Bootstrap讓你的網站在所有設備上都有出色的顯示效果。
一致性：確保在不同的瀏覽器中有一致的外觀。
可自定義：你可以輕鬆地修改Bootstrap以符合你的需求。
節省時間：預建的組件加速了開發過程。
庞大的社群：在線上有大量的资源和支援。

Bootstrap - 重要的全局設定

在我們開始編程之前，讓我們看看Bootstrap中的一些重要全局設定：

HTML5 Doctype：Bootstrap需要使用HTML5 doctype。
響應式Meta標籤：確保在移動設備上正確渲染。
Box-sizing：Bootstrap全局設置為box-sizing: border-box。
Reboot：在不同的瀏覽器中提供一致的基础。

以下是一個包含這些全局設定的基本HTML模板：

<!DOCTYPE html>
<html lang="zh-tw">
<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>
<h1>你好，Bootstrap！</h1>

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

這個模板設置了一個基本的HTML結構，並包含了Bootstrap。viewport meta標籤確保在移動設備上正確渲染，我們已經連接到Bootstrap的CSS和JavaScript文件。

使用CDN

現在，讓我們來討論如何將Bootstrap實際地包含在你的项目中。最簡單的方法之一是使用CDN（內容分發網絡）。

CDN是什麼？

想像如果你每次想讀書都要去中央圖書館，那會很慢，不是嗎？CDN就像在地理上分佈多個圖書館。它從最接近用戶的服務器提供Bootstrap文件，使你的網站加載更快。

以下是如何通過CDN包含Bootstrap：

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JavaScript (可選) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

只需將這些行添加到你的HTML文件的<head>部分，你就準備好開始使用Bootstrap了！

一個簡單的Bootstrap示例

讓我們把所有東西放在一起，來做一个简单的示例：

<!DOCTYPE html>
<html lang="zh-tw">
<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>
<div class="container">
<h1 class="mt-5">歡迎來到Bootstrap！</h1>
<p class="lead">這是一個簡單的英雄單元，一個簡單的傑洛姆樣式的組件，用於為特色內容或信息吸引額外的關注。</p>
<hr class="my-4">
<p>它使用工具類為排版和間距，在更大的容器內間隔內容。</p>
<a class="btn btn-primary btn-lg" href="#" role="button">了解更多</a>
</div>

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

這個示例創建了一個簡單的"英雄"部分，包含一個標題、一些文本和一個按鈕。讓我們分解一下：

<div class="container">：這創建了一個響應式的容器，使內容居中。
class="mt-5"：在標題的顶部添加間距。
class="lead"：使段落以更大的字體大小突出。
class="my-4"：在水平線的顶部和底部添加間距。
class="btn btn-primary btn-lg"：創建一個大的、主要顏色的按鈕。

結論

恭喜你！你已經踏入了Bootstrap世界的第一步。我們已經從Bootstrap是什麼以及它的歷史，到如何將它包含在项目中並創建一個簡單的頁面，都涵蓋了基礎知識。

記住，學習網頁開發就像學習烹飪。起初，你可能會完全遵循配方（像我們的示例）。但是當你越來越熟悉時，你就會開始嘗試並創造自己獨特的"菜餚"。所以不要害怕玩轉Bootstrap並看看你能創造出什麼！

在我們的下一課中，我們將深入探討Bootstrap的網格系統，以及它是如何讓響應式設計變得輕鬆的。在那之前，快樂編程！

Credits: Image by storyset