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.
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ể.
Bootstrap 4 được xây dựng với flexbox, nhưng không phải mọi phần tử displayđều được thay đổi display: flexvì điều này sẽ thêm nhiều ghi đè không cần thiết và thay đổi hành vi chính của trình duyệt một cách bất ngờ. 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.
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 4 bao gồm thang năm 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 ) 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ụ: để bắt đầu tại điểm ngắt).padding 1rem$spacer.mr-3margin-right: 1rem.mr-md-3margin-right: 1remmd
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.