Hướng dẫn spacer bootstrap

Question

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.

Nội dung chính Show

1- Spacing Utility
{property}{sides}-{size}
{property}{sides}-{breakpoint}-{size}
2- Các ví dụ

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


<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Margin Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>

      <div class="container-fluid border border-primary mt-5">
         <div class="border border-danger mt-5 mr-4 mb-4 ml-auto" style="width:100px;">
           Div
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>

</html>

paddingexample


<div class="border border-danger pt-5 pr-4 pb-4 pl-5" style="width:300px;">
   Bootstrap is a free front-end framework for faster and easier web development.
   Bootstrap includes HTML and CSS based design templates for typography ...
</div>

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


<div class="container-fluid border border-primary mt-5">

   <div class="mx-auto border border-danger" style="width:100px;">
      Center DIV
   </div>

</div>

Responsive:


<div class="container-fluid border border-primary">

   <div class="border border-danger m-1 m-sm-5" style="width:100px;">
      .m-1 .m-sm-5
   </div>

</div>