Tùy chỉnh theme Bootstrap
Trong bài học này, chúng ta sẽ tìm hiểu cách tuỳ chỉnh giao diện Bootstrap bằng cách sử dụng các biến màu ($primary, $success, v.v.). Việc tuỳ chỉnh này giúp tạo ra một giao diện thống nhất và mang dấu ấn riêng của dự án.
1. Giới thiệu Bootstrap Theme
Bootstrap cho phép tuỳ chỉnh giao diện bằng cách thay đổi các biến SASS. Các biến này giúp bạn thay đổi màu sắc, kiểu chữ, kích thước độ đậm, độ cao nút, v.v. theo nhu cầu riêng.
Một số biến quan trọng trong Bootstrap:
-
$primary: Màu chủ đạo -
$secondary: Màu phụ -
$success: Màu thành công -
$danger: Màu báo lỗi -
$warning: Màu cảnh báo -
$info: Màu thông tin
2. Cách thay đổi Bootstrap Theme
Cách 1: Tuỳ chỉnh bằng SASS
Sử dụng SASS để thay đổi Bootstrap Theme giúp giữ các quy tắc thiết kế một cách có hệ thống.
Bước 1: Cài đặt Bootstrap qua NPM
npm install bootstrap
Bước 2: Tạo file custom.scss
// Import Bootstrap Core
@import "bootstrap/scss/bootstrap";
// Tuỳ chỉnh biến
$primary: #ff5733; // Màu cam
$success: #28a745;
$danger: #dc3545;
// Import lại Bootstrap với các biến mới
@import "bootstrap/scss/bootstrap";
Bước 3: Compile SCSS sang CSS
Dùng công cụ như node-sass hoặc sass:
sass custom.scss custom.css
Sau đó, link custom.css vào trang web.
Cách 2: Tuỳ chỉnh nhanh qua CSS
Nếu không dùng SASS, bạn có thể ghi đè Bootstrap bằng CSS thuần:
:root {
--bs-primary: #ff5733;
--bs-success: #28a745;
--bs-danger: #dc3545;
}
3. Bài tập thực hành
Yêu cầu
Tạo một giao diện với bảng màu tùy chỉnh, trong đó:
- Thay đổi màu chủ đạo (
$primary) thành màu cam. - Tuỳ chỉnh các màu cảnh báo, nguy hiểm, thành công.
- Tạo một button sử dụng màu tùy chỉnh.
Gợi ý cách làm
HTML
<!DOCTYPE html>
<html lang="vi">
<head>
<link rel="stylesheet" href="custom.css">
</head>
<body>
<button class="btn btn-primary">Nút tùy chỉnh</button>
</body>
</html>
CSS (Tự viết hoặc dùng SCSS)
.btn-primary {
background-color: #ff5733;
border-color: #ff5733;
}
4. Kết luận
Tùy chỉnh Bootstrap giúp bạn tạo giao diện đồng bộ, phù hợp với thương hiệu hoặc phong cách của dự án. Bằng cách sử dụng SASS hoặc CSS thuần, bạn có thể linh hoạt điều chỉnh Bootstrap theo nhu cầu. H
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com