Bootstrap - 英雄演示

英雄區塊是什麼？

各位有抱負的網頁開發者大家好！今天，我們將要進入Bootstrap的精彩世界，並創建一個引人注目的英雄區塊。但首先，讓我們回答這個燃眉之急的問題：究竟什麼是英雄區塊？

Bootstrap - Heroes Demo

親愛的學生們，英雄區塊就像是您網站的書籍封面。它是訪客登入您的頁面時首先看到的東西，也是您留下深刻第一印象的機會。把它當作您網站的超級英雄，飛撲過來吸引訪客的注意力，並拯救他們離開那個可怕的返回按鈕！

英雄區塊的關鍵元素

元素	描述
標題	一個引人注目的，加粗的聲明
副標題	支持文本，用於闡述標題
呼吁行動 (CTA)	一個鼓勵用戶互動的按鈕或鏈接
背景圖像	一個視覺上吸引人的，相關的圖像或視頻
覆蓋層	一個半透明的層，以改善文本的可讀性

現在我們知道了我們要建造的東西，讓我們捋起袖子開始編程吧！

設置Bootstrap環境

在我們創建我們的英雄傑作之前，我們需要布置舞台。讓我們從基本的HTML結構開始，並包含Bootstrap：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的驚艷英雄區塊</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文件。這就像為我們的英雄創作準備一個空白的畫布！

創建英雄區塊

現在，讓我們在<body>標籤內添加我們的英雄區塊：

<section class="hero vh-100 d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-lg-7">
<h1 class="display-4 fw-bold mb-3">歡迎來到我們的驚艷網站</h1>
<p class="lead mb-4">發現令人驚奇的事物，並用我們前沿的解決方案釋放您的潛力。</p>
<a href="#" class="btn btn-primary btn-lg">開始使用</a>
</div>
</div>
</div>
</section>

讓我們分解一下：

我們創建了一個<section>，並帶有類別：

hero：我們的自定義類別，用于樣式設置
vh-100：使區塊占滿視口高度
d-flex align-items-center：垂直居中內容

在其中，我們有一個Bootstrap的container和row。
我們的內容在col-lg-7中，這在大屏幕上佔7個列。
我們使用Bootstrap的類別對排版進行樣式設置：

display-4：大而引人注目的文本
fw-bold：使文本加粗
lead：稍大的段落文本

“開始使用”按鈕使用btn btn-primary btn-lg進行樣式設置。

添加背景圖像

讓我們的英雄更加英勇，讓我們添加一個背景圖像：

<style>
.hero {
background: url('https://source.unsplash.com/random/1920x1080') no-repeat center center;
background-size: cover;
position: relative;
}
.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.hero * {
position: relative;
color: white;
}
</style>

這段CSS做了幾件事：

設置了一個從Unsplash隨機選擇的背景圖像。
創建了一個半透明的覆蓋層，以改善文本的可讀性。
確保所有文本都是白色的，並位於覆蓋層之上。

响應式調整

為了讓我們的英雄區塊在所有設備上都看起來很棒，讓我們添加一些響應式類別：

<section class="hero vh-100 d-flex align-items-center text-center text-lg-start">
<div class="container">
<div class="row">
<div class="col-lg-7 mx-auto mx-lg-0">
<h1 class="display-4 fw-bold mb-3">歡迎來到我們的驚艷網站</h1>
<p class="lead mb-4">發現令人驚奇的事物，並用我們前沿的解決方案釋放您的潛力。</p>
<a href="#" class="btn btn-primary btn-lg px-5 py-3 fs-6">開始使用</a>
</div>
</div>
</div>
</section>

這裡的變化如下：

添加了text-center text-lg-start以在小型屏幕上居中文本，在大型屏幕上左對齊。
添加了mx-auto mx-lg-0以在小屏幕上居中列。
增加了按鈕的內距和設定了字體大小。

最後的觸摸：動畫

讓我們添加一個簡單的動畫，讓我們的英雄區塊更具吸引力：

<style>
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hero h1, .hero p, .hero .btn {
animation: fadeIn 1s ease-out forwards;
opacity: 0;
}
.hero h1 { animation-delay: 0.5s; }
.hero p { animation-delay: 1s; }
.hero .btn { animation-delay: 1.5s; }
</style>

這段CSS為我們的內容創造了一個淡入和滑上的效果，每個元素在前一個元素之後稍微出現。

而這就是，未來的網頁魔法師們！您剛剛使用Bootstrap創建了一個引人注目、響應式和動畫化的英雄區塊。記住，熟能生巧，所以不要害怕嘗試不同的佈局、顏色和動畫。誰知道呢？您下一個英雄區塊可能會為客戶的網站挽救大局！

快樂編程，願您的像素總是完美對齊！

Credits: Image by storyset