Chức vụ
Sử dụng các tiện ích viết tắt này để nhanh chóng định cấu hình vị trí của một phần tử.
Giá trị vị trí
Các lớp định vị nhanh có sẵn, mặc dù chúng không đáp ứng.
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
Sắp xếp các yếu tố
Sắp xếp các yếu tố dễ dàng với các tiện ích định vị cạnh. Định dạng là {property}-{position}
.
Trường hợp tài sản là một trong:
top
- chotop
vị trí thẳng đứngstart
- cho vị trí nằm ngangleft
(trong LTR)bottom
- chobottom
vị trí thẳng đứngend
- cho vị trí nằm ngangright
(trong LTR)
Vị trí là một trong:
0
- cho0
vị trí cạnh50
- cho50%
vị trí cạnh100
- cho100%
vị trí cạnh
(Bạn có thể thêm nhiều giá trị vị trí hơn bằng cách thêm các mục nhập vào $position-values
biến bản đồ Sass.)
<div class="position-relative">
<div class="position-absolute top-0 start-0"></div>
<div class="position-absolute top-0 end-0"></div>
<div class="position-absolute top-50 start-50"></div>
<div class="position-absolute bottom-50 end-50"></div>
<div class="position-absolute bottom-0 start-0"></div>
<div class="position-absolute bottom-0 end-0"></div>
</div>
Yếu tố trung tâm
Ngoài ra, bạn cũng có thể căn giữa các phần tử với lớp tiện ích biến đổi .translate-middle
.
Lớp này áp dụng các phép biến đổi translateX(-50%)
và translateY(-50%)
cho phần tử, kết hợp với các tiện ích định vị cạnh, cho phép bạn căn giữa tuyệt đối một phần tử.
<div class="position-relative">
<div class="position-absolute top-0 start-0 translate-middle"></div>
<div class="position-absolute top-0 start-50 translate-middle"></div>
<div class="position-absolute top-0 start-100 translate-middle"></div>
<div class="position-absolute top-50 start-0 translate-middle"></div>
<div class="position-absolute top-50 start-50 translate-middle"></div>
<div class="position-absolute top-50 start-100 translate-middle"></div>
<div class="position-absolute top-100 start-0 translate-middle"></div>
<div class="position-absolute top-100 start-50 translate-middle"></div>
<div class="position-absolute top-100 start-100 translate-middle"></div>
</div>
Bằng cách thêm .translate-middle-x
hoặc .translate-middle-y
các lớp, các phần tử chỉ có thể được định vị theo hướng ngang hoặc dọc.
<div class="position-relative">
<div class="position-absolute top-0 start-0"></div>
<div class="position-absolute top-0 start-50 translate-middle-x"></div>
<div class="position-absolute top-0 end-0"></div>
<div class="position-absolute top-50 start-0 translate-middle-y"></div>
<div class="position-absolute top-50 start-50 translate-middle"></div>
<div class="position-absolute top-50 end-0 translate-middle-y"></div>
<div class="position-absolute bottom-0 start-0"></div>
<div class="position-absolute bottom-0 start-50 translate-middle-x"></div>
<div class="position-absolute bottom-0 end-0"></div>
</div>
Các ví dụ
Dưới đây là một số ví dụ thực tế về các lớp này:
<button type="button" class="btn btn-primary position-relative">
Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
</button>
<button type="button" class="btn btn-dark position-relative">
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1 bi bi-caret-down-fill" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</button>
<button type="button" class="btn btn-primary position-relative">
Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
</button>
Bạn có thể sử dụng các lớp này với các thành phần hiện có để tạo các lớp mới. Hãy nhớ rằng bạn có thể mở rộng chức năng của nó bằng cách thêm các mục nhập vào $position-values
biến.
<div class="position-relative m-4">
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
<button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
<button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-secondary rounded-pill" style="width: 2rem; height:2rem;">3</button>
</div>
Sass
Bản đồ
Các giá trị tiện ích vị trí mặc định được khai báo trong bản đồ Sass, sau đó được sử dụng để tạo các tiện ích của chúng tôi.
$position-values: (
0: 0,
50: 50%,
100: 100%
);
API tiện ích
Tiện ích vị trí được khai báo trong API tiện ích của chúng tôi trong scss/_utilities.scss
. Tìm hiểu cách sử dụng API tiện ích.
"position": (
property: position,
values: static relative absolute fixed sticky
),
"top": (
property: top,
values: $position-values
),
"bottom": (
property: bottom,
values: $position-values
),
"start": (
property: left,
class: start,
values: $position-values
),
"end": (
property: right,
class: end,
values: $position-values
),
"translate-middle": (
property: transform,
class: translate-middle,
values: (
null: translate(-50%, -50%),
x: translateX(-50%),
y: translateY(-50%),
)
),