Tiện ích cho bố cục
Để phát triển đáp ứng và thân thiện với thiết bị di động nhanh hơn, Bootstrap bao gồm hàng chục lớp tiện ích để hiển thị, ẩn, căn chỉnh và giãn cách nội dung.
Thay đổidisplay
Sử dụng các tiện ích hiển thị của chúng tôi để chuyển đổi các giá trị chung của display
tài sản một cách nhạy bén. Trộn nó với hệ thống lưới, nội dung hoặc các thành phần của chúng tôi để hiển thị hoặc ẩn chúng trên các chế độ xem cụ thể.
Tùy chọn Flexbox
Bootstrap được xây dựng bằng flexbox, nhưng không phải mọi phần tử display
đều được thay đổi thành display: flex
vì điều này sẽ thêm nhiều ghi đè không cần thiết và thay đổi bất ngờ các hành vi chính của trình duyệt. Hầu hết các thành phần của chúng tôi được xây dựng với kích hoạt flexbox.
Nếu bạn cần thêm display: flex
vào một phần tử, hãy làm như vậy với .d-flex
hoặc một trong các biến thể đáp ứng (ví dụ .d-sm-flex
:). Bạn sẽ cần lớp hoặc display
giá trị này để cho phép sử dụng các tiện ích flexbox bổ sung của chúng tôi để định kích thước, căn chỉnh, giãn cách và hơn thế nữa.
Ký quỹ và phần đệm
Sử dụng các tiện ích khoảng cáchmargin
và khoảng cách để kiểm soát cách các phần tử và thành phần được đặt khoảng cách và kích thước. Bootstrap bao gồm thang đo sáu cấp cho các tiện ích giãn cách, dựa trên một biến giá trị mặc định . Chọn giá trị cho tất cả các chế độ xem (ví dụ: cho trong LTR) hoặc chọn các biến thể đáp ứng để nhắm mục tiêu các chế độ xem cụ thể (ví dụ: cho —trong LTR— bắt đầu tại điểm ngắt).padding
1rem
$spacer
.me-3
margin-right: 1rem
.me-md-3
margin-right: 1rem
md
Chuyển đổivisibility
Khi display
không cần chuyển đổi, bạn có thể chuyển đổi visibility
của một phần tử bằng các tiện ích hiển thị của chúng tôi . Các yếu tố ẩn sẽ vẫn ảnh hưởng đến bố cục của trang, nhưng được ẩn trực quan khỏi khách truy cập.