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ã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. 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} và {size} là giá trị bắt buộc.
• {sides} và {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

   
      
      
      
   
   

      

         

           Div
         
      

      
      
      
   


 

paddingexample

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

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
   

Responsive:

   

      .m-1 .m-sm-5