Trong hướng dẫn này, bạn sẽ tìm hiểu về các lớp tiện ích của Bootstrap.
Bạn có thể sử dụng các lớp màu theo ngữ cảnh để nhấn mạnh văn bản và truyền tải ý nghĩa thông qua màu sắc. Đây là danh sách đầy đủ các lớp màu theo ngữ cảnh có sẵn.
| Tên lớp | Mô tả |
|---|---|
.text-primary |
Áp dụng màu xanh lam (#007bff) trên văn bản. |
.text-secondary |
Áp dụng màu xám (#6c757d) trên văn bản. |
.text-success |
Áp dụng màu xanh lá (#28a745) trên văn bản. |
.text-danger |
Áp dụng màu đỏ (#dc3545) trên văn bản. |
.text-warning |
Áp dụng màu vàng (#ffc107) trên văn bản. |
.text-info |
Áp dụng màu mòng két (#17a2b8) trên văn bản. |
.text-light |
Áp dụng màu xám rất nhạt (#f8f9fa) trên văn bản. |
.text-dark |
Áp dụng màu xám đậm (#343a40) trên văn bản. |
.text-body |
Áp dụng màu văn bản mặc định của Bootstrap (#212529) trên văn bản. |
.text-muted |
Áp dụng màu xám nhạt (#6c757d) trên văn bản. |
.text-white |
Áp dụng màu trắng (#fff) trên văn bản. |
.text-black-50 |
Áp dụng màu đen 50% trong suốt (rgba(0,0,0,.5)) trên văn bản. |
.text-white-50 |
Áp dụng màu trắng 50% trong suốt (rgba(255,255,255,.5)) trên văn bản. |
Tương tự như các lớp màu theo ngữ cảnh, bạn có thể sử dụng các lớp màu nền theo ngữ cảnh để thiết lập background-color của một phần tử nhằm tạo điểm nhấn mạnh hơn cho chúng.
| Class | Description |
|---|---|
.bg-primary |
Áp dụng màu nền xanh lam (#007bff) trên một phần tử. |
.bg-secondary |
Áp dụng màu nền xám (#6c757d) trên một phần tử. |
.bg-success |
Áp dụng màu nền xanh lá (#28a745) trên một phần tử. |
.bg-danger |
Áp dụng màu nền đỏ (#dc3545) trên một phần tử. |
.bg-warning |
Áp dụng màu nền vàng (#ffc107) trên một phần tử. |
.bg-info |
Áp dụng màu nền mòng két (#17a2b8) trên một phần tử. |
.bg-light |
Áp dụng màu nền xám nhẹ (#f8f9fa) trên một phần tử. |
.bg-dark |
Áp dụng màu nền xám đậm (#343a40) trên một phần tử. |
.bg-white |
Áp dụng màu nền trắng (#fff) trên một phần tử. |
.bg-transparent |
Áp dụng màu nền trong suốt (transparent) trên một phần tử. |
Bạn có thể sử dụng các lớp căn chỉnh văn bản này để căn chỉnh và định dạng nội dung văn bản của mình.
| Tên lớp | Mô tả |
|---|---|
.text-start |
Căn chỉnh văn bản sang trái. |
.text-center |
Căn giữa văn bản. |
.text-end |
Căn chỉnh văn bản sang bên phải. |
.text-wrap |
Bọc văn bản tràn. |
.text-nowrap |
Ngăn không cho văn bản bị bao bọc. |
.text-truncate |
Cắt ngắn văn bản bằng dấu chấm lửng. |
.text-break |
Ngắt những từ dài để khỏi bị tràn. |
.text-lowercase |
Chuyển văn bản thành chữ thường. |
.text-uppercase |
Chuyển văn bản thành chữ hoa. |
.text-capitalize |
Viết hoa chữ cái đầu tiên của mỗi từ. |
.fw-bold |
Đặt font-weight của một phần tử thành bold. |
.fw-bolder |
Đặt font-weight của một phần tử thành bolder (so với phần tử cha). |
.fw-normal |
Đặt font-weight của một phần tử thành normal. |
.fw-light |
Đặt font-weight của một phần tử thành light. |
.fw-lighter |
Đặt font-weight của một phần tử thành lighter (so với phần tử cha). |
.fst-italic |
Đặt font-style của một phần tử thành italic. |
.fst-normal |
Đặt font-style của một phần tử thành bình thường. |
.font-monospace |
Đặt font-family của một phần tử thành font monospace (chiều rộng cố định) |
.text-reset |
Đặt lại màu của văn bản hoặc liên kết (kế thừa màu từ cha của nó). |
.text-decoration-none |
Xóa trang trí văn bản chẳng hạn như gạch chân khỏi văn bản. |
.text-decoration-underline |
Thêm gạch chân vào văn bản. |
.text-decoration-line-through |
Thêm dòng gạch ngang vào giữa văn bản. |
Bạn có thể sử dụng các lớp tiện ích đường viền để nhanh chóng tạo kiểu đường viền và bán kính đường viền của một phần tử. Chúng rất hữu ích cho hình ảnh, nút hoặc bất kỳ phần tử nào khác.
| Tên lớp | Mô tả |
|---|---|
.border |
Thêm đường viền trên tất cả các mặt của một phần tử. |
.border-top |
Thêm đường viền ở phía trên cùng của một phần tử. |
.border-end |
Thêm đường viền ở phía bên phải của một phần tử. |
.border-bottom |
Thêm một đường viền ở phía dưới cùng của một phần tử. |
.border-start |
Thêm đường viền ở phía bên trái của một phần tử. |
.border-0 |
Xóa đường viền khỏi tất cả các mặt của một phần tử. |
.border-top-0 |
Xóa đường viền khỏi mặt trên của một phần tử. |
.border-end-0 |
Xóa đường viền từ phía bên phải của một phần tử. |
.border-bottom-0 |
Loại bỏ đường viền từ phía dưới cùng của một phần tử. |
.border-start-0 |
Loại bỏ đường viền từ phía bên trái của một phần tử. |
.border-primary |
Thay đổi màu đường viền của một phần tử thành màu xanh lam (#007bff). |
.border-secondary |
Thay đổi màu đường viền của một phần tử thành màu xám (#6c757d). |
.border-success |
Thay đổi màu đường viền của một phần tử thành màu xanh lục (#28a745). |
.border-danger |
Thay đổi màu viền của một phần tử thành màu đỏ (#dc3545). |
.border-warning |
Thay đổi màu đường viền của một phần tử thành màu vàng (#ffc107). |
.border-info |
Thay đổi màu viền của một phần tử thành màu xanh mòng két (#17a2b8). |
.border-light |
Thay đổi màu đường viền của một phần tử thành màu xám rất nhạt (#f8f9fa). |
.border-dark |
Thay đổi màu đường viền của một phần tử thành màu xám đậm (#343a40). |
.border-white |
Thay đổi màu đường viền của một phần tử thành màu trắng (#fff). |
.rounded |
Làm tròn tất cả các góc của một phần tử. |
.rounded-top |
Làm tròn các góc trên cùng bên trái và trên cùng bên phải của một phần tử. |
.rounded-end |
Làm tròn các góc trên cùng bên phải và dưới cùng bên phải của một phần tử. |
.rounded-bottom |
Làm tròn các góc dưới cùng bên trái và dưới cùng bên phải của một phần tử. |
.rounded-start |
Làm tròn các góc trên cùng bên trái và dưới cùng bên trái của một phần tử. |
.rounded-circle |
Làm tròn một phần tử thành hình tròn. |
.rounded-pill |
Làm tròn một phần tử thành hình viên thuốc. |
.rounded-0 |
Xóa các góc tròn khỏi một phần tử. |
.rounded-1 |
Đặt bán kính đường viền (border-radius) là 0,2rem cho một phần tử. |
.rounded-2 |
Đặt bán kính đường viền (border-radius) là 0,25rem cho một phần tử. |
.rounded-3 |
Đặt bán kính đường viền (border-radius) là 0,3rem cho một phần tử. |
Bạn có thể sử dụng các lớp tiện ích khoảng cách để nhanh chóng điều chỉnh lề và phần đệm của một phần tử.
Ký tự # trong các lớp .mt-#, .pt-# v.v. đại diện cho kích thước của lề hoặc phần đệm. Giá trị của kích thước có thể là một số nguyên từ 0 đến 5 hoặc auto.
Kích thước 0 loại bỏ hoàn toàn lề hoặc phần đệm bằng cách đặt nó thành 0, trong khi giá trị auto đặt lề thành tự động. Các số nguyên từ 1 đến 5đặt lề hoặc phần đệm tăng dần (từ 0,25rem đến 3rem). Hãy thử các ví dụ để xem nó hoạt động như thế nào:
| Tên lớp | Mô tả |
|---|---|
.mt-# |
Đặt lề trên của một phần tử. |
.mb-# |
Đặt lề dưới cùng của một phần tử. |
.ms-# |
Đặt lề trái của một phần tử. |
.me-# |
Đặt lề phải của một phần tử. |
.mx-# |
Đặt lề trái và lề phải của một phần tử. |
.my-# |
Đặt lề trên và lề dưới của một phần tử. |
.pt-# |
Đặt phần đệm trên cùng của một phần tử. |
.pb-# |
Đặt phần đệm dưới cùng của một phần tử. |
.ps-# |
Đặt phần đệm bên trái của một phần tử. |
.pe-# |
Đặt phần đệm bên phải của một phần tử. |
.px-# |
Đặt phần đệm bên trái và bên phải của một phần tử. |
.py-# |
Đặt phần đệm trên cùng và dưới cùng của một phần tử. |
Mẹo: Bạn cũng có thể áp dụng lề âm bằng cách sử dụng các lớp tiện ích lề. Chỉ cần thêm số kích thước với ký tựnở phía trước, ví dụ:.mt-n1,.mb-n2, v.v.
Bạn có thể sử dụng các lớp tiện ích float để nhanh chóng làm một phần tử sang trái hoặc phải hoặc xóa hoàn toàn float khỏi một phần tử. Đây là danh sách các lớp float có sẵn.
| Tên lớp | Mô tả |
|---|---|
.float-start |
Làm nổi một phần tử sang bên trái. |
.float-end |
Làm nổi một phần tử sang bên phải. |
.float-none |
Tắt tính năng nổi từ một phần tử. |
.clearfix |
Xóa nổi để ngăn phần tử gốc không bị thu gọn. |
.float-*-start |
Làm nổi một phần tử sang bên trái dựa trên kích thước khung nhìn. |
.float-*-end |
Làm nổi một phần tử sang bên phải dựa trên kích thước khung nhìn. |
.float-*-none |
Tắt tính năng nổi từ một phần tử dựa trên kích thước khung nhìn. |
Mẹo: Ký tự*trong các lớp.float-*-leftvà.float-*-rightđại diện cho điểm ngắt responsive có thể làsm,md,lg,xlhoặcxxl. Xem hệ thống lưới Bootstrap để biết thêm chi tiết.
Bạn có thể sử dụng các lớp tiện ích tạo bóng để nhanh chóng thêm hoặc xóa bóng cho các phần tử.
| Tên lớp | Mô tả |
|---|---|
.shadow |
Thêm bóng đổ vào một phần tử. |
.shadow-sm |
Thêm một bóng đổ nhỏ vào một phần tử. |
.shadow-lg |
Thêm một bóng đổ lớn hơn vào một phần tử. |
.shadow-none |
Loại bỏ bóng khỏi một phần tử. |
Bạn có thể sử dụng các lớp tiện ích định kích thước để dễ dàng tạo một phần tử rộng hoặc cao.
| Tên lớp | Mô tả |
|---|---|
.w-25 |
Đặt chiều rộng của một phần tử bằng 25% so với phần tử cha của nó. |
.w-50 |
Đặt chiều rộng của một phần tử bằng 50% phần tử cha của nó. |
.w-75 |
Đặt chiều rộng của một phần tử bằng 75% phần tử cha của nó. |
.w-100 |
Đặt chiều rộng của một phần tử bằng 100% phần tử cha của nó. |
.w-auto |
Đặt chiều rộng của một phần tử thành tự động, tức là trình duyệt sẽ tính toán và chọn chiều rộng cho phần tử được chỉ định. |
.mw-100 |
Đặt chiều rộng tối đa của một phần tử thành 100%. |
.h-25 |
Đặt chiều cao của một phần tử thành 25% của phần tử cha của nó. |
.h-50 |
Đặt chiều cao của một phần tử thành 50% của phần tử cha của nó. |
.h-75 |
Đặt chiều cao của một phần tử thành 75% của phần tử cha của nó. |
.h-100 |
Đặt chiều cao của một phần tử thành 100% của phần tử cha của nó. |
.h-auto |
Đặt chiều cao của một phần tử thành tự động, tức là trình duyệt sẽ tính toán và chọn chiều cao cho phần tử được chỉ định. |
.mh-100 |
Đặt chiều cao tối đa của một phần tử thành 100%. |
.vw-100 |
Đặt chiều rộng của một phần tử bằng 100% chiều rộng của khung nhìn. |
.min-vw-100 |
Đặt chiều rộng tối thiểu của một phần tử thành 100% chiều rộng của khung nhìn. |
.vh-100 |
Đặt chiều cao của một phần tử bằng 100% chiều cao của khung nhìn. |
.min-vh-100 |
Đặt chiều cao tối thiểu của một phần tử thành 100% chiều cao của khung nhìn. |
Bạn có thể sử dụng các lớp tiện ích căn chỉnh theo chiều dọc để nhanh chóng thay đổi căn chỉnh theo chiều dọc của các phần tử ô trong hàng, khối nội tuyến, bảng nội tuyến và ô bảng.
| Tên lớp | Mô tả |
|---|---|
.align-baseline |
Căn chỉnh đường cơ sở của phần tử với đường cơ sở của phần tử gốc. |
.align-top |
Căn chỉnh đầu của phần tử với đầu của toàn bộ dòng. |
.align-middle |
Căn chỉnh phần tử ở giữa phần tử cha. |
.align-bottom |
Căn chỉnh phần dưới cùng của phần tử với phần dưới cùng của toàn bộ dòng. |
.align-text-top |
Căn chỉnh phần trên cùng của phần tử với phần trên cùng của phông chữ của phần tử cha. |
.align-text-bottom |
Căn chỉnh phần dưới cùng của phần tử với phần dưới cùng của phông chữ của phần tử cha. |
Bạn có thể sử dụng các lớp tiện ích vị trí để nhanh chóng cấu hình vị trí của một phần tử.
| Tên lớp | Mô tả |
|---|---|
.position-static |
Đặt vị trí của phần tử thành tĩnh. |
.position-relative |
Đặt vị trí của phần tử thành tương đối. |
.position-absolute |
Đặt vị trí của phần tử thành tuyệt đối. |
.position-fixed |
Đặt vị trí của phần tử thành cố định. |
.position-sticky |
Đặt vị trí của phần tử thành dính. |
.fixed-top |
Định vị một phần tử ở đầu khung nhìn. |
.fixed-bottom |
Định vị một phần tử ở dưới cùng của khung nhìn. |
.sticky-top |
Đặt một phần tử ở đầu khung nhìn, chỉ xảy ra sau khi bạn cuộn qua nó. |
Bạn có thể sử dụng các lớp tiện ích hiển thị để chuyển đổi giá trị hiển thị của một phần tử một cách nhanh chóng. Bạn cũng có thể kiểm soát màn hình của phần tử khi in trang.
| Tên lớp | Mô tả |
|---|---|
.d-none |
Ẩn một phần tử. Nó không chiếm bất kỳ không gian nào trong bố cục. |
.d-inline |
Buộc một phần tử tạo một hộp nội tuyến. |
.d-inline-block |
Buộc một phần tử tạo một hộp khối sẽ được truyền với nội dung xung quanh, tức là trong cùng một dòng với nội dung liền kề như hộp nội tuyến. |
.d-block |
Buộc một phần tử tạo hộp khối. |
.d-table |
Buộc một phần tử hoạt động giống như một phần tử <table>. |
.d-table-row |
Buộc một phần tử hoạt động giống như một phần tử <tr>. |
.d-table-cell |
Buộc một phần tử hoạt động giống như một phần tử <td>. |
.d-flex |
Buộc một phần tử tạo hộp chứa linh hoạt. |
.d-inline-flex |
Buộc một phần tử tạo hộp chứa linh hoạt cấp nội tuyến. |
Bạn cũng có thể sử dụng các điểm ngắt responsive (sm, md, lg, xl và xxl) với các lớp tiện ích hiển thị này để hiển thị hoặc ẩn các phần tử tùy thuộc vào chiều rộng khung nhìn bằng cách sử dụng định dạng , ví dụ .d-sm-none, .d-md-block, .d-lg-block, .d-xl-block, .d-xxl-block, v.v.
Để có đầy đủ các lớp tiện ích flex, vui lòng xem trang tham khảo Bootstrap flex.
Mẹo: Bạn có thể tạo biến thể in của các lớp hiển thị để thay đổi giá trị hiển thị của các phần tử khi in bằng cách chỉ cần chèn chuỗiprint-vào sau.d-, ví dụ :.d-print-none,.d-print-inline,.d-print-block,.d-print-table, v.v.
Đây là danh sách một số lớp tiện ích khác có thể được sử dụng cho các mục đích khác nhau.
| Tên lớp | Mô tả |
|---|---|
.btn-close |
Tạo icon đóng chung để tắt các thành phần như modal và alert. |
.overflow-auto |
Cung cấp thanh cuộn để xem nội dung bị tràn của một phần tử nếu được yêu cầu. |
.overflow-hidden |
Ẩn nội dung bị tràn của một phần tử. |
.overflow-visible |
Hiển thị nội dung tràn của một phần tử. |
.overflow-scroll |
Cung cấp thanh cuộn để xem nội dung bị tràn của một phần tử. |
.stretched-link |
Làm cho một phần tử có thể nhấp được bằng cách kéo dài một liên kết lồng nhau. |
.visible |
Hiển thị một phần tử. |
.invisible |
Làm cho một phần tử ẩn nhưng nó vẫn chiếm dung lượng trong trang. |
.visually-hidden |
Ẩn một phần tử đối với tất cả các thiết bị ngoại trừ trình đọc màn hình. |
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.
Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.
Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.
Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.