Làm cách nào để đặt lề trong Bootstrap 4?

Bài viết sau đây cung cấp một phác thảo về Bootstrap Margin. Các tiện ích Bootstrap được sử dụng cho các mục đích thiết kế và phong cách mà không cần sự trợ giúp của biểu định kiểu xếp tầng (CSS). Nó là một phần của các tiện ích bootstrap được sử dụng để tạo khoảng cách. Nó được sử dụng cho khoảng cách bên ngoài của đường viền hoặc các phần tử của bootstrap. Chúng ta có thể đặt kích thước của khoảng cách và vị trí của khoảng cách xung quanh phần tử của bootstrap. Lề làm cho ứng dụng sạch sẽ và rõ ràng. Nó giúp người dùng dễ sử dụng và hiểu các ứng dụng web

cú pháp

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác

• Cú pháp được sử dụng cho màn hình cực nhỏ như sau

(property)(sides)-(size)

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

(property)(sides)-(breakpoint)-(size)

• Đối với thuộc tính ký tự “m” được sử dụng để xác định lề
• Đối với phía lề bootstrap bên dưới bảng được sử dụng

Các bênChi tiếtSử dụng cho lề TRÊNbSử dụng cho lề DƯỚIsử dụng cho lề TRÁISử dụng cho lề PHẢIxSử dụng cho lề TRÁI và PHẢISử dụng cho lề TRÊN và DƯỚI để trốngLề cho TẤT CẢ các bên

• Bootstrap margin-size được sử dụng cho khoảng cách chiều rộng và chiều cao xung quanh các phần tử của bootstrap

SizeDetailsautoTự động điều chỉnh kích thước lề trong các ứng dụng. 0Sử dụng cho lề kích thước 0px1Sử dụng cho lề kích thước 4px2Sử dụng cho lề kích thước 8px3Sử dụng cho lề kích thước 12px4Sử dụng cho lề kích thước 24px5Sử dụng cho lề kích thước 48px

• Điểm dừng Bootstrap được sử dụng cho lề phản hồi theo kích thước màn hình. Điểm dừng lề màn hình lớn, cực lớn, kích thước trung bình được sử dụng
• sm, md, lg, xl được sử dụng làm điểm dừng theo yêu cầu về kích thước màn hình

Ví dụ về Tiền ký quỹ Bootstrap

Đưa ra dưới đây là các ví dụ

Gói phát triển phần mềm tất cả trong một(hơn 600 khóa học, hơn 50 dự án)

Giá bán
Xem các khóa học

Hơn 600 khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập trọn đời
4. 6 (85,567 xếp hạng)

Ví dụ 1

Ví dụ sau đây là về kích thước. Trong ví dụ này, kích thước 1,3,4,5 được sử dụng cho lề

Mã số

 Bootstrap Margin 

 The Bootstrap margin is part of bootstrap utilities used for spacing.
The bootstrap margin using for the outer spacing of the border or elements of bootstrap.
 

 The Bootstrap margin is part of bootstrap utilities used for spacing.
The bootstrap margin using for the outer spacing of border or elements of bootstrap
 

 The Bootstrap margin is part of bootstrap utilities used for spacing.
The bootstrap margin using for the outer spacing of border or elements of bootstrap
 

 The Bootstrap margin is part of bootstrap utilities used for spacing.
The bootstrap margin using for the outer spacing of border or elements of bootstrap
 

đầu ra

Ví dụ #2

Ví dụ sau đây là sự kết hợp giữa kích thước và cạnh. Các cạnh lề được chọn trên, dưới, trái và phải và 5 kích thước lề được sử dụng trong ví dụ sau

Mã số

 Bootstrap Margin 

 The Bootstrap margin is part of bootstrap utilities used for spacing.
The bootstrap margin using for the outer spacing of the border or elements of bootstrap.
 

 The Bootstrap margin is part of bootstrap utilities used for spacing.
The bootstrap margin using for the outer spacing of border or elements of bootstrap
 

 The Bootstrap margin is part of bootstrap utilities used for spacing.
The bootstrap margin using for the outer spacing of border or elements of bootstrap
 

 The Bootstrap margin is part of bootstrap utilities used for spacing.
The bootstrap margin using for the outer spacing of border or elements of bootstrap

đầu ra

Ví dụ #3

Ví dụ sau sử dụng điểm ngắt màn hình nhỏ. Đây là một lề bootstrap đáp ứng

Mã số

 Bootstrap Margin 

 The Bootstrap margin is part of bootstrap utilities used for spacing.
The bootstrap margin using for the outer spacing of the border or elements of bootstrap.
 

 The Bootstrap margin is part of bootstrap utilities used for spacing.
The bootstrap margin using for the outer spacing of border or elements of bootstrap
 

 The Bootstrap margin is part of bootstrap utilities used for spacing.
The bootstrap margin using for the outer spacing of border or elements of bootstrap
 

 The Bootstrap margin is part of bootstrap utilities used for spacing.
The bootstrap margin using for the outer spacing of border or elements of bootstrap

đầu ra

Ví dụ #4

Ví dụ sau là lề bootstrap với cạnh x và y, lề tự động và không có điểm dừng

Mã số

 Bootstrap Margin 
 The Bootstrap margin is part of bootstrap utilities used for spacing.
The bootstrap margin using for the outer spacing of the border or elements of bootstrap.

 The Bootstrap margin is part of bootstrap utilities used for spacing.
The bootstrap margin using for the outer spacing of border or elements of bootstrap

 The Bootstrap margin is part of bootstrap utilities used for spacing.
The bootstrap margin using for the outer spacing of border or elements of bootstrap

đầu ra

Phần kết luận

Điều này đang giúp các nhà phát triển tạo kiểu trong các ứng dụng web và giảm mã hóa CSS. Các ứng dụng web và trang web trông hấp dẫn, thanh lịch và thân thiện với người dùng vì nó. Nó giúp giảm bớt sự vụng về của ứng dụng web và phù hợp với người dùng

Bài viết được đề xuất

Đây là hướng dẫn về Bootstrap Margin. Ở đây chúng tôi thảo luận về phần giới thiệu Bootstrap Margin cùng với các ví dụ tương ứng để hiểu rõ hơn. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

Lớp nào được sử dụng để đặt lề trong Bootstrap?

MX Auto trong Bootstrap là gì?

Làm cách nào để thay đổi phần đệm vùng chứa Bootstrap?

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