Bootstrap - 標題範例

標題是什麼？

大家好，未來的網頁開發者！今天，我們將要深入Bootstrap標題的精彩世界。但在我們開始之前，讓我們從基礎知識著手。想像你正在閱讀一本書 - 每個章節開始時你看到的首先是什麼？沒錯，就是標題！在網頁設計中，標題有著相似的作用。

Bootstrap - Headers Demo

標題通常是網頁頂部的區域，包含重要的導航元素、品牌信息和有時關鍵信息或行動呼吁。它就像是你的網站門毯，迎接訪客並幫助他們找到路徑。

標題為何重要？

標題有幾個關鍵原因：

它們為你的網站提供一致的風格。
它們改進導航和用戶體驗。
它們加強你的品牌識別。
它們可以提升你的網站SEO（搜索引擎優化）。

現在，我們了解了標題是什麼以及它們的重要性，讓我們看看Bootstrap如何幫我們輕鬆創建出色的標題！

Bootstrap標題入門

在我們深入代碼之前，請確保你的專案中已經包含了Bootstrap。如果你以前沒有這麼做過，別擔心！這就像在HTML文件中添加幾行代碼一樣簡單：

<!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>

這段代碼設置了基本的HTML結構並包含了Bootstrap的CSS和JavaScript文件。把它看作是我們標題表演的舞臺！

創建一個簡單的標題

讓我們從一個簡單的標題開始。我們將使用Bootstrap的導航欄組件作為基礎：

<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">我的網站</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">首頁</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">關於</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">服務</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">聯繫</a>
</li>
</ul>
</div>
</div>
</nav>
</header>

讓我們來解析一下：

<header>: 這個標籤包裹我們整個標題部分。
<nav class="navbar navbar-expand-lg navbar-light bg-light">: 這個創建了一個淺色背景的導航欄，在大屏幕上會展開。
<div class="container">: 這個將內容居中並提供響應式填充。
<a class="navbar-brand">: 這通常是你放置你的標誌或網站名稱的地方。
<button>元素創建了一個手機視圖的切換按鈕。
<div class="collapse navbar-collapse">: 這個包含了在小屏幕上會折疊的菜單項目。
<ul class="navbar-nav ms-auto">: 這個創建了導航菜單項目的列表，並右對齊。

添加英雄區域

為了讓我們的標題更具吸引力，讓我們在導航欄下方添加一個英雄區域：

<header>
<!-- 前面的導航欄代碼 -->

<div class="bg-primary text-white py-5">
<div class="container">
<h1 class="display-4">歡迎來到我的網站</h1>
<p class="lead">這是一個簡單的英雄單元，一個簡單的僅供展示的組件，用以吸引更多關注特色內容或信息。</p>
<a class="btn btn-light btn-lg" href="#" role="button">了解更多</a>
</div>
</div>
</header>

這段代碼創建了一個藍色背景區域，白色文字，一個大標題，一個段落和一個行動呼吁按鈕。這就像在標題上添加了一個聚光燈 - 將注意力集中在你想要傳達的最重要信息上。

調整響應式設計

Bootstrap最出色的特點之一就是內置的響應式設計。我們的標題會自動調整以適應不同的屏幕尺寸，但我們可以進一步增強這一點：

<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- 前面的導航欄內容 -->
</nav>

<div class="bg-primary text-white py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<h1 class="display-4">歡迎來到我的網站</h1>
<p class="lead">這是一個簡單的英雄單元，一個簡單的僅供展示的組件，用以吸引更多關注特色內容或信息。</p>
<a class="btn btn-light btn-lg" href="#" role="button">了解更多</a>
</div>
<div class="col-lg-6 d-none d-lg-block">
<img src="path/to/your/image.jpg" alt="標題圖片" class="img-fluid rounded">
</div>
</div>
</div>
</div>
</header>

這段代碼在大屏幕上將英雄區域分成兩列，文字在左邊，圖片在右邊。在較小的屏幕上，圖片會被隱藏以保持乾淨的佈局。

固定標題

想要讓標題在用戶滾動時粘附在頁面頂部？只需將fixed-top類添加到你的導航欄：

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<!-- 導航欄內容 -->
</nav>

記得在body中添加一些填充，以防止內容被固定標題遮蔽：

<style>
body {
padding-top: 56px;
}
</style>

自定義你的標題

Bootstrap提供了一個很好的起點，但不要害怕添加你自己的樣式！以下是如何自定義你的標題的示例：

<style>
.custom-header {
background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
}
.custom-header .navbar-brand,
.custom-header .nav-link {
color: white !important;
}
.custom-header .nav-link:hover {
color: #f8f9fa !important;
}
</style>

<header class="custom-header">
<!-- 你的標題內容 -->
</header>

這段CSS創造了一個美麗的漸變背景並確保所有文字都是白色且易於閱讀的。

結論

這就是了，各位！我們已經穿越了Bootstrap標題的土地，從簡單的導航欄到引人注目的英雄區域。記住，最好的標題不僅要好看，而且要為用戶提供良好的服務。所以不要害怕嘗試並找到最适合你網站的東西。

以下是我們使用過的Bootstrap類別的快速參考表：

類別	用途
navbar	創建一個導航組件
navbar-expand-lg	確定在什麼斷點導航欄會展開
navbar-light	為導航欄設置淺色主題
bg-light	設置淺色背景
container	居中內容并提供響應式填充
navbar-brand	樣式化品牌/標誌區域
navbar-toggler	創建一個手機視圖的切換按鈕
collapse navbar-collapse	包裹可折疊的導航欄內容
navbar-nav	樣式化全高和輕量級導航
nav-item	樣式化每個導航項目
nav-link	樣式化導航欄中的實際鏈接
fixed-top	使導航欄粘附在視口頂部
bg-primary	設置主要（通常是藍色）背景色
text-white	設置文字顏色為白色
display-4	創建一個大而引人注目的標題
lead	樣式化一個段落以突出顯示
btn btn-light btn-lg	創建一個大型的淺色按鈕

持續練習，保持好奇心，不久你將能夠創建有功能且外觀出色的標題。快樂編程！

Credits: Image by storyset