Một thiết kế tốt bao gồm việc sử dụng đúng màu sắc. Trong hướng dẫn này, chúng tôi sẽ giải thích một số thủ thuật để làm việc với màu Bootstrap. Nó có thể hữu ích khi bạn cần thay đổi giao diện tổng thể của trang web hoặc đánh dấu một cảnh báo Bootstrap nhất định
Sử dụng các ví dụ mã, chúng tôi sẽ giới thiệu cách sử dụng các lớp theo ngữ cảnh giúp đơn giản hóa giao diện mã của bạn
nội dung
Màu Bootstrap. Mẹo chính
- Bootstrap 4 cung cấp các lớp mà bạn có thể sử dụng để thêm màu tùy thuộc vào ngữ cảnh mà phần tử đang được sử dụng trong đó
- Thành phần này của Bootstrap 4 có thể giúp việc đọc mã của bạn dễ dàng hơn bằng cách cung cấp manh mối theo ngữ cảnh thông qua tên lớp
- Sử dụng các tiền tố khác nhau, các lớp này có thể được sử dụng cho cả màu văn bản Bootstrap và màu nền, cũng như các phần tử tô màu
Danh sách các lớp theo ngữ cảnh
- *-primary đổi màu thành blue #007bff.
- *-info đổi màu thành xanh mòng két #17a2b8.
- *-success đổi màu thành xanh lục #28a745.
- *-cảnh báo thay đổi màu sắc thành vàng #ffc107.
- *-danger đổi màu thành đỏ #dc3545.
- *-dark đổi màu thành xám đậm #343a40.
- *-secondary đổi màu thành xám #6c757d.
- *-light đổi màu thành xám nhạt #f8f9fa.
- *-white đổi màu thành white #ffffff.
Tùy thuộc vào những gì bạn cần cung cấp màu sắc, _______________ có thể được thay thế bằng các tiền tố lớp khác nhau [chẳng hạn như _______________]. Trong các phần sau, chúng tôi sẽ giải thích cách thực hiện điều đó
Sửa đổi màu Bootstrap
Văn bản màu
Để sử dụng các lớp theo ngữ cảnh cho màu phông chữ, bạn nên thêm tiền tố lớp text
vào đầu
Sao chép ví dụ
Success.
Dùng thử trực tiếp Tìm hiểu trên Udacity
Trong ví dụ bên dưới, bạn có thể thấy các màu Bootstrap được áp dụng cho văn bản liên kết
Sao chép ví dụ
Success.
Dùng thử trực tiếp Tìm hiểu trên Udacity
Ghi chú. Màu văn bản Bootstrap cũng có thể được áp dụng cho các neo có trạng thái di chuột và tiêu điểm
Bằng cách thêm tham số thứ ba, bạn cũng có thể sửa đổi độ mờ [tính theo phần trăm] của màu Bootstrap. Trong ví dụ mã bên dưới, bạn có thể thấy cách sửa đổi độ mờ ảnh hưởng đến màu văn bản
Sao chép ví dụ
Black text with 50% opacity
White text with 50% opacity
Dùng thử trực tiếp Tìm hiểu trên Udacity
ưu
- Thiết kế đơn giản [không có thông tin không cần thiết]
- Các khóa học chất lượng cao [ngay cả những khóa học miễn phí]
- Tính năng đa dạng
- chương trình cấp bằng nano
- Thích hợp cho doanh nghiệp
- Giấy chứng nhận hoàn thành trả tiền
LOẠI TRỪ. GIẢM GIÁ 75%
ưu
- Dễ điều hướng
- Không có vấn đề kỹ thuật
- Có vẻ quan tâm đến người dùng của nó
- Rất nhiều khóa học đa dạng
- chính sách hoàn tiền trong 30 ngày
- Giấy chứng nhận hoàn thành miễn phí
THẤP NHƯ 12. 99$
ưu
- Trải nghiệm người dùng tuyệt vời
- Cung cấp nội dung chất lượng
- Rất minh bạch với giá cả của họ
- Giấy chứng nhận hoàn thành miễn phí
- Tập trung vào các kỹ năng khoa học dữ liệu
- Lịch học linh hoạt
GIẢM GIÁ 75%
Màu nền
Nếu bạn cần thêm một số màu vào văn bản của mình, nhưng tô màu nền thay vì các ký tự, bạn nên sử dụng tiền tố lớp bg
Sao chép ví dụ
Success.
Dùng thử trực tiếp Tìm hiểu trên Udacity
Ghi chú. khi di chuột, các thành phần neo được tô màu bằng lớp màu nền Bootstrap sẽ tối đi
kết hợp các lớp
Để linh hoạt hơn, bạn cũng có thể sử dụng kết hợp các lớp màu văn bản và màu nền của Bootstrap. Hãy xem một ví dụ dưới đây. Bạn có thể thấy
Success.
0 được sử dụng. Do đó, chúng tôi có một văn bản màu đen với độ mờ 50 phần trăm và nền màu xám nhạtSao chép ví dụ
Light background with 50% opacity black text
Dùng thử trực tiếp Tìm hiểu trên Udacity
Nút màu
Các lớp ngữ cảnh Bootstrap cũng có thể được sử dụng để tô màu các thành phần trang khác nhau, chẳng hạn như các nút. Điều này giúp bạn tích hợp các chức năng vào thiết kế đã chọn một cách liền mạch
Để thay đổi màu của nút Bootstrap, bạn nên áp dụng tiền tố
Success.
1 cho lớp màu đã chọn