Bootstrap - 開始模板範例

你好，有志於網頁開發的各位！今天，我們將要進入Bootstrap的奇妙世界，並探索它的開始模板。作為你們親切鄰居的電腦科學老師，我非常興奮能夠引導你們走這段旅程。所以，拿起你們最喜歡的飲料，放鬆身心，讓我們開始吧！

Bootstrap-Starter template Demo

開始模板是什麼？

在我們深入了解Bootstrap的開始模板之前，讓我們先了解一下開始模板到底是什麼。把它當作是網站結構的預製配方。就像菜譜給你基本的食材和製作指導，讓你創造出一道美味的菜肴一樣，開始模板為你提供了踢走你的網頁專案所需的HTML、CSS和JavaScript。

在Bootstrap的背景下，開始模板是一個包含所有必要Bootstrap組件和依賴的基礎HTML文件。這就像是一個空白的畫布，所有的繪畫工具都已經設置好，準備好讓你開始創作！

為什麼使用開始模板？

你可能會想，「為什麼要麻煩使用開始模板？我不能從頭開始寫嗎？」其實，你當然可以，但讓我分享一個我早期教學日子的小故事。

我曾經有一個學生堅持從頭建造一切。雖然令人欽佩，但他花費了幾個星期去努力解決基本的佈局問題，而Bootstrap在幾分鐘內就能解決。不要像那個學生一樣 - 要聰明工作，而不是辛苦工作！

使用開始模板：

節省時間
確保你有所有必要的依賴
提供一個一致的起點
帮助你专注于实际的内容和功能

現在我們明白了「為什麼」，讓我們來看看「如何」！

Bootstrap開始模板

這是一個基本的Bootstrap開始模板長什麼樣：

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>

<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>

讓我們一塊塊地來解析這個：

文件類型聲明

<!doctype html>

這一行告訴瀏覽器這是一個HTML5文件。這就像在開始對話之前介紹自己一樣 - 它為接下來的一切設定基調。

HTML標籤

<html lang="en">

這個標籤打開我們的HTML文件，並指定語言是英語。這就像打開一個書本，看到它是以英語寫成的。

頭部節

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>Hello, world!</title>
</head>

<head>節包含了關於我們文件的元數據。讓我們來解析一下：

<meta charset="utf-8">：這指定了HTML文件的字符編碼。UTF-8是一個通用字符編碼，可以表示任何字符。
<meta name="viewport" content="width=device-width, initial-scale=1">：這確保網頁是響應式的，並在所有設備上看起来都不錯。
The <link>標籤從CDN導入了Bootstrap的CSS文件。這就像導入了一本為你的網頁設計的風格指南。
<title>：這設定了我們網頁的標題，它會出現在瀏覽器標籤中。

邏輯部分

<body>
<h1>Hello, world!</h1>

<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>

<body>節是網頁主要內容的地方。在這個開始模板中，它包括：

一個簡單的"Hello, world!"標題來讓你開始。
Bootstrap功能的JavaScript文件。你有兩個選擇：

選項1：一個包含Bootstrap和Popper.js（Bootstrap某些組件所依賴的庫）的單一打包文件。
選項2：分開的Popper.js和Bootstrap文件（默認為註釋狀態）。

使用開始模板

現在我們已經剖析了開始模板，讓我們來使用它吧！以下是如何基於這個模板建立一個簡單網頁的例子：

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<title>我的第一個Bootstrap頁面</title>
</head>
<body>
<div class="container">
<h1 class="mt-5">歡迎來到我們的網站！</h1>
<p class="lead">這是一個簡單的橫幅單元，一個簡單的JUnit風格的組件，用於為特色內容或信息吸引更多的關注。</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" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

在這個例子中，我們添加了一個簡單的橫幅單元（一個突出的信息框）使用Bootstrap類。讓我們來分解我們添加了什麼：

<div class="container">：這創建了一個響應式的固定寬度容器。
<h1 class="mt-5">：mt-5類為標題添加了頂部間距。
<p class="lead">：lead類使這段文字更加突出。
<hr class="my-4">：這創建了一個水平線，並在y軸上有間距。
<a class="btn btn-primary btn-lg">：這創建了一個大型的，主要顏色的按鈕。

結論

就这样，各位！我們已經穿越了Bootstrap開始模板的土地，從了解它們是什麼到使用一個來創建一個簡單的網頁。記住，這只是開始。Bootstrap提供了大量的組件和工具，你可以用它們來創建出色的響應式網站。

當我們結束時，我想到我另一個學生。她從這個相同的模板開始，到了學期末，創建了一個作品集網站，並通過這個網站獲得了一個實習機會。誰知道呢？也許幾個月後那就是你！

繼續練習，繼續探索，最重要的是，享受其中的樂趣。網頁開發既是藝術，也是科學，所以讓你的創造力發光發亮。直到下次見，快樂編程！

Credits: Image by storyset