MX Auto trong Bootstrap là gì? 2024

Xem MX Auto trong Bootstrap là gì? 2024

Tiện ích giãn cách được sử dụng để gán các giá trị lề hoặc phần đệm thân thiện với phản hồi cho một phần tử hoặc một tập hợp con các cạnh của nó bằng các lớp tốc ký. Nó bao gồm các thuộc tính riêng lẻ, tất cả các thuộc tính và thuộc tính dọc và ngang

Các lớp này được xây dựng từ bản đồ Sass mặc định, từ. 25rem đến 3rem

ký hiệu

Các tiện ích giãn cách áp dụng cho tất cả các điểm dừng, từ xs đến xl, không có chữ viết tắt điểm dừng trong đó. Đó là bởi vì những lớp đó được áp dụng từ chiều rộng tối thiểu. 0 trở lên và không bị ràng buộc bởi truy vấn phương tiện. Tuy nhiên, các điểm dừng còn lại bao gồm viết tắt điểm dừng

Các lớp được đặt tên theo định dạng {property}{sides}-{size} cho xs và {property}{sides}-{breakpoint}-{size} cho sm, md, lg và xl

Ở đây, “tài sản” là một trong những điều sau đây

• m – Nó được sử dụng cho các lớp đặt lề
• p – Nó được sử dụng cho các lớp đặt phần đệm

“bên” là một trong những điều sau đây

• t – Nó được sử dụng cho các lớp đặt lề trên hoặc đệm trên cùng
• b – Nó được sử dụng cho các lớp đặt lề dưới hoặc đệm dưới
• l – Nó được sử dụng cho các lớp đặt lề trái hoặc đệm trái
• r – Nó được sử dụng cho các lớp đặt lề phải hoặc đệm phải
• x – Nó được sử dụng cho các lớp thiết lập cả *-left và *-right
• y – Nó được sử dụng cho các lớp đặt cả *-top và *-bottom
• trống – Nó được sử dụng cho các lớp đặt lề hoặc phần đệm trên cả 4 mặt của phần tử

“kích thước” là một trong những điều sau đây

• 0 – Nó được sử dụng cho các lớp loại bỏ lề hoặc phần đệm bằng cách đặt thành 0
• 1 – (Theo mặc định) Nó được sử dụng cho các lớp đặt lề hoặc phần đệm thành $spacer-x *. 25 hoặc $spacer-y *. 25
• 2 – (theo mặc định) Nó được sử dụng cho các lớp đặt lề hoặc phần đệm thành $spacer-x *. 5 hoặc $spacer-y *. 5
• 3 – (theo mặc định) Nó được sử dụng cho các lớp đặt lề hoặc phần đệm thành $spacer-x hoặc $spacer-y
• 4 – (theo mặc định) Nó được sử dụng cho các lớp đặt lề hoặc phần đệm thành $spacer-x * 1. 5 hoặc $spacer-y * 1. 5
• 5 – (theo mặc định) Nó được sử dụng cho các lớp đặt lề hoặc phần đệm thành $spacer-x * 3 hoặc $spacer-y * 3

Ghi chú. Bạn có thể thêm nhiều kích thước hơn bằng cách thêm các mục vào biến bản đồ $spacers Sass

Ví dụ

Hãy lấy một ví dụ để xem cách sử dụng các lớp này

định tâm ngang

Bootstrap cũng hỗ trợ. lớp mx-auto để định tâm theo chiều ngang cho nội dung cấp độ khối cố định. Nội dung có hiển thị. khối và đặt chiều rộng?bằng cách đặt lề ngang thành tự động

Gán các giá trị margin hoặc padding thân thiện với phản hồi cho một phần tử hoặc một tập hợp con các cạnh của nó bằng các lớp tốc ký. Bao gồm hỗ trợ cho các thuộc tính riêng lẻ, tất cả các thuộc tính và thuộc tính dọc và ngang. Các lớp được xây dựng từ bản đồ Sass mặc định từ .25rem đến 3rem

ký hiệu

Các tiện ích giãn cách áp dụng cho tất cả các điểm dừng, từ xs đến xl, không có chữ viết tắt điểm ngắt trong đó. Điều này là do các lớp đó được áp dụng từ min-width: 0 trở lên và do đó không bị ràng buộc bởi truy vấn phương tiện. Tuy nhiên, các điểm dừng còn lại bao gồm viết tắt điểm dừng

Các lớp được đặt tên theo định dạng {property}{sides}-{size} cho xs và {property}{sides}-{breakpoint}-{size} cho padding0, padding1, padding2 và xl

Trường hợp tài sản là một trong

• padding4 – dành cho các lớp đặt margin
• padding6 – dành cho các lớp đặt padding

Trường hợp các bên là một trong những

• padding8 – dành cho các lớp thiết lập padding9 hoặc .25rem0
• .25rem1 – dành cho các lớp thiết lập .25rem2 hoặc .25rem3
• .25rem4 – dành cho các lớp thiết lập .25rem5 hoặc .25rem6
• .25rem7 – ​​dành cho các lớp đặt .25rem8 hoặc .25rem9
• 3rem0 – dành cho các lớp đặt cả 3rem1 và 3rem2
• 3rem3 – dành cho các lớp đặt cả 3rem4 và 3rem5
• trống – dành cho các lớp đặt margin hoặc padding trên cả 4 mặt của phần tử

Trường hợp kích thước là một trong những

• 3rem8 – đối với các lớp loại bỏ margin hoặc padding bằng cách đặt nó thành3rem8
• xs2 – (theo mặc định) cho các lớp đặt margin hoặc padding thànhxs5
• xs6 – (theo mặc định) cho các lớp đặt margin hoặc padding thànhxs9
• xl0 – (theo mặc định) cho các lớp đặt margin hoặc padding thànhxl3
• xl4 – (theo mặc định) cho các lớp đặt margin hoặc padding thànhxl7
• xl8 – (theo mặc định) cho các lớp đặt margin hoặc padding thànhmin-width: 01
• min-width: 02 – đối với các lớp đặt margin thành tự động

(Bạn có thể thêm nhiều kích thước hơn bằng cách thêm các mục vào biến bản đồ min-width: 04 Sass. )

ví dụ

Dưới đây là một số ví dụ với padding

Dưới đây là một số ví dụ với margin

định tâm ngang

Ngoài ra, Bootstrap cũng bao gồm một lớp min-width: 07 để định tâm theo chiều ngang cho nội dung cấp độ khối có chiều rộng cố định—nghĩa là nội dung có bộ min-width: 08 và bộ min-width: 09—bằng cách đặt lề ngang thành min-width: 02

Bootstrap tự động của tôi là gì?

Làm cách nào để sử dụng lề trong Bootstrap?

Bootstrap ml tự động là gì?

Làm cách nào để thay đổi lề trong Bootstrap?

Bạn đang tìm hiểu bài viết:  MX Auto trong Bootstrap là gì? 2024

HỆ THỐNG CỬA HÀNG TRÙM SỈ QUẢNG CHÂU

Điện thoại: 092.484.9483

Zalo: 092.484.9483

Facebook: https://facebook.com/giatlathuhuongcom/

Website: Trumsiquangchau.com

Địa chỉ: Ngõ 346 Nam Dư, Trần Phú, Hoàng Mai, Hà Nội.