Bootstrap 4 Tất cả các lớp CSS – bootstrap 4 lớp div

Bạn đang xem : bootstrap 4 lớp div

.active
Thêm màu văn bản trắng vào liên kết đang hoạt động trong thanh điều hướng .

Hãy thử
Thanh điều hướng
.active
Thêm màu nền xanh lam vào mục danh sách đang hoạt động trong nhóm danh sách

Hãy thử
Nhóm danh sách
.active
Thêm màu nền xanh lam đậm để mô phỏng nút được nhấn
Hãy thử
Các nút
.active
Thêm màu nền xanh lam vào mục thả xuống đang hoạt động trong trình đơn thả xuống

Hãy thử
Trình đơn thả xuống
.active
Thêm màu nền xanh lam vào liên kết phân trang đang hoạt động (để đánh dấu trang hiện tại)

Hãy thử
Phân trang
.active
Hiển thị / hiển thị mục băng chuyền hiện tại

Hãy thử
Băng chuyền

. alert
Tạo hộp thông báo cảnh báo
Hãy thử
Cảnh báo
.alert-risk
Báo động đỏ. Cho biết một hành động nguy hiểm hoặc có khả năng tiêu cực
Hãy thử
Cảnh báo
.alert-dark
Cảnh báo tối. Hộp cảnh báo màu xám đậm
Hãy thử
Cảnh báo
.alert-Remoible
Cho biết một hộp cảnh báo có thể đóng. Cùng với lớp .close , lớp này được sử dụng để đóng cảnh báo (thêm phần đệm bổ sung)
Hãy thử
Cảnh báo
.alert-header
Thêm color: inherit vào phần tử được chỉ định
Hãy thử
Cảnh báo
.alert-info
Cảnh báo màu xanh lam. Cho biết một hành động hoặc thay đổi mang tính thông tin trung tính
Hãy thử
Cảnh báo
.alert-light
Cảnh báo nhẹ. Hộp cảnh báo màu xám nhạt
Hãy thử
Cảnh báo
.alert-link
Được sử dụng trên các liên kết bên trong cảnh báo để cung cấp các liên kết có màu phù hợp
Hãy thử
Cảnh báo
.alert-primary
Cảnh báo màu xanh. Cho biết một hành động quan trọng
Hãy thử
Cảnh báo
.alert-Secondary
Cảnh báo xám. Cho biết một hành động “ít quan trọng hơn”
Hãy thử
Cảnh báo
.alert-success
Cảnh báo xanh. Cho biết một hành động thành công hoặc tích cực
Hãy thử
Cảnh báo
.alert-warning
Cảnh báo màu vàng. Cho biết cần thận trọng với hành động này
Hãy thử
Cảnh báo
.align-baseline
Phần tử được căn chỉnh với đường cơ sở của phần tử gốc. Đây là mặc định
Hãy thử
Tiện ích
.align-bottom
Phần tử được căn chỉnh với phần tử thấp nhất trên dòng
Hãy thử
Tiện ích
.align-middle
Phần tử được đặt ở giữa phần tử mẹ
Hãy thử
Tiện ích
.align-top
Phần tử được căn chỉnh với đầu của phần tử cao nhất trên dòng
Hãy thử
Tiện ích
.align-text-top
Phần tử được căn chỉnh với phần trên cùng của phông chữ của phần tử mẹ
Hãy thử
Tiện ích
.align-text-bottom
Phần tử được căn chỉnh với phần dưới cùng của phông chữ của phần tử mẹ
Hãy thử
Tiện ích
.align-content-around
Căn chỉnh các mục đã thu thập “xung quanh” Hãy thử
Linh hoạt
.align-content - * - xung quanh
Căn chỉnh các mục đã thu thập “xung quanh” trên các màn hình khác nhau
Hãy thử
Linh hoạt
.align-content-center
Căn chỉnh các mục đã tập hợp ở trung tâm
Hãy thử
Linh hoạt
.align-content - * - center
Căn chỉnh các mục đã tập hợp ở trung tâm trên các màn hình khác nhau
Hãy thử
Linh hoạt
.align-content-end
Căn chỉnh các mục đã thu thập ở cuối
Hãy thử
Linh hoạt
.align-content - * - end
Căn chỉnh các mục đã thu thập ở cuối trên các màn hình khác nhau
Hãy thử
Linh hoạt
.align-content-start
Căn chỉnh các mục đã thu thập ngay từ đầu
Hãy thử
Linh hoạt
.align-content - * - start
Căn chỉnh các mục đã thu thập ngay từ đầu trên các màn hình khác nhau
Hãy thử
Linh hoạt
.align-content-stretch
Kéo dài các mục đã thu thập
Hãy thử
Linh hoạt
.align-content - * - stretch
Kéo dài các mục đã thu thập trên các màn hình khác nhau
Hãy thử
Linh hoạt
.align-items-start
Căn chỉnh các hàng mục đơn ngay từ đầu
Hãy thử
Linh hoạt
.align-items - * - start
Căn chỉnh các hàng đơn lẻ của các mục ngay từ đầu trên các màn hình khác nhau
Hãy thử
Linh hoạt
.align-items-end
Căn chỉnh các hàng đơn lẻ ở cuối
Hãy thử
Linh hoạt
.align-items - * - end
Căn chỉnh các hàng đơn lẻ ở cuối trên các màn hình khác nhau
Hãy thử
Linh hoạt
.align-items-center
Căn chỉnh các hàng đơn lẻ ở giữa
Hãy thử
Linh hoạt
.align-items - * - center
Căn chỉnh các hàng đơn lẻ của mục ở giữa trên các màn hình khác nhau
Hãy thử
Linh hoạt
.align-items-baseline
Căn chỉnh các hàng đơn lẻ của mục ở đường cơ sở
Hãy thử
Linh hoạt
.align-items - * - baseline
Căn chỉnh các hàng đơn lẻ của mục ở đường cơ sở trên các màn hình khác nhau
Hãy thử
Linh hoạt
.align-items-Stret
Kéo dài các hàng mục đơn lẻ
Hãy thử
Linh hoạt
.align-items - * - Stretch
Kéo dài các hàng mục đơn lẻ trên các màn hình khác nhau
Hãy thử
Linh hoạt
.align-self-start
Căn chỉnh một mục linh hoạt ngay từ đầu
Hãy thử
Linh hoạt
.align-self - * - start
Căn chỉnh một mục linh hoạt ngay từ đầu trên các màn hình khác nhau
Hãy thử
Linh hoạt
.align-self-end
Căn chỉnh một mục linh hoạt ở cuối
Hãy thử
Linh hoạt
.align-self - * - end
Căn chỉnh một mục linh hoạt ở cuối trên các màn hình khác nhau
Hãy thử
Linh hoạt
.align-self-center
Căn chỉnh một mục linh hoạt ở trung tâm
Hãy thử
Linh hoạt
.align-self - * - center
Căn chỉnh một mục linh hoạt ở trung tâm trên các màn hình khác nhau
Hãy thử
Linh hoạt
.align-self-baseline
Căn chỉnh một mục linh hoạt ở đường cơ sở
Hãy thử
Linh hoạt
.align-self - * - baseline
Căn chỉnh một mục linh hoạt ở đường cơ sở trên các màn hình khác nhau
Hãy thử
Linh hoạt
.align-self-Stretch
Kéo căng một mặt hàng linh hoạt
Hãy thử
Linh hoạt
.align-self - * - Stretch
Kéo căng một mục linh hoạt trên các màn hình khác nhau Hãy thử
Linh hoạt
.badge
Tạo huy hiệu hình tròn (hình tròn màu xám – thường được sử dụng làm chỉ số)

Hãy thử
Huy hiệu
.badge-risk
Huy hiệu màu đỏ. Cho biết một hành động nguy hiểm hoặc có khả năng tiêu cực
Hãy thử
Huy hiệu
.badge-dark
Huy hiệu tối. Hộp cảnh báo màu xám đậm
Hãy thử
Huy hiệu
.badge-info
Huy hiệu màu mòng két. Cho biết một hành động hoặc thay đổi mang tính thông tin trung tính
Hãy thử
Huy hiệu
.badge-light
Huy hiệu ánh sáng. Hộp cảnh báo màu xám nhạt
Hãy thử
Huy hiệu
.badge-tablet
Làm cho huy hiệu tròn hơn

Hãy thử
Huy hiệu
.badge-primary
Huy hiệu màu xanh lam. Cho biết một hành động quan trọng
Hãy thử
Huy hiệu
.badge-Secondary
Huy hiệu màu xám. Cho biết một hành động “ít quan trọng hơn”
Hãy thử
Huy hiệu
.badge-success
Huy hiệu màu xanh lá cây. Cho biết một hành động thành công hoặc tích cực
Hãy thử
Huy hiệu
.badge-warning
Huy hiệu màu vàng. Cho biết cần thận trọng với hành động này
Hãy thử
Huy hiệu
.bg-risk
Thêm màu nền đỏ vào một phần tử. Thể hiện sự nguy hiểm hoặc một hành động tiêu cực

Hãy thử
Màu sắc
.bg-dark
Thêm màu nền xám đậm vào một phần tử

Hãy thử
Màu sắc
.bg-info
Thêm màu nền mòng két vào một phần tử. Trình bày một số thông tin

Hãy thử
Màu sắc
.bg-light
Thêm màu nền xám nhạt vào một phần tử

Hãy thử
Màu sắc
.bg-primary
Thêm màu nền xanh lam vào một phần tử. Đại diện cho một cái gì đó quan trọng

Hãy thử
Màu sắc
.bg-Secondary
Thêm màu nền xám vào một phần tử. Cho biết một hành động “ít quan trọng hơn”

Hãy thử
Màu sắc
.bg-success
Thêm màu nền xanh lục vào một phần tử. Cho biết thành công hoặc một hành động tích cực

Hãy thử
Màu sắc
.bg-warning
Thêm màu nền vàng / cam vào một phần tử. Đại diện cho một cảnh báo hoặc một hành động tiêu cực

Hãy thử
Màu sắc
.blockquote
Kiểu được trích dẫn các khối nội dung từ một nguồn khác (thêm kích thước phông chữ lớn hơn (1,25rem))

Hãy thử
Kiểu chữ
.blockquote-footer
Tạo kiểu cho tiêu đề nguồn bên trong blockquote (văn bản màu xám nhạt có thụt lề)

Hãy thử
Kiểu chữ
.border
Thêm đường viền vào một phần tử

Hãy thử
Tiện ích
.border-bottom-0
Xóa đường viền dưới cùng khỏi một phần tử

Hãy thử
Tiện ích
.border-risk
Thêm đường viền màu đỏ vào một phần tử (biểu thị sự nguy hiểm)

Hãy thử
Tiện ích
.border-dark
Thêm đường viền tối vào một phần tử

Hãy thử
Tiện ích
.border-info
Thêm đường viền màu xanh mòng két vào một phần tử (cho biết thông tin)

Hãy thử
Tiện ích
.border-left-0
Loại bỏ đường viền bên trái khỏi một phần tử

Hãy thử
Tiện ích .border-light
Thêm đường viền màu xám nhạt vào một phần tử

Hãy thử
Tiện ích
.border-primary
Thêm đường viền màu xanh lam vào một phần tử

Hãy thử
Tiện ích
.border-right-0
Loại bỏ đường viền bên phải khỏi một phần tử

Hãy thử
Tiện ích
.border-top-0
Loại bỏ đường viền trên cùng khỏi một phần tử

Hãy thử
Tiện ích
.border-Secondary
Thêm đường viền màu xám vào một phần tử

Hãy thử
Tiện ích
.border-success
Thêm đường viền màu xanh lục vào một phần tử (biểu thị thành công)

Hãy thử
Tiện ích
.border-warning
Thêm đường viền màu cam vào một phần tử (biểu thị cảnh báo)

Hãy thử
Tiện ích
.border-white
Thêm đường viền trắng vào một phần tử

Hãy thử
Tiện ích
.border-0
Loại bỏ tất cả các đường viền khỏi một phần tử

Hãy thử
Tiện ích
.breadcrumb
Một sự phân trang. Cho biết vị trí của trang hiện tại trong một hệ thống phân cấp điều hướng

Hãy thử
Phân trang
.breadcrumb-item
Kiểu liệt kê các mục hoặc liên kết bên trong breadcrumb

Hãy thử
Phân trang
.btn
Tạo một nút cơ bản (nền xám và các góc tròn)

Hãy thử
Các nút
.btn-block
Tạo nút cấp khối kéo dài toàn bộ chiều rộng của phần tử mẹ

Hãy thử
Các nút
.btn-dark
Nút màu xám đậm

Hãy thử
Các nút
.btn-risk
Nút màu đỏ. Biểu thị nguy hiểm hoặc một hành động tiêu cực

Hãy thử
Các nút
.btn-group
Nhóm các nút lại với nhau trên một dòng

Hãy thử
Nhóm nút
.btn-group-lg
Nhóm nút lớn (làm cho tất cả các nút trong nhóm nút lớn hơn – kích thước phông chữ và phần đệm tăng lên)

Hãy thử
Nhóm nút
.btn-group-sm
Nhóm nút nhỏ (làm cho tất cả các nút trong một nhóm nút nhỏ hơn)

Hãy thử
Nhóm nút
.btn-group-vertical
Làm cho một nhóm nút xuất hiện xếp chồng lên nhau theo chiều dọc

Hãy thử
Nhóm nút
.btn-info
Nút màu xanh lam. Trình bày một hành động hoặc thay đổi mang tính thông tin trung tính

Hãy thử
Các nút
.btn-light
Nút màu xám nhạt

Hãy thử
Các nút
.btn-link
Làm cho một nút trông giống như một liên kết (nhận hành vi của nút)

Hãy thử
Các nút
.btn-lg
Nút lớn

Hãy thử
Các nút
.btn-outline-dark
Nút có viền / viền màu xám đậm

Hãy thử
Các nút
.btn-outline-risk
Nút có viền / viền màu đỏ. Biểu thị nguy hiểm hoặc một hành động tiêu cực

Hãy thử
Các nút
.btn-outline-info
Nút có viền / viền màu xanh lam. Trình bày một hành động hoặc thay đổi mang tính thông tin trung tính

Hãy thử
Các nút
.btn-outline-light
Nút có viền / viền màu xám nhạt

Hãy thử
Các nút .btn-outline-Secondary
Nút có viền / viền màu xám. Cho biết một hành động “ít quan trọng hơn”

Hãy thử
Các nút
.btn-outline-success
Nút có viền / đường viền màu xanh lá cây. Cho biết thành công hoặc một hành động tích cực

Hãy thử
Các nút
.btn-outline-warning
Nút có viền / viền màu cam. Đại diện cho cảnh báo hoặc một hành động tiêu cực

Hãy thử
Các nút
.btn-primary
Nút màu xanh lam. Cho biết một cái gì đó quan trọng

Hãy thử
Các nút
.btn-sm
Nút nhỏ

Hãy thử
Các nút
.btn-Secondary
Nút màu xám. Cho biết một hành động “ít quan trọng hơn”

Hãy thử
Các nút
.btn-thành công
Nút màu xanh lá cây. Cho biết thành công hoặc một hành động tích cực

Hãy thử
Các nút
.btn-toolbar
Kết hợp các nhóm nút thành thanh công cụ nút cho các thành phần phức tạp hơn

Hãy thử
Nhóm nút
.btn-warning
Nút màu cam. Đại diện cho cảnh báo hoặc một hành động tiêu cực

Hãy thử
Các nút
.card
Tạo thẻ

Hãy thử
Thẻ
.card-body
Vùng chứa nội dung thẻ

Hãy thử
Thẻ
.card-cột
Bộ chứa để tạo một lưới thẻ giống như khối xây

Xem Thêm  Bài 6: Thuật toán loang trên ma trận - thuat toan de quy

Hãy thử
Thẻ
.card-risk
Thêm màu nền đỏ vào thẻ. Thể hiện sự nguy hiểm hoặc một hành động tiêu cực

Hãy thử
Thẻ
.card-dark
Thêm màu nền xám vào thẻ

Hãy thử
Thẻ
.card-deck
Vùng chứa để tạo một lưới các thẻ có chiều cao và chiều rộng bằng nhau

Hãy thử
Thẻ
.card-footer
Chân thẻ

Hãy thử
Thẻ
.card-group
Vùng chứa để tạo một lưới thẻ có chiều cao và chiều rộng bằng nhau, không có lề bên
Hãy thử
Thẻ
.card-header
Tiêu đề thẻ

Hãy thử
Thẻ
.card-header-tabs
Tạo kiểu các tab điều hướng bên trong tiêu đề thẻ

Hãy thử
Thẻ
.card-header-Drugs
Thuốc điều hướng kiểu bên trong tiêu đề thẻ

Hãy thử
Thẻ
.card-img-bottom
Đặt hình ảnh ở dưới cùng bên trong thẻ

Hãy thử
Thẻ
.card-img-overlay
Chuyển một hình ảnh thành một nền thẻ. Thường được sử dụng để thêm văn bản trên đầu hình ảnh

Hãy thử
Thẻ
.card-img-top
Đặt hình ảnh ở trên cùng bên trong thẻ

Hãy thử
Thẻ
.card-info
Thêm màu nền xanh mòng két vào thẻ. Trình bày một số thông tin

Hãy thử
Thẻ
.card-light
Thêm màu nền xám nhạt vào thẻ

Hãy thử
Thẻ
.card-link
Thêm màu xanh lam vào bất kỳ liên kết nào và hiệu ứng di chuột bên trong thẻ

Hãy thử
Thẻ
.card-primary
Thêm màu nền xanh lam vào thẻ. Đại diện cho một cái gì đó quan trọng

Hãy thử
Thẻ
.card-phụ
Thêm màu nền xám vào thẻ. Trình bày điều gì đó “ít” quan trọng hơn

Hãy thử
Thẻ
.card-subtitle
.card-subtitle được sử dụng sau .card-title và thêm phần sau vào phần tử: margin-top: -.375rem; margin-bottom: 0;
Hãy thử
Thẻ
.card-thành công
Thêm màu nền xanh lục vào thẻ. Cho biết thành công hoặc một hành động tích cực

Hãy thử
Thẻ
.card-text
Được sử dụng để xóa các lề dưới cùng cho phần tử p nếu nó là phần tử con cuối cùng (hoặc phần tử duy nhất), bên trong .card-body
Hãy thử
Thẻ
.card-title
Thêm tiêu đề vào bất kỳ thành phần tiêu đề nào bên trong thẻ

Hãy thử
Thẻ
.card-warning
Thêm màu nền vàng / cam vào thẻ. Đại diện cho một cảnh báo hoặc một hành động tiêu cực

Hãy thử
Thẻ
.carousel
Tạo băng chuyền (trình chiếu)

Hãy thử
Băng chuyền
.carousel-caption
Tạo văn bản phụ đề cho mỗi trang trình bày trong băng chuyền

Hãy thử
Băng chuyền
.carousel-control-next
Vùng chứa cho liên kết băng chuyền / mục “tiếp theo”

Hãy thử
Băng chuyền
.carousel-control-next-icon
Được sử dụng cùng với .carousel-control-next để tạo biểu tượng / nút “tiếp theo” (mũi tên trỏ phải)

Hãy thử
Băng chuyền
.carousel-control-prev
Vùng chứa cho liên kết băng chuyền / mục “trước đó”

Hãy thử
Băng chuyền
.carousel-control-prev-icon
Được sử dụng cùng với .carousel-control-prev để tạo biểu tượng / nút “trước đó” (mũi tên trỏ trái)

Hãy thử
Băng chuyền
.carousel-indicator
Thêm các dấu chấm / chỉ báo nhỏ ở cuối mỗi trang trình bày (cho biết có bao nhiêu trang trình bày trong băng chuyền và trang trình bày mà người dùng hiện đang xem)

Hãy thử
Băng chuyền
.carousel-inner
Hộp chứa cho các mục slide

Hãy thử
Băng chuyền
.carousel-item
Chỉ định nội dung của từng trang chiếu

Hãy thử
Băng chuyền
.clearfix
Xóa nổi

Hãy thử
Tiện ích
.close
Tạo kiểu cho một biểu tượng đóng. Điều này thường được sử dụng cho các cảnh báo và phương thức. Thường được sử dụng cùng với & amp; lần; biểu tượng để tạo biểu tượng thực tế (chữ “x” trông đẹp hơn). Nó nổi ngay theo mặc định

Hãy thử
Tiện ích
.col-auto
Tự động đặt kích thước các cột biểu mẫu dựa trên nội dung của chúng

Hãy thử
Biểu mẫu
.col- *
Tạo bố cục cột cho các thiết bị nhỏ hơn ( và tối đa / tất cả các thiết bị , nếu không được kết hợp với các lớp cột khác). * có thể là một số từ 1 đến 12

Hãy thử
Hệ thống lưới
.col-sm- *
Tạo bố cục cột cho các thiết bị nhỏ ( trở lên , nếu không được kết hợp với các lớp cột khác). * có thể là một số từ 1 đến 12

Hãy thử
Hệ thống lưới
.col-md- *
Tạo bố cục cột cho các thiết bị trung bình ( trở lên , nếu không được kết hợp với các lớp cột khác). * có thể là một số từ 1 đến 12

Hãy thử
Hệ thống lưới
.col-lg- *
Tạo bố cục cột cho các thiết bị lớn ( trở lên , nếu không được kết hợp với các lớp cột khác). * có thể là một số từ 1 đến 12

Hãy thử
Hệ thống lưới
.col-xl- *
Tạo bố cục cột cho các thiết bị cực lớn. * có thể là một số từ 1 đến 12

Hãy thử
Hệ thống lưới
.collapse
Cho biết nội dung có thể thu gọn – có thể được ẩn hoặc hiển thị theo yêu cầu

Hãy thử
Thu gọn
.collapse hiển thị
Hiển thị nội dung có thể thu gọn theo mặc định

Hãy thử
Thu gọn
.container
Vùng chứa chiều rộng cố định với chiều rộng được xác định bởi các trang web trên màn hình. Lề bằng nhau bên trái và bên phải.

Hãy thử
Vùng chứa
.container-chất lỏng
Một vùng chứa kéo dài toàn bộ chiều rộng của màn hình

Hãy thử
Vùng chứa
.container- *
Vùng chứa đáp ứng

Hãy thử
Vùng chứa
.custom-checkbox
Một trình bao bọc / vùng chứa cho các hộp kiểm tùy chỉnh

Hãy thử
Biểu mẫu tùy chỉnh
.custom-control
Một trình bao bọc / vùng chứa cho các biểu mẫu tùy chỉnh

Hãy thử
Biểu mẫu tùy chỉnh
.custom-control-input
Kiểm soát biểu mẫu tùy chỉnh

Hãy thử
Biểu mẫu tùy chỉnh
.custom-control-inline
Điều khiển biểu mẫu tùy chỉnh nội tuyến (theo chiều ngang – cạnh nhau)

Hãy thử
Biểu mẫu tùy chỉnh
.custom-control-label
Nhãn tùy chỉnh, khi được sử dụng cùng với điều khiển biểu mẫu tùy chỉnh

Hãy thử
Biểu mẫu tùy chỉnh
.custom-file
Tải lên tệp tùy chỉnh

Hãy thử
Biểu mẫu tùy chỉnh
.custom-file-input
Tải lên tệp tùy chỉnh

Hãy thử
Biểu mẫu tùy chỉnh
.custom-file-label
Nhãn tệp tùy chỉnh

Hãy thử
Biểu mẫu tùy chỉnh
.custom-radio
Một trình bao bọc / vùng chứa cho các nút radio tùy chỉnh

Hãy thử
Biểu mẫu tùy chỉnh
.custom-range
Kiểm soát phạm vi tùy chỉnh

Hãy thử
Biểu mẫu tùy chỉnh
.custom-select
Menu lựa chọn tùy chỉnh

Hãy thử
Biểu mẫu tùy chỉnh
.custom-select-lg
Menu lựa chọn tùy chỉnh lớn

Hãy thử
Biểu mẫu tùy chỉnh
.custom-select-sm
Menu chọn tùy chỉnh nhỏ

Hãy thử
Biểu mẫu tùy chỉnh
.custom-switch
Công tắc chuyển đổi tùy chỉnh

Hãy thử
Biểu mẫu tùy chỉnh
.disabled
Tắt nút (thêm độ mờ và biểu tượng “biển báo cấm đỗ xe” khi di chuột)

Hãy thử
Các nút
.disabled
Tắt mục thả xuống (thêm màu văn bản xám và biểu tượng “biển báo cấm đỗ xe” khi di chuột)

Hãy thử
Trình đơn thả xuống
.disabled
Tắt liên kết phân trang (không thể nhấp vào – thêm màu văn bản xám và biểu tượng “biển báo cấm đỗ” khi di chuột)

Hãy thử
Phân trang
.disabled
Tắt mục danh sách trong nhóm danh sách (không thể nhấp vào – thêm màu xám nhạt và xóa hiệu ứng di chuột trên các liên kết mục danh sách)

Hãy thử Nhóm danh sách
.dropdown
Tạo menu có thể chuyển đổi cho phép người dùng chọn một giá trị từ danh sách được xác định trước

Hãy thử
Trình đơn thả xuống
.dropdown-divider
Được sử dụng để phân tách các liên kết trong menu thả xuống bằng một đường viền ngang mỏng

Hãy thử
Trình đơn thả xuống
.dropdown-header
Được sử dụng để thêm tiêu đề bên trong menu thả xuống

Hãy thử
Trình đơn thả xuống
.dropdown-item
Tạo một mục thả xuống (được thêm vào các liên kết hoặc nút bên trong .dropdown-menu)

Hãy thử
Trình đơn thả xuống
.dropdown-item-text
Được sử dụng để thêm văn bản thuần túy vào một mục thả xuống hoặc được sử dụng trên các liên kết để tạo kiểu liên kết mặc định

Hãy thử
Trình đơn thả xuống
.dropdown-menu
Thêm các kiểu mặc định cho vùng chứa menu thả xuống
Hãy thử
Trình đơn thả xuống
.dropdown-menu-right
Căn phải menu thả xuống
Hãy thử
Trình đơn thả xuống
.dropdown-toggle
Được sử dụng trên nút ẩn và hiển thị (chuyển đổi) menu thả xuống

Hãy thử
Trình đơn thả xuống
.dropleft
Căn trái menu thả xuống

Hãy thử
Trình đơn thả xuống
.dropright
Căn phải menu thả xuống

Hãy thử
Trình đơn thả xuống
.dropup
Cho biết menu thả xuống (hướng lên thay vì hướng xuống)

Hãy thử
Trình đơn thả xuống
.d-block
Tạo phần tử khối (thêm display: block )

Hãy thử
Tiện ích
.d - * - block
Tạo phần tử khối trên một chiều rộng màn hình cụ thể

Hãy thử
Tiện ích
.d-inline
Tạo một phần tử nội dòng
Hãy thử
Tiện ích
.d - * - inline
Tạo một phần tử nội tuyến trên một kích thước màn hình cụ thể
Hãy thử
Tiện ích
.d-inline-block
Tạo một khối nội tuyến phần tử
Hãy thử
Tiện ích
.d - * - inline-block
Tạo một khối nội tuyến phần tử trên một kích thước màn hình cụ thể
Hãy thử
Tiện ích
.d-flex
Tạo một hộp đựng đồ linh hoạt và biến trẻ em trực tiếp thành đồ dùng linh hoạt

Hãy thử
Linh hoạt
.d - * - flex
Tạo vùng chứa flexbox trên một kích thước màn hình cụ thể

Hãy thử
Linh hoạt
.d-inline-flex
Tạo một vùng chứa flexbox nội tuyến

Hãy thử
Linh hoạt
.d - * - inline-flex
Tạo một vùng chứa flexbox nội tuyến trên một kích thước màn hình cụ thể

Hãy thử
Linh hoạt
.d-none
Ẩn một phần tử
Hãy thử
Tiện ích
.d - * - none
Ẩn một phần tử trên một kích thước màn hình cụ thể
Hãy thử
Tiện ích
.d-table
Làm cho một phần tử hiển thị dưới dạng một bảng
Hãy thử
Tiện ích
.d - * - bảng
Làm cho một phần tử hiển thị dưới dạng một bảng trên một kích thước màn hình cụ thể
Hãy thử
Tiện ích
.d-table-cell
Làm cho một phần tử hiển thị dưới dạng một ô bảng
Hãy thử
Tiện ích
.d - * - table-cell
Làm cho một phần tử hiển thị dưới dạng một ô bảng trên một kích thước màn hình cụ thể
Hãy thử
Tiện ích
.d-table-row
Làm cho một phần tử hiển thị dưới dạng một hàng trong bảng
Hãy thử
Tiện ích
.d - * - table-row
Làm cho một phần tử hiển thị dưới dạng một hàng trong bảng trên một kích thước màn hình cụ thể
Hãy thử
Tiện ích
.embed-responsive
Vùng chứa cho nội dung được nhúng. Làm cho video hoặc trình chiếu mở rộng quy mô phù hợp trên mọi thiết bị

Hãy thử
Hình ảnh
.embed-responsive-16by9
Vùng chứa cho nội dung được nhúng. Tạo nội dung được nhúng theo tỷ lệ khung hình 16: 9

Hãy thử
Hình ảnh
.embed-responsive-3by4
Vùng chứa cho nội dung được nhúng. Tạo nội dung được nhúng theo tỷ lệ khung hình 3: 4

Hãy thử
Hình ảnh
.embed-responsive-item
Được sử dụng bên trong .embed-responsive . Chia tỷ lệ video phù hợp với yếu tố chính

Hãy thử
Hình ảnh
.fade
Thêm hiệu ứng mờ dần khi đóng hộp cảnh báo

Hãy thử
Cảnh báo
.fade
Thêm hiệu ứng mờ dần khi hiển thị nội dung tab / viên thuốc

Hãy thử
Điều hướng
.fade
Thêm hiệu ứng mờ dần khi mở một phương thức

Hãy thử
Phương thức
.fixed-bottom
Đặt một phần tử ở cuối màn hình (dính / cố định)

Hãy thử
Tiện ích
.fixed-top
Đặt một phần tử ở đầu màn hình (dính / cố định)

Hãy thử
Tiện ích
.flex-column
Hiển thị các mục linh hoạt theo chiều dọc

Hãy thử
Linh hoạt
.flex - * - cột
Hiển thị các mục linh hoạt theo chiều dọc trên các kích thước màn hình khác nhau:

Hãy thử
Linh hoạt
.flex-column-reverse
Hiển thị các mục linh hoạt theo chiều dọc, đảo ngược

Hãy thử
Linh hoạt
.flex - * - ngược cột
Hiển thị các mục uốn cong theo chiều dọc, đảo ngược, trên các kích thước màn hình khác nhau

Hãy thử
Linh hoạt
.flex-fill
Được sử dụng trên các mục linh hoạt để buộc nó / chúng thành các cột có chiều rộng bằng nhau

Hãy thử
Linh hoạt
.flex - * - điền vào
Buộc uốn các mục thành các chiều rộng bằng nhau trên các màn hình khác nhau

Hãy thử
Linh hoạt
.flex-grow-0 | 1
Được sử dụng trên một mục linh hoạt duy nhất để chiếm phần còn lại của không gian có sẵn

Hãy thử
Linh hoạt
.flex-nowrap
Không bọc các vật phẩm linh hoạt

Hãy thử
Linh hoạt
.flex - * - nowrap
Không bọc các mục trên các màn hình khác nhau

Hãy thử
Linh hoạt
.flex-co-0 | 1
Được sử dụng trên một vật phẩm uốn cong duy nhất để thu nhỏ nó nếu cần thiết

Xem Thêm  Chức năng gọi điện - cách gọi các hàm

Linh hoạt
.flex-row
Hiển thị các mục linh hoạt theo chiều ngang (cạnh nhau)

Hãy thử
Linh hoạt
.flex - * - hàng
Hiển thị các mục linh hoạt theo chiều ngang trên một kích thước màn hình cụ thể

Hãy thử
Linh hoạt
.flex-row-reverse
Hiển thị các mục linh hoạt căn phải và theo chiều ngang

Hãy thử
Linh hoạt
.flex - * - ngược hàng
Hiển thị các mục linh hoạt được căn phải và theo chiều ngang trên một kích thước màn hình cụ thể

Hãy thử
Linh hoạt
.flex-wrap
Bọc các mặt hàng linh hoạt

Hãy thử
Linh hoạt
.flex - * - wrap
Gói các mục trên các màn hình khác nhau Hãy thử
Linh hoạt
.flex-wrap-reverse
Bọc các mặt hàng linh hoạt, theo thứ tự đảo ngược

Hãy thử
Linh hoạt
.flex - * - quấn ngược
Bọc các mục linh hoạt, theo thứ tự đảo ngược trên các màn hình khác nhau

Hãy thử
Linh hoạt
.float-left
Làm nổi một phần tử ở bên trái

Hãy thử
Tiện ích
.float - * - left
Làm nổi một phần tử ở bên trái trên các màn hình khác nhau

Hãy thử
Tiện ích
.float-none
Xóa phao khỏi một phần tử

Hãy thử
Tiện ích
.float-right
Làm nổi một phần tử sang bên phải

Hãy thử
Tiện ích
.float - * - right
Làm nổi một phần tử ở bên trái trên các màn hình khác nhau

Hãy thử
Tiện ích
.font-italic
chữ

Hãy thử
Kiểu chữ
.font-weight-bold

Chữ in đậm

Hãy thử
Kiểu chữ
.font-weight-bolder
Văn bản đậm hơn (font-weight: bolder)

Hãy thử
Kiểu chữ
.font-weight-light

Văn bản có độ dày nhẹ (font-weight: 300)

Hãy thử
Kiểu chữ
.font-weight-light

Chữ có trọng lượng nhẹ hơn (font-weight: light)

Hãy thử
Kiểu chữ
.font-weight-normal
Văn bản bình thường (font-weight: 400)

Hãy thử
Kiểu chữ
.form-check
Vùng chứa cho các hộp kiểm. Thêm đệm thích hợp

Hãy thử
Biểu mẫu
.form-check-inline
Làm cho các hộp kiểm xuất hiện trên cùng một dòng (theo chiều ngang)

Hãy thử
Biểu mẫu
.form-check-input
Hộp kiểm tạo kiểu với lề thích hợp

Hãy thử
Biểu mẫu
.form-check-label
Đảm bảo lề thích hợp cho các nhãn được sử dụng cùng với các hộp kiểm

Hãy thử
Biểu mẫu
.form-control
Được sử dụng trên các phần tử đầu vào, vùng văn bản và chọn để kéo dài toàn bộ chiều rộng của trang và làm cho chúng phản hồi

Hãy thử
Biểu mẫu
.form-control-file
Thêm display: block width: 100% vào đầu vào được gửi bằng type = “tệp”

Hãy thử
Biểu mẫu
.form-control-lg
Kiểm soát hình thức lớn

Hãy thử
Biểu mẫu
.form-control-plaintext
Tạo kiểu điều khiển biểu mẫu dưới dạng văn bản thuần túy

Hãy thử
Biểu mẫu
.form-control-range
Thêm display: block width: 100% vào đầu vào được gửi bằng type = “range”

Hãy thử
Biểu mẫu
.form-control-sm
Kiểm soát hình thức nhỏ

Hãy thử
Biểu mẫu
.form-group
Vùng chứa để nhập biểu mẫu và nhãn

Hãy thử
Biểu mẫu
.form-inline
Tạo & lt; biểu mẫu & gt; căn trái với các điều khiển khối nội tuyến (Chỉ điều này
áp dụng cho các biểu mẫu trong cửa sổ xem có chiều rộng ít nhất là 768px)
Hãy thử
Biểu mẫu
.form-row
Vùng chứa cho các cột đáp ứng (ít lề trái và phải hơn . Row / ghi đè các rãnh cột mặc định)

Hãy thử
Biểu mẫu
.h1 - .h6
Làm cho một phần tử trông giống như một tiêu đề của lớp đã chọn (h1-h6)

Hãy thử
Kiểu chữ
.h-25
Đặt chiều cao của một phần tử thành 25%

Hãy thử
Tiện ích
.h-50
Đặt chiều cao của một phần tử thành 50%

Hãy thử
Tiện ích
.h-75
Đặt chiều cao của một phần tử thành 75%

Hãy thử
Tiện ích
.h-100
Đặt chiều cao của một phần tử thành 100%

Hãy thử
Tiện ích
.img-chất lỏng
Hình ảnh đáp ứng (thêm chiều rộng tối đa: 100% và chiều cao: tự động)

Hãy thử
Hình ảnh
.img-thumbnail
Định dạng hình ảnh thành hình thu nhỏ (viền mỏng màu xám nhạt)

Hãy thử
Hình ảnh
.initialism
Hiển thị văn bản bên trong phần tử & lt; abbr & gt; ở kích thước phông chữ nhỏ hơn một chút

Hãy thử
Kiểu chữ
.input-group
Vùng chứa để nâng cao đầu vào bằng cách thêm biểu tượng, văn bản hoặc nút ở phía trước hoặc phía sau trường nhập dưới dạng “văn bản trợ giúp”

Hãy thử
Nhóm đầu vào
.input-group-append
Vùng chứa nhóm đầu vào để thêm văn bản trợ giúp phía sau trường nhập liệu

Hãy thử
Nhóm đầu vào
.input-group-lg
Nhóm đầu vào lớn

Hãy thử
Nhóm đầu vào
.input-group-prepend
Vùng chứa nhóm đầu vào để thêm văn bản trợ giúp vào trước trường nhập liệu

Hãy thử
Nhóm đầu vào
.input-group-sm
Nhóm đầu vào nhỏ

Hãy thử
Nhóm đầu vào
.input-group-text
Tạo kiểu cho văn bản trợ giúp được chỉ định trong một nhóm đầu vào

Hãy thử
Nhóm đầu vào
.input-lg
Trường đầu vào lớn

Hãy thử
Kích thước đầu vào
.input-sm
Trường đầu vào nhỏ

Hãy thử
Kích thước đầu vào
.invalid-feedback
Tạo thông báo xác thực tùy chỉnh được sử dụng trong các biểu mẫu đã xác thực (màu văn bản đỏ)

Hãy thử
Biểu mẫu
.invalid-tooltip
Tạo thông báo xác thực tùy chỉnh được sử dụng trong các biểu mẫu đã xác thực (chú giải công cụ màu đỏ)

Hãy thử
Biểu mẫu
.invisible
Làm cho một phần tử ẩn

Hãy thử
Tiện ích
.is-không hợp lệ
Xác thực một phần tử biểu mẫu (thêm đường viền màu đỏ vào các trường đầu vào). Lưu ý: đối với phía máy chủ

Hãy thử
Biểu mẫu
.is-valid
Xác thực một phần tử biểu mẫu (thêm đường viền màu xanh lá cây vào các trường đầu vào). Lưu ý: đối với phía máy chủ

Hãy thử
Biểu mẫu
.jumbotron
Tạo tiêu đề / hộp có đệm màu xám với các góc tròn giúp phóng to kích thước phông chữ của văn bản bên trong nó. Được sử dụng để kêu gọi sự chú ý nhiều hơn đến một số nội dung hoặc thông tin đặc biệt

Hãy thử
Jumbotron
.jumbotron-liquid
Tạo jumbotron có chiều rộng đầy đủ (tiêu đề có đệm màu xám) không có đường viền tròn

Hãy thử
Jumbotron
.justify-content- *
Căn chỉnh linh hoạt các mục từ đầu đến cuối ,
ở giữa , ở giữa và “ xung quanh

Hãy thử
Linh hoạt .justify-content - * - xung quanh
Căn chỉnh linh hoạt các mục “xung quanh” trên các kích thước màn hình khác nhau

Hãy thử
Linh hoạt
.justify-content - * - between
Căn chỉnh linh hoạt các mục ở “giữa” trên các kích thước màn hình khác nhau

Hãy thử
Linh hoạt
.justify-content - * - center
Căn chỉnh linh hoạt các mục ở trung tâm trên các kích thước màn hình khác nhau

Hãy thử
Linh hoạt
.justify-content - * - end
Căn chỉnh linh hoạt các mục ở cuối trên các kích thước màn hình khác nhau

Hãy thử
Linh hoạt
.justify-content - * - start
Căn chỉnh linh hoạt các mục ngay từ đầu trên các kích thước màn hình khác nhau

Hãy thử
Linh hoạt
.lead
Tăng kích thước phông chữ và chiều cao dòng của đoạn văn

Hãy thử
Kiểu chữ
.list-group
Tạo nhóm danh sách có viền cho các phần tử & lt; li & gt;

Hãy thử
Nhóm danh sách
.list-group-flush
Loại bỏ một số đường viền và góc tròn khỏi các mục danh sách trong một nhóm danh sách

Hãy thử
Nhóm danh sách
.list-group-ngang
Hiển thị các mục trong danh sách theo chiều ngang thay vì chiều dọc (cạnh nhau thay vì chồng lên nhau)

Hãy thử
Nhóm danh sách
.list-group-ngang- *
Hiển thị các mục trong danh sách theo chiều ngang thay vì chiều dọc trên các kích thước màn hình khác nhau

Hãy thử
Nhóm danh sách
.list-group-item
Đã thêm vào từng phần tử & lt; li & gt; trong nhóm danh sách

Hãy thử
Nhóm danh sách
.list-group-item-action
Đã thêm vào các liên kết bên trong nhóm danh sách để làm cho chúng nổi bật khi di chuột (nền tối hơn)

Hãy thử
Nhóm danh sách
.list-group-item-risk
Màu nền đỏ cho một mục danh sách trong một nhóm danh sách

Hãy thử
Nhóm danh sách
.list-group-item-dark
Màu nền xám đậm cho một mục danh sách trong một nhóm danh sách

Hãy thử
Nhóm danh sách
.list-group-item-info
Màu nền xanh lam nhạt cho một mục danh sách trong một nhóm danh sách

Hãy thử
Nhóm danh sách
.list-group-item-light
Màu nền xám nhạt cho một mục danh sách trong một nhóm danh sách

Hãy thử
Nhóm danh sách
.list-group-item-primary
Màu nền xanh lam cho một mục danh sách trong một nhóm danh sách

Hãy thử
Nhóm danh sách
.list-group-item-success
Màu nền xanh lục cho một mục danh sách trong một nhóm danh sách

Hãy thử
Nhóm danh sách
.list-group-item-warning
Màu nền vàng cho một mục danh sách trong một nhóm danh sách

Hãy thử
Nhóm danh sách
.list-inline
Đặt tất cả các mục trong danh sách trên một dòng duy nhất (được sử dụng cùng với
.list-inline-item trên mỗi & lt; li & gt; phần tử)

Hãy thử
Kiểu chữ
.list-inline-item
Đặt tất cả các mục trong danh sách trên một dòng duy nhất (được sử dụng cùng với
.list-inline trên trang gốc & lt; ul & gt; yếu tố)

Hãy thử
Kiểu chữ
.list-unstyled
Xóa tất cả kiểu danh sách mặc định (dấu đầu dòng, lề trái, v.v.) khỏi
Danh sách & lt; ul & gt;
hoặc & lt; ol & gt;

Hãy thử
Kiểu chữ
.mark
Văn bản được đánh dấu:

Văn bản được đánh dấu

Hãy thử
Kiểu chữ
.media
Căn chỉnh các đối tượng phương tiện cùng với nội dung (như hình ảnh hoặc video – thường được sử dụng cho các nhận xét trong bài đăng trên blog, v.v.)

Hãy thử
Đối tượng phương tiện
.media-body
Vùng chứa cho nội dung phương tiện

Hãy thử
Đối tượng phương tiện
.modal
Xác định nội dung như một phương thức và tập trung vào nó

Hãy thử
Phương thức
.modal-body
Xác định kiểu cho phần thân của phương thức. Thêm bất kỳ đánh dấu HTML nào tại đây (p, img, v.v.)

Hãy thử
Phương thức
.modal-content
Tạo kiểu cho phương thức (đường viền, màu nền, v.v.). Bên trong này, hãy thêm đầu trang, nội dung và chân trang của phương thức, nếu cần

Hãy thử
Phương thức
.modal-hộp thoại tập trung vào
Căn giữa phương thức theo chiều dọc và chiều ngang trong trang

Hãy thử
Phương thức
.modal-hộp thoại-cuộn được
Thêm thanh cuộn bên trong phương thức

Hãy thử
Phương thức
.modal-footer
Chân trang của phương thức (thường chứa nút hành động và nút đóng)

Hãy thử
Phương thức
.modal-header
Tiêu đề của phương thức (thường chứa tiêu đề và nút đóng)

Hãy thử
Phương thức
.modal-lg
Phương thức lớn (rộng hơn mặc định)

Hãy thử
Phương thức
.modal-sm
Phương thức nhỏ (chiều rộng ít hơn)

Hãy thử
Phương thức
.modal-xl
Phương thức cực lớn

Hãy thử
Phương thức
.m- # / m - * - #
Các lớp ký quỹ đáp ứng. * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5

Hãy thử
Tiện ích
.mt- # / mt - * - #
Các lớp ký quỹ hàng đầu đáp ứng. * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5

Hãy thử
Tiện ích
.mb- # / mb - * - #
Các lớp lề dưới đáp ứng. * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5

Hãy thử
Tiện ích
.ml- # / ml - * - #
Các lớp lề trái đáp ứng. * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5

Hãy thử
Tiện ích
.mr- # / mr - * - #
Các lớp lề phải đáp ứng. * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5

Hãy thử
Tiện ích
.mx- # / mx - * - #
Các lớp tự động lề trái và phải (ngang) đáp ứng. * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5

Hãy thử
Tiện ích
.my- # / my - * - #
Các lớp tự động (dọc) lề trên và dưới đáp ứng. * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5

Hãy thử
Tiện ích
.mx-auto
Căn giữa một phần tử theo chiều ngang

Hãy thử
Tiện ích
.nav nav-tabs
Tạo menu theo thẻ

Hãy thử
Tab
.nav nav-Drugs
Tạo menu thuốc

Hãy thử
Tab
.nav-justified
Justifies các liên kết tab / viên thuốc có chiều rộng bằng nhau

Hãy thử
Tab
.navbar
Tạo thanh điều hướng

Hãy thử
Thanh điều hướng
.navbar-nav
Vùng chứa cho các liên kết điều hướng bên trong vùng chứa .navbar

Hãy thử
Thanh điều hướng
.navbar-brand
Đã thêm vào một liên kết hoặc một phần tử tiêu đề bên trong thanh điều hướng để đại diện cho một biểu trưng hoặc một tiêu đề

Xem Thêm  Cách sử dụng và các ví dụ khác nhau của SQL MAX () - sql chọn 10 giá trị cao nhất

Hãy thử
Thanh điều hướng
.navbar-sập
Thu gọn thanh điều hướng (ẩn và được thay thế bằng biểu tượng menu / bánh hamburger trên điện thoại di động và máy tính bảng nhỏ)

Hãy thử
Thanh điều hướng
.navbar-expand- *
Lớp có thể thu gọn đáp ứng – xếp thanh điều hướng theo chiều dọc trên màn hình nhỏ (sm), trung bình (md), lớn (lg) hoặc cực lớn (xl)

Hãy thử
Thanh điều hướng
.navbar-dark
Thêm màu văn bản trắng vào tất cả các liên kết trong thanh điều hướng

Hãy thử
Thanh điều hướng
.navbar-light
Thêm màu văn bản đen vào tất cả các liên kết trong thanh điều hướng

Hãy thử
Thanh điều hướng
.navbar-text
Căn chỉnh theo chiều dọc bất kỳ phần tử nào bên trong thanh điều hướng không phải là liên kết (đảm bảo đệm thích hợp)

Hãy thử
Thanh điều hướng
.navbar-toggler
Tạo kiểu cho nút sẽ mở thanh điều hướng trên màn hình nhỏ. Tự động được tạo kiểu như một chiếc bánh hamburger / ba thanh

Hãy thử
Thanh điều hướng
.nav-link
Được sử dụng để tạo kiểu cho các liên kết / neo bên trong thanh điều hướng

Hãy thử
Thanh điều hướng
.nav-item
Được sử dụng để tạo kiểu cho các mục danh sách bên trong thanh điều hướng

Hãy thử
Thanh điều hướng
.needs-validation
Thêm các kiểu xác thực vào một biểu mẫu đã gửi

Hãy thử
Biểu mẫu
.no-gutters
Loại bỏ máng xối / không gian thừa khỏi cột

Hãy thử
Hệ thống lưới
.page-item
Kiểu liệt kê các mục bên trong phân trang

Hãy thử
Phân trang
.page-link
Các liên kết kiểu bên trong một phân trang

Hãy thử
Phân trang
.pagination
Tạo phân trang (Hữu ích khi bạn có một trang web với nhiều trang

Hãy thử
Phân trang
.pagination-lg
Phân trang lớn (mỗi liên kết phân trang có kích thước phông chữ lớn hơn và nhiều phần đệm hơn)

Hãy thử
Phân trang
.pagination-sm
Phân trang nhỏ (mỗi liên kết phân trang có kích thước phông chữ nhỏ hơn và ít đệm hơn)

Hãy thử
Phân trang
.pre-scrollable
Làm cho phần tử & lt; pre & gt; có thể cuộn được ( max-height là 350px và cung cấp thanh cuộn trục y)

Hãy thử
Người trợ giúp
.progress
Vùng chứa cho các thanh tiến trình

Hãy thử
Thanh tiến trình
.progress-bar
Tạo thanh tiến trình

Hãy thử
Thanh tiến trình
.progress-bar-animation
Hoạt ảnh thanh tiến trình (được sử dụng cùng với các đường sọc)

Hãy thử
Thanh tiến trình
.progress-bar-sọc
Thêm các sọc vào thanh tiến trình

Hãy thử
Thanh tiến trình
.p- # / p - * - #
Các lớp đệm đáp ứng. * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5

Hãy thử
Tiện ích
.pt- # / pt - * - #
Các lớp đệm hàng đầu đáp ứng. * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5

Hãy thử
Tiện ích
.pb- # / pb - * - #
Các lớp đệm dưới cùng đáp ứng. * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5

Hãy thử
Tiện ích
.pl- # / pl – * – #
Các lớp đệm bên trái đáp ứng. * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5

Hãy thử
Tiện ích
.pr- # / pr - * - #
Các lớp đệm bên phải đáp ứng. * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5

Hãy thử
Tiện ích
.py- # / py - * - #
Các lớp đệm trên và dưới đáp ứng. * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5

Hãy thử
Tiện ích
.px- # / px - * - #
Các lớp đệm trái và phải đáp ứng. * có thể là sm, md, lg hoặc xl. # có thể là một số từ 0 đến 5

Hãy thử
Tiện ích
.rounded
Thêm các góc tròn vào một phần tử

Hãy thử
Tiện ích
.rounded-bottom
Thêm các góc tròn dưới cùng vào một phần tử

Hãy thử
Tiện ích
.rounded-circle
Định hình một phần tử thành một vòng tròn (không được hỗ trợ trong IE8 trở về trước)

Hãy thử
Tiện ích
.rounded-left
Thêm các góc tròn bên trái của một phần tử

Hãy thử
Tiện ích
.rounded-right
Thêm các góc tròn bên phải vào một phần tử

Hãy thử
Tiện ích
.rounded-top
Thêm các góc tròn trên cùng vào một phần tử

Hãy thử
Tiện ích
.rounded-0
Loại bỏ các góc tròn khỏi một phần tử

Hãy thử
Tiện ích
.row
Vùng chứa cho các cột đáp ứng

Hãy thử
Hệ thống lưới
.row-cols- *
Đặt số cột sẽ xuất hiện bên cạnh nhau

Hãy thử
Hệ thống lưới
.shadow
Thêm bóng đổ vào một phần tử

Hãy thử
Tiện ích
.shadow-lg
Thêm một bóng đổ lớn vào một phần tử

Hãy thử
Tiện ích
.shadow-none
Loại bỏ bóng khỏi một phần tử

Hãy thử
Tiện ích
.shadow-sm
Thêm một bóng đổ nhỏ vào một phần tử

Hãy thử
Tiện ích
.small
Tạo văn bản phụ, nhẹ hơn trong bất kỳ tiêu đề nào

Hãy thử
Kiểu chữ
.spinner-border
Tạo một spinner / loader

Hãy thử
Con quay
.spinner-border-sm
Tạo một spinner / loader nhỏ hơn

Hãy thử
Con quay
.spinner-grow
Tạo một spinner / loader “phát triển”

Hãy thử
Con quay
.spinner-grow-sm
Tạo một spinner / loader nhỏ hơn để “phát triển”

Hãy thử
Con quay
.sr-only
Ẩn một phần tử trên tất cả các thiết bị ngoại trừ trình đọc màn hình

Hãy thử
Tiện ích
.sr-only-focusable
Ẩn một phần tử trên tất cả các thiết bị ngoại trừ trình đọc màn hình

Hãy thử
Tiện ích
.sticky-top
Làm cho một phần tử luôn cố định / cố định ở đầu trang khi bạn cuộn qua phần tử đó

Hãy thử
Tiện ích
.stretched-link
Đã thêm vào liên kết để làm cho khối chứa (cha) của nó có thể nhấp được (chỉ hoạt động đối với các phần tử mẹ có vị trí: tương đối) Hãy thử
Tiện ích
.tab-content
Được sử dụng cùng với .tab-pane để tạo các tab / viên thuốc có thể chuyển đổi / động

Hãy thử
Tab
.tab-pane
Được sử dụng cùng với .tab-content để tạo các tab / viên thuốc có thể chuyển đổi / động

Hãy thử
Tab
.table
Thêm kiểu cơ bản vào bảng (đệm, đường viền dưới cùng, v.v.)

Hãy thử
Bảng
.table-active
Thêm màu nền xám vào hàng bảng ( & lt; tr & gt; hoặc ô bảng ( & lt; td & gt; ) (cùng màu được sử dụng khi di chuột )

Hãy thử
Bảng
.table-bordered
Thêm đường viền trên tất cả các cạnh của bảng và các ô

Hãy thử
Bảng
.table-không viền
Xóa đường viền khỏi bảng

Hãy thử
Bảng
.table-cô đọng
Làm cho một chiếc bàn nhỏ gọn hơn bằng cách cắt đôi phần đệm ô

Hãy thử
Bảng
.table-dark
Thêm nền đen với văn bản trắng vào bảng

Hãy thử
Bảng
.table-hover
Tạo bảng có thể di chuột (thêm màu nền xám trên các hàng của bảng khi di chuột)

Hãy thử
Bảng
.table-responsive- *
Làm cho bảng phản hồi (thêm thanh cuộn ngang khi cần). Theo mặc định, thanh cuộn được thêm vào bảng trên màn hình có chiều rộng dưới 992px (nếu cần). Không có sự khác biệt khi xem bất kỳ thứ gì rộng hơn 992px. Tuy nhiên, bạn có thể sử dụng sm | md | lg | xl để quyết định KHI nào bảng sẽ nhận được thanh cuộn, tùy thuộc vào chiều rộng màn hình

Hãy thử
Bảng
.table-sọc
Thêm sọc ngựa vằn vào bảng

Hãy thử
Bảng
.text-break
Ngăn văn bản dài bị vỡ bố cục

Hãy thử
Kiểu chữ
.text-capitalize
Cho biết văn bản viết hoa

Hãy thử
Kiểu chữ
.text - * - center
Căn giữa văn bản trên các màn hình khác nhau

Hãy thử
Kiểu chữ
.text-risk
Màu chữ đỏ. Chỉ ra sự nguy hiểm

Hãy thử
Màu sắc
.text-dark
Màu văn bản xám đậm

Hãy thử
Kiểu chữ
.text-decoration-none
Xóa gạch chân khỏi một liên kết

Hãy thử
Kiểu chữ
.text-hide
Ẩn văn bản (giúp thay thế nội dung văn bản của phần tử bằng hình nền)

Hãy thử
Kiểu chữ
.text-info
Màu văn bản xanh lam nhạt. Cho biết thông tin

Hãy thử
Màu sắc
.text-light
Màu văn bản xám nhạt

Hãy thử
Màu sắc
.text-justify
Cho biết văn bản được căn chỉnh

Hãy thử
Kiểu chữ
.text-left
Căn chỉnh văn bản sang trái

Hãy thử
Kiểu chữ
.text - * - left
Căn trái văn bản trên các màn hình khác nhau

Hãy thử
Kiểu chữ
.text-lowercase
Thay đổi văn bản thành chữ thường

Hãy thử
Kiểu chữ
.text-muted
Màu văn bản xám

Hãy thử
Màu sắc
.text-nowrap
Ngăn văn bản không bị gói

Hãy thử
Kiểu chữ
.text-primary
Màu chữ xanh lam. Cho biết một cái gì đó quan trọng

Hãy thử
Màu sắc
.text-Secondary
Màu văn bản xám. Cho biết điều gì đó “ít” quan trọng hơn

Hãy thử
Màu sắc
.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ừ màu gốc của nó)

Hãy thử
Kiểu chữ
.text-right
Căn chỉnh văn bản sang bên phải

Hãy thử
Kiểu chữ
.text - * - right
Căn phải văn bản trên các màn hình khác nhau

Hãy thử
Kiểu chữ
.text-success
Màu văn bản xanh lục. Cho biết thành công

Hãy thử
Màu sắc
.text-in hoa
Làm cho văn bản viết hoa

Hãy thử
Kiểu chữ
.text-warning
Màu văn bản vàng / cam. Cho biết cảnh báo

Hãy thử
Màu sắc
.text-white
Màu văn bản trắng

Hãy thử
Màu sắc
.thead-dark
Thêm màu nền đen vào tiêu đề bảng

Hãy thử
Bảng
.thead-light
Thêm màu nền xám vào tiêu đề bảng

Hãy thử
Bảng
.toast
Tạo bánh mì nướng (hộp cảnh báo sẽ biến mất sau vài giây)

Hãy thử
Bánh mì nướng
.toast-body
Cơ thể bánh mì nướng

Hãy thử
Bánh mì nướng
.toast-header
Tiêu đề bánh mì nướng

Hãy thử
Bánh mì nướng
.valid-feedback
Tạo thông báo xác thực tùy chỉnh được sử dụng trong các biểu mẫu đã xác thực (màu văn bản xanh lục)

Hãy thử
Biểu mẫu
.valid-tooltip
Tạo thông báo xác thực tùy chỉnh được sử dụng trong các biểu mẫu đã xác thực (chú giải công cụ màu xanh lá cây)

Hãy thử
Biểu mẫu
.visible
Hiển thị một phần tử

Hãy thử
Tiện ích
.was-validate
Thêm các kiểu xác thực vào một phần tử biểu mẫu

Hãy thử
Biểu mẫu
.w-25
Đặt chiều rộng của một phần tử thành 25%

Hãy thử
Tiện ích
.w-50
Đặt chiều rộng của một phần tử thành 50%

Hãy thử
Tiện ích
.w-75
Đặt chiều rộng của một phần tử thành 75%

Hãy thử
Tiện ích
.w-100
Đặt chiều rộng của một phần tử thành 100%

Hãy thử
Tiện ích


Xem thêm những thông tin liên quan đến chủ đề bootstrap 4 lớp div

How to Center a Div in Bootstrap

  • Tác giả: Mostafa Elgayar
  • Ngày đăng: 2017-03-24
  • Đánh giá: 4 ⭐ ( 4763 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video, you’ll be introduced to an equation that’ll change your life.

    If you have any questions, please leave it in the comments below!
    Don’t forget to like and subscribe!

    Follow me on:
    Facebook: http://fb.com/mostafa.elgayar1
    Twitter: http://twitter.com/MostafaaGayar

    Good Luck! 🙂

Bootstrap 4: Align a Div or Form Vertically and Horizontally

  • Tác giả: azmind.com
  • Đánh giá: 5 ⭐ ( 5041 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: A tutorial with 3 examples where we take a “div” and a “form” and align them in the center, vertically and horizontally, using Bootstrap 4.

Phân trang trong Bootstrap 4

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 9642 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nếu bạn muốn có một trang web với nhiều trang, bạn có thể thêm bằng cách sử dụng phân trang trong Bootstrap 4 vào trang web đó.

Tiện ích (Utilities) trong Bootstrap 4

  • Tác giả: hoc.tv
  • Đánh giá: 4 ⭐ ( 8740 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bootstrap 4 có rất nhiều lớp tiện ích (Utilities), trợ giúp để nhanh chóng tạo kiểu cho các phần tử mà không cần sử dụng bất kỳ mã CSS nào. Trong bài học này chúng ta sẽ lần lượt nghiên cứu các lớp tiện ích trong Bootstrap 4 đó nhé các bạn.

[Bootstrap 4] Phần 6: Bảng biểu

  • Tác giả: www.dammio.com
  • Đánh giá: 4 ⭐ ( 7385 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Căn trái và căn phải trong div trong Bootstrap

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 5880 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Cập nhật 2018 … Bootstrap 4.1+ pull-right Hiện tại là float-right text-right giống như 3.x và…

Square responsive divs using Bootstrap 4

  • Tác giả: stackoverflow.com
  • Đánh giá: 4 ⭐ ( 6133 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình