Tại W3Schools, bạn sẽ tìm thấy một tài liệu tham khảo Bootstrap đầy đủ về tất cả các lớp CSS, Thành phần và plugin JavaScript - tất cả đều có các ví dụ "Tự dùng thử"
Bootstrap Chủ đề / Mẫu
Chúng tôi đã tạo một số Mẫu Bootstrap mà bạn có thể sử dụng. Chúng hoàn toàn miễn phí để sử dụng
Bootstrap 5 so với. Bootstrap 3 & 4
Hướng dẫn này tuân theo Bootstrap 3, được phát hành vào năm 2013. Tuy nhiên, chúng tôi cũng bao gồm các phiên bản mới hơn;
Bootstrap 5 là phiên bản mới nhất của Bootstrap; . Nó hỗ trợ các bản phát hành ổn định, mới nhất của tất cả các trình duyệt và nền tảng chính. Tuy nhiên, Internet Explorer 11 trở xuống không được hỗ trợ
Sự khác biệt chính giữa Bootstrap 5 và Bootstrap 3 & 4 là Bootstrap 5 đã chuyển sang JavaScript thay vì jQuery
Ghi chú. Bootstrap 3 và Bootstrap 4 vẫn được nhóm hỗ trợ để sửa các lỗi quan trọng và thay đổi tài liệu, và hoàn toàn an toàn khi tiếp tục sử dụng chúng. Tuy nhiên, các tính năng mới sẽ KHÔNG được thêm vào chúng
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 của
Primary link
Secondary link
Success link
Danger link
Warning link
Info link
Light link
Dark link
Muted link
White link
0. 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. Tìm hiểu về các tùy chọn Sass của chúng tôi để 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
1