Bootstrap - Đăng nhập Mẫu

Tổng quan

Xin chào các bạn nhà phát triển web đang có chí hướng! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị để tạo một trang đăng nhập đẹp mắt và chức năng bằng cách sử dụng Bootstrap. Như một người giáo viên máy tính gần gũi, tôi sẽ hướng dẫn bạn từng bước qua quá trình này. Đừng lo lắng nếu bạn chưa từng viết một dòng mã trước đây - chúng ta sẽ bắt đầu từ những điều cơ bản và dần dần nâng cao. Cuối cùng của bài hướng dẫn này, bạn sẽ có một trang đăng nhập chuyên nghiệp mà bạn có thể tự hào!

Bootstrap-Sign In Demo

Bootstrap là gì?

Trước khi chúng ta nhảy vào mã, hãy nói về Bootstrap. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. Bạn có thể tự làm từng viên gạch từ đầu, hoặc bạn có thể sử dụng các vật liệu đã kész để tăng tốc quá trình. Bootstrap giống như những vật liệu đã kész đó trong phát triển web. Nó là một khung công tác CSS miễn phí và mã nguồn mở giúp chúng ta tạo ra các trang web phản hồi và ưu tiên di động nhanh chóng và dễ dàng.

Thiết lập Dự án của Chúng ta

Bước 1: Tạo Tệp HTML

Trước hết, hãy tạo tệp HTML của chúng ta. Mở trình soạn thảo văn bản yêu thích của bạn (tôi cá nhân rất thích Visual Studio Code, nhưng Notepad cũng hoạt động tốt cho người mới bắt đầu), và tạo một tệp mới có tên index.html. Đây sẽ là nền tảng cho trang đăng nhập của chúng ta.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Đăng nhập Mẫu</title>
</head>
<body>

</body>
</html>

Đây là cấu trúc HTML cơ bản của chúng ta. Hãy tưởng tượng nó như xương sống của trang web. Phần <head> là nơi chúng ta sẽ đặt thông tin về trang của mình, và phần <body> là nơi tất cả nội dung可见 sẽ được đặt.

Bước 2: Chèn Bootstrap

Bây giờ, hãy thêm một chút cơ bắp cho xương sống của chúng ta bằng cách bao gồm Bootstrap. Chúng ta sẽ làm điều này bằng cách thêm một số liên kết trong phần <head> của HTML:

<head>
<!-- ... mã trước đó ... -->
<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>

Những dòng này giống như cho trang web của chúng ta một bộ trang phục siêu anh hùng. Chúng liên kết đến các tệp CSS và JavaScript của Bootstrap, giúp chúng ta có quyền truy cập vào tất cả các thành phần và phong cách đã được xây dựng sẵn của Bootstrap.

Tạo Form Đăng nhập

Bước 1: Cấu trúc Form Cơ bản

Hãy bắt đầu xây dựng form đăng nhập của chúng ta. Thêm mã sau vào trong thẻ <body>:

<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<form>
<h2 class="mb-3">Đăng nhập</h2>
<!-- Các trường form sẽ được đặt ở đây -->
</form>
</div>
</div>
</div>
</body>

Hãy phân tích điều này:

container: Lớp Bootstrap này tạo ra một bình chứa có độ rộng cố định phản hồi.
mt-5: Thêm margin ở trên (hãy tưởng tượng nó như đẩy mọi thứ xuống một chút).
row và col-md-6: Những điều này tạo ra một cột được căn giữa có chiều rộng nửa phần trên màn hình trung bình và lớn hơn.

Bước 2: Thêm Trường Form

Bây giờ, hãy thêm các trường form của chúng ta. Thay thế bình luận trong form với:

<div class="mb-3">
<label for="email" class="form-label">Địa chỉ Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="password" class="form-label">Mật khẩu</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">Ghi nhớ tôi</label>
</div>
<button type="submit" class="btn btn-primary">Đăng nhập</button>

Dưới đây là vai trò của từng phần:

mb-3: Thêm margin ở dưới của mỗi div để tạo khoảng cách.
form-label: Định dạng các nhãn cho các đầu vào của chúng ta.
form-control: Làm cho các đầu vào của chúng ta trông đẹp và nhất quán.
form-check và form-check-input: Định dạng các hộp kiểm và nút radio.
btn btn-primary: Tạo một nút có màu xanh lam đẹp.

Thêm Một Số Phong Cách

Hãy làm cho trang đăng nhập của chúng ta trông tốt hơn với một chút CSS tùy chỉnh. Thêm này vào phần <head> của bạn:

<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 này cho trang của chúng ta một nền màu xám nhạt, thêm một bình chứa trắng với một影子 nhẹ cho form của chúng ta, và màu xanh lam cho tiêu đề để phù hợp với chủ đề Bootstrap.

Đtouch Cuối Cùng: Thiết kế Phản hồi

Một trong những điều tuyệt vời về Bootstrap là nó phản hồi theo mặc định. Điều này có nghĩa là trang đăng nhập của chúng ta sẽ trông tốt trên cả máy tính để bàn và thiết bị di động. Tuy nhiên, hãy thêm một tweak nữa để làm cho nó hoàn hảo:

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

Thay thế col-md-6 trong container form của bạn với dòng này. Bây giờ, trên các thiết bị nhỏ, form sẽ chiếm 8 cột, và trên các thiết bị rất nhỏ, nó sẽ chiếm 10 cột, đảm bảo rằng nó luôn dễ đọc và sử dụng.

Kết luận

Và thế là xong! Bạn vừa tạo ra một trang đăng nhập đẹp mắt và phản hồi bằng cách sử dụng Bootstrap. Dưới đây là bảng tóm tắt các lớp Bootstrap chính mà chúng ta đã sử dụng:

Lớp	Mục đích
container	Tạo ra một bình chứa có độ rộng cố định phản hồi
row	Tạo ra một nhóm cột nằm ngang
col-*	Định nghĩa chiều rộng của các cột cho các kích thước màn hình khác nhau
form-control	Định dạng các đầu vào form
form-label	Định dạng các nhãn form
form-check	Định dạng các hộp kiểm và nút radio
btn	Tạo một nút
btn-primary	Định dạng một nút với màu chính
mt-*	Thêm margin ở trên
mb-*	Thêm margin ở dưới

Nhớ rằng, phát triển web là tất cả về việc thực hành và sáng tạo. Đừng ngại thử nghiệm với các màu sắc, bố cục và các thành phần Bootstrap khác nhau. Ai biết được? Dự án tiếp theo của bạn có thể là điều lớn tiếp theo trên internet!

Chúc may mắn trong việc lập mã, các pháp sư web tương lai!

Credits: Image by storyset

Hướng Dẫn Trước:

Demo Album Bootstrap

Hướng Dẫn Tiếp Theo:

Demo Định giá Bootstrap