Bootstrap thang độ xám

Grayscale là một chủ đề Bootstrap 3 miễn phí được tạo bởi Start Bootstrap. Nó có thể là của bạn ngay bây giờ, chỉ cần tải xuống mẫu trên trang xem trước. Chủ đề là mã nguồn mở và bạn có thể sử dụng nó cho bất kỳ mục đích nào, cá nhân hoặc thương mại

Chủ đề này có các ảnh lưu trữ bằng Gratisography cùng với giao diện Google Maps tùy chỉnh nhờ Snazzy Maps

Thang độ xám bao gồm các tệp HTML, CSS và JavaScript tùy chỉnh đầy đủ cùng với các tệp LESS để dễ dàng tùy chỉnh

Grayscale là một chủ đề Bootstrap 3 miễn phí được tạo bởi Start Bootstrap. Nó có thể là của bạn ngay bây giờ, chỉ cần tải xuống mẫu trên trang xem trước. Chủ đề là mã nguồn mở và bạn có thể sử dụng nó cho bất kỳ mục đích nào, cá nhân hoặc thương mại

Chủ đề này có các ảnh lưu trữ bằng Gratisography cùng với giao diện Google Maps tùy chỉnh nhờ Snazzy Maps

Phiên bản Grayscale này bao gồm các tệp HTML, CSS và JavaScript tùy chỉnh đầy đủ cùng với các tệp SASS và bower để tùy chỉnh dễ dàng hơn

Mẫu thang độ xám có bố cục đáp ứng đầy đủ với mã HTML5 và CSS3 hợp lệ và rõ ràng. Nó đã bao gồm phần Google Maps, hỗ trợ phông chữ biểu tượng, thiết kế sẵn sàng cho võng mạc, tiêu đề dính khi cuộn và cả bố cục tương thích với trình duyệt được tối ưu hóa và hiệu suất

Các lớp tiện ích màu nền thang độ xám

Bootstrap Snippets Thư viện / Ví dụ tiện ích

Xem trước đoạn mã

Xem Demo Xem CodePen

Mệt mỏi vì loay hoay với CSS và Bố cục thiết kế?

Mua các mẫu Bootstrap

Chia sẻ cái này

Truyền đạt ý nghĩa thông qua màu sắc với một số lớp tiện ích màu sắc. Bao gồm hỗ trợ cho các liên kết tạo kiểu với trạng thái di chuột

Màu

văn bản chính

văn bản phụ

văn bản thành công

văn bản nguy hiểm

văn bản cảnh báo

thông tin văn bản

ánh sáng văn bản

văn bản tối

nội dung văn bản

văn bản bị tắt tiếng

chữ trắng

chữ-đen-50

chữ-trắng-50

.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white




.text-black-50
.text-white-50

Các lớp văn bản theo ngữ cảnh cũng hoạt động tốt trên các neo với trạng thái di chuột và tiêu điểm được cung cấp. Lưu ý rằng lớp .text-white và .text-muted không có kiểu dáng liên kết bổ sung ngoài gạch dưới

Primary link
Secondary link
Success link
Danger link
Warning link
Info link
Light link
Dark link
Muted link
White link

Màu nền

Tương tự như các lớp màu văn bản theo ngữ cảnh, dễ dàng đặt nền của một phần tử thành bất kỳ lớp theo ngữ cảnh nào. Các thành phần neo sẽ tối hơn khi di chuột, giống như các lớp văn bản. Các tiện ích nền không đặt color, vì vậy trong một số trường hợp, bạn sẽ muốn sử dụng các tiện ích .text-*

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white




.bg-transparent

Độ dốc nền

Khi $enable-gradients được đặt thành true, bạn sẽ có thể sử dụng các lớp tiện ích .bg-gradient-. Theo mặc định, $enable-gradients bị vô hiệu hóa và ví dụ bên dưới bị phá vỡ có chủ ý. Điều này được thực hiện để tùy chỉnh dễ dàng hơn ngay từ khi bạn bắt đầu sử dụng Bootstrap. để kích hoạt các lớp này và hơn thế nữa

.bg-gradient-primary
.bg-gradient-secondary
.bg-gradient-success
.bg-gradient-danger
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-gradient-dark

Xử lý cụ thể

Đôi khi không thể áp dụng các lớp theo ngữ cảnh do tính đặc hiệu của bộ chọn khác. Trong một số trường hợp, một cách giải quyết phù hợp là bọc nội dung phần tử của bạn trong một

với lớp

Truyền đạt ý nghĩa cho các công nghệ hỗ trợ

Việc sử dụng màu sắc để thêm ý nghĩa chỉ cung cấp dấu hiệu trực quan, dấu hiệu này sẽ không được chuyển tải đến người dùng công nghệ hỗ trợ – chẳng hạn như trình đọc màn hình. Đảm bảo rằng thông tin được biểu thị bằng màu sắc rõ ràng từ chính nội dung (e. g. văn bản hiển thị), hoặc được bao gồm thông qua các phương tiện thay thế, chẳng hạn như văn bản bổ sung ẩn với lớp

Primary link
Secondary link
Success link
Danger link
Warning link
Info link
Light link
Dark link
Muted link
White link

Làm cách nào để triển khai chế độ tối Bootstrap?

Làm cách nào để sử dụng các chủ đề trong Bootstrap?

Làm cách nào để tùy chỉnh chủ đề Bootstrap?

Lấy các mẫu Bootstrap ở đâu?