Hướng dẫn margin bootstrap 3 - margin bootstrap 3

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

{property}:

{property} có giá trị là "m" hoặc "p". 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ử. "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ử. "Padding", liên quan đến việc thiết lập padding cho phần tử.

{sides}:

{sides}	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ử. "Top", liên quan tới thiết lập margin-top hoặc padding-top
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ử. "Bottom", liên quan tới thiết lập margin-bottom hoặc padding-bottom
{sides}:	t "Left", liên quan tới thiết lập margin-left hoặc padding-left
Đâ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 "Right", liên quan tới thiết lập margin-right hoặc padding-right
Đâ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 X (Nằm ngang), liên quan tới thiết lập margin-left & margin-right hoặc padding-left & padding-right.
Đâ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 (Thẳng đứng), liên quan tới thiết lập margin-top & margin-bottom hoặc padding-top & padding-bottom.

Đây là viết tắt của "Right", liên quan tới thiết lập margin-right hoặc padding-right

{size}	Mô tả
0	mpadding hoặc margin bằng 0.
1	Đây là viết tắt của "Margin", liên quan đến việc thiết lập margin cho phần tử. padding hoặc margin bằng 0.25 * $spacer.
2	ppadding hoặc margin bằng 0.5 * $spacer.
3	Đây là viết tắt của "Padding", liên quan đến việc thiết lập padding cho phần tử. padding hoặc margin bằng 1 * $spacer.
4	{sides}: padding hoặc margin bằng 1.5 * $spacer.
5	t padding hoặc margin bằng 3 * $spacer.
Đâ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 margin bằng auto.

Đâ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à 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.

l

{breakpoint}	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ử. >= 567px.
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ử. >= 768px.
{sides}:	t >= 992px.
Đâ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 >= 1200px.

Đây là viết tắt của "Bottom", liên quan tới thiết lập margin-bottom hoặc padding-bottom

margin-example.html

   
      
      
      
   
   

      

         

           Div
         
      

      
      
      
   


 

l

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

Đây là viết tắt của "Left", liên quan tới thiết lập margin-left hoặc padding-leftmargin 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
   

r

   

      .m-1 .m-sm-5