Bootstrap - 登入範例

概述

你好，有志於網頁開發的各位！今天，我們將踏上一段令人興奮的旅程，使用Bootstrap來創建一個美觀且功能性的登入頁面。作為你們親切的鄰居電腦老師，我將指導你們一步一步地完成這個過程。別擔心如果你之前從未寫過一行代碼——我們將從最基本的開始，逐步學習。在本教程結束時，你將擁有一個專業看起來的登入頁面，可以讓你感到自豪！

Bootstrap-Sign In Demo

Bootstrap是什麼？

在我們深入代碼之前，讓我們先來聊聊Bootstrap。想像你正在蓋房子。你可以從頭開始製造每一塊磚，或者你可以使用預製材料來加快進程。Bootstrap就是網頁開發中的那些預製材料。它是一個免費且開源的CSS框架，能夠幫助我們快速且容易地創建響應式且以移動設備為先的網站。

建立我們的專案

步驟1：創建HTML文件

首先，讓我們創建我們的HTML文件。打開你喜歡的文本編輯器（我個人喜歡Visual Studio Code，但Notepad對初學者來說也很不錯），並創建一個名為index.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>
</head>
<body>

</body>
</html>

這是我們的基本HTML結構。把它當作我們網頁的骨骼。<head>部分是我們放置關於我們頁面信息的地方，而<body>是所有可見內容將要放置的地方。

步驟2：引入Bootstrap

現在，讓我們通過引入Bootstrap來給我們的骨骼增加一些肌肉。我們將通過在HTML的<head>部分添加一些鏈接來實現這一點：

<head>
<!-- ...之前的代碼... -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

這些行就像給我們的網頁穿上一套超級英雄服裝。它們鏈接到Bootstrap的CSS和JavaScript文件，這將給我們提供對Bootstrap所有預製組件和樣式的訪問權。

創建登入表單

步驟1：基本表單結構

讓我們開始建立我們的登入表單。將以下代碼添加到<body>標籤內：

<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<form>
<h2 class="mb-3">登入</h2>
<!-- 表單字段將放在這裡 -->
</form>
</div>
</div>
</div>
</body>

讓我們分解這些：

container：這個Bootstrap類別創建一個響應式的固定寬度容器。
mt-5：在頂部添加間距（可以想像為把所有東西向下推一點）。
row 和 col-md-6：這些創建一個居中的列，在中型和大屏幕上佔一半的寬度。

步驟2：添加表單字段

現在，讓我們添加我們的表單字段。將表單中的註釋替換為以下內容：

<div class="mb-3">
<label for="email" class="form-label">電子郵件地址</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">密碼</label>
<input type="password" class="form-control" id="password" required>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="remember">
<label class="form-check-label" for="remember">記住我</label>
</div>
<button type="submit" class="btn btn-primary">登入</button>

這裡是每部分的作用：

mb-3：在每個div底部添加間距以分隔。
form-label：為我們的輸入標籤樣式。
form-control：使我們的輸入看起來漂亮且一致。
form-check 和 form-check-input：樣式化勾選框和單選按鈕。
btn：創建一個按鈕。
btn-primary：為按鈕樣式使用主要顏色。
mt-*：在頂部添加間距。
mb-*：在底部添加間距。

添加一些樣式

讓我們通過添加一些自定義CSS來使登入頁面看起來更好。將以下代碼添加到你的<head>部分：

<style>
body {
background-color: #f8f9fa;
}
.container {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h2 {
color: #007bff;
}
</style>

這段CSS給我們的頁面一個浅灰色的背景，為我們的表單添加一個帶有微妙陰影的白色容器，並將我們的標題顏色設為藍色以匹配Bootstrap主題。

最後的觸摸：響應式設計

Bootstrap的一個很好的特點是它默認就是響應式的。這意味著我們的登入頁面將在桌面和移動設備上都看起來很好。然而，讓我們添加一個小調整來使其完美：

<div class="col-md-6 col-sm-8 col-10">

將你的表單容器中的col-md-6替換為這行代碼。現在，在小型設備上，表單將佔8列，而在超小型設備上，它將佔10列，確保它總是容易閱讀和使用。

結論

這就是全部！你剛剛使用Bootstrap創建了一個美觀且響應式的登入頁面。這裡是一個表，總結我們使用的主要Bootstrap類別：

類別	目的
container	創建一個響應式的固定寬度容器
row	創建一個水平列的組
col-*	定義不同屏幕尺寸下的列寬度
form-control	樣式化表單輸入
form-label	樣式化表單標籤
form-check	樣式化勾選框和單選按鈕
btn	創建一個按鈕
btn-primary	為按鈕樣式使用主要顏色
mt-*	在頂部添加間距
mb-*	在底部添加間距

記住，網頁開發是關於實踐和創造力。不要害怕嘗試不同的顏色、佈局和Bootstrap組件。誰知道？你的下一個專案可能會成為互聯網上的下一個大熱門！

未來的網頁巫師，快樂編程！

Credits: Image by storyset