Hướng dẫn bootstrap margin

Hướng dẫn bootstrap margin
Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hướng dẫn bootstrap margin
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.
Hướng dẫn bootstrap margin
Facebook

1- Spacing Utility

Spacing Utility (Tiện ích Spacing) là một phần trong Bootstrap, nó đưa ra các lớp giúp người dùng thiết lập giá trị margin, padding cho các phần tử. Các lớp này thân thiện với các thiết bị có kích thước màn hình khác nhau.

Về cơ bản các lớp này có tên theo định dạng sau:

  • {property}{sides}-{size}

  • {property}{sides}-{breakpoint}-{size}

Trong đó:

  • {property}{size} là giá trị bắt buộc.
  • {sides}{breakpoint} là giá trị không bắt buộc.

{property}:

{property} có giá trị là "m" hoặc "p".

{property} Mô tả
m Đây là viết tắt của "Margin", liên quan đến việc thiết lập margin cho phần tử.
p Đây là viết tắt của "Padding", liên quan đến việc thiết lập padding cho phần tử.

{sides}:

{sides} Mô tả
t Đây là viết tắt của "Top", liên quan tới thiết lập margin-top hoặc padding-top
b Đây là viết tắt của "Bottom", liên quan tới thiết lập margin-bottom hoặc padding-bottom
l Đây là viết tắt của "Left", liên quan tới thiết lập margin-left hoặc padding-left
r Đây là viết tắt của "Right", liên quan tới thiết lập margin-right hoặc padding-right
x Ám chỉ trục X (Nằm ngang), liên quan tới thiết lập margin-left & margin-right hoặc padding-left & padding-right.
y Ám chỉ trục Y (Thẳng đứng), liên quan tới thiết lập margin-top & margin-bottom hoặc padding-top & padding-bottom.

{size}:

{size} Mô tả
0 Thiết lập giá trị cho padding hoặc margin bằng 0.
1 Thiết lập giá trị cho padding hoặc margin bằng 0.25 * $spacer.
2 Thiết lập giá trị cho padding hoặc margin bằng 0.5 * $spacer.
3 Thiết lập giá trị cho padding hoặc margin bằng 1 * $spacer.
4 Thiết lập giá trị cho padding hoặc margin bằng 1.5 * $spacer.
5 Thiết lập giá trị cho padding hoặc margin bằng 3 * $spacer.
auto Thiết lập giá trị cho margin bằng auto.

$spacer là một giá trị được định nghĩa sẵn trong SASS của Bootstrap. Giá trị này có thể khác nhau đối với các thiết bị có chiều rộng màn hình khác nhau.

{breakpoint}

{breakpoint} Mô tả
sm Hoạt động khi chiều rộng phần tử cha >= 567px.
md Hoạt động khi chiều rộng phần tử cha >= 768px.
lg Hoạt động khi chiều rộng phần tử cha >= 992px.
xl Hoạt động khi chiều rộng phần tử cha >= 1200px.

2- Các ví dụ

margin-example.html




   
      
      Margin Example
      
   
   

      
Div

Hướng dẫn bootstrap margin

paddingexample


Bootstrap is a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS based design templates for typography ...

Hướng dẫn bootstrap margin

Nếu một phần tử được thiết lập margin tự động bên trái và bên phải. Nó sẽ xuất hiện tại vị trí chính giữa (center) của phần tử cha theo phương nằm ngang.

center-example


Center DIV

Hướng dẫn bootstrap margin

Responsive:


.m-1 .m-sm-5

Hướng dẫn bootstrap margin