Bootstrap lề trên 4

Bootstrap 4 chứa nhiều lớp tiện ích đệm và lề ngắn gọn, đáp ứng để thay đổi giao diện của một phần tử

Các lớp lề Bootstrap 4 sử dụng cho khoảng cách bên ngoài của phần tử. Nếu chúng ta muốn gán không gian bên ngoài cho phần tử và vùng chứa, hãy sử dụng các lớp lề

Các lớp được tạo bằng bản đồ Sass cơ bản với độ rộng từ. 25rem đến 3rem. Chúng ta có thể gán các giá trị khoảng cách hoặc lề 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ách sử dụng các lớp tốc ký. 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 đều được hỗ trợ

Cú pháp của các lớp lề

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

Bootstrap 4 lớp lề kích thước thuộc tính tiêu đề kích thước bên, chẳng hạn như kích thước màn hình xs, sm, md, LG và xl. Thuộc tính tên lớp có kích thước điểm ngắt

Lớp lề bootstrap 4 và thuộc tính của nó sử dụng cú pháp sau

m - for margin classes

Đối với các cạnh của lề, cú pháp như sau

(m) (side) - (size)

Cú pháp sau đây được sử dụng cho màn hình cực lớn, lớn, trung bình và nhỏ

(m) (aspects) – (breakpoints) - (size)

Mặt của các lớp lề

Bootstrap 4 sử dụng lớp lề với cạnh của phần tử. Lớp chỉ định các cạnh trên, dưới, trái, phải, ngang và dọc của phần tử. Lớp lề bootstrap 4 và các mặt của nó sử dụng cú pháp sau

Margin SidesDescriptiont Đối với các lớp có đặt khoảng cách trên cùng hoặc trên cùng của lề. b Đối với các lớp có thiết lập khoảng cách dưới cùng với lề dưới hoặc khoảng cách bên ngoài. l Đối với các lớp còn lại khoảng cách lề trái hoặc khoảng cách bên ngoài để đặt. r Đối với các lớp có khoảng cách bên phải hoặc khoảng cách bên phải được đặt. x Đối với các lớp định cấu hình cả bên trái và bên phải Đối với các lớp định cấu hình cả trên cùng và dưới cùng Đối với các lớp, hãy áp dụng lề hoặc phần đệm cho cả bốn cạnh của phần tử

Ví dụ

The following example shows the margin sides of the bootstrap 4 version.



























 Bootstrap 4 Margin Classes 




 The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.

The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.

 


 The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.

The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.

 


 The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.

The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.

 


 The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.

The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.

 


 The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.

The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.

 

đầu ra

Kích thước của các lớp lề

Bootstrap 4 sử dụng lớp lề với kích thước của phần tử. Lớp gán từ không (0) đến năm (5) kích thước của lề phần tử. Lớp lề bootstrap 4 và kích thước của nó sử dụng cú pháp sau

Kích thước lề Mô tả0 Đối với các lớp, hãy xóa lề hoặc phần đệm bằng cách đặt thành 0. 1 (theo mặc định) cho các lớp mà lề hoặc phần đệm được đặt thành $spacer *. 252 (Theo mặc định) cho các lớp mà lề hoặc phần đệm được đặt thành $spacer *. 53 (theo mặc định) Đối với các lớp, hãy đặt lề hoặc phần đệm thành $spacer. 4 (Theo mặc định) cho các lớp có lề hoặc phần đệm được đặt thành $spacer * 1. 55 (theo mặc định) đối với các lớp mà lề hoặc phần đệm được đặt thành $spacer * 3auto đối với các lớp mà lề được đặt thành tự động

ví dụ

Sau đây là kích thước của một ví dụ về lề. Kích thước 1,3,4,5 được sử dụng cho lề trong ví dụ này

 Bootstrap 4 Margin 




 The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.

The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.

 


 The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.

The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.

 


 The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.

The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.

 


 The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.

The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.

 


 The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.

The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.

 

đầu ra

Hình ảnh bên dưới hiển thị lề Bootstrap 4 cho một phần tử có kích thước

Bootstrap 4 Trung tâm ngang

Hơn nữa, Bootstrap chứa một. 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à chiều rộng được xác định) bằng cách đặt lề ngang thành tự động

cú pháp

Cú pháp sau hiển thị trung tâm theo chiều ngang của phần tử

Information about the centre

ví dụ

Sau đây là một ví dụ về lề ngang

 Bootstrap 4 Margin classes 

 The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.
The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.
 

 The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.
The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.
 

 The Bootstrap 4 margin is a Bootstrap utilities that are used for outer spacing of the element.
The bootstrap 4 margin uses to the outer spacing of the elements with sizes and sides.
 

đầu ra

Bootstrap 4 Lề âm

Thuộc tính lề trong CSS có thể có giá trị âm (không thể đệm). Chúng tôi đã thêm các tiện ích ký quỹ âm cho mọi kích thước số nguyên khác 0 được nêu ở trên trong phiên bản 4. 2. Các tiện ích này rất tuyệt vời để sửa đổi máng xối cột lưới trên các điểm ngắt

Cú pháp của ký quỹ âm

Cú pháp gần giống với cú pháp của các tiện ích ký quỹ dương, mặc định, với việc thêm n trước kích thước được yêu cầu. Đây là một ví dụ về một lớp nghịch đảo của. mt-1

.mt-n1{
Margin-top: -0.30rem !important;
}

Đây là một mẫu thay đổi lưới Bootstrap ở các điểm dừng trung bình (md) và cao hơn. Chúng tôi đã tăng. đệm col với. px-md-5 và sau đó bù nó bằng. mx-md-n5 trên cha mẹ. lớp hàng

ví dụ

Ví dụ sau đây cho thấy lề âm của phần tử

________số 8

đầu ra

Phần kết luận

Các lớp lề tạo không gian trên một trang web cho một ứng dụng hấp dẫn và thân thiện với người dùng. Chúng ta có thể tạo lề giúp với kích thước và các cạnh của phần tử. Các lớp lề Bootstrap 4 sử dụng điểm dừng cho các ứng dụng web đáp ứng

Cách đặt lề

MX Auto trong Bootstrap là gì?

Làm cách nào để thêm dung lượng trong Bootstrap?

Lề và đệm trong Bootstrap là gì?