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 displaytà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: flexvì đ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: flexvào một phần tử, hãy làm như vậy với .d-flexhoặ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 displaygiá 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-3margin-right: 1rem.me-md-3margin-right: 1remmd
Chuyển đổivisibility
Khi displaykhông cần chuyển đổi, bạn có thể chuyển đổi visibilitycủ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.