Bootstrap - Vị trí: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Là một giáo viên máy tính gần gũi, tôi rất vui mừng được dẫn các bạn vào thế giới của việc định vị trong Bootstrap. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - chúng ta sẽ bắt đầu từ cơ bản và dần dần nâng cao. Hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau bắt đầu nhé!

Bootstrap Position là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu chúng ta đang nói về điều gì khi nhắc đến "position" trong Bootstrap. Position là về việc kiểm soát vị trí xuất hiện của các phần tử trên trang web của bạn. Nó giống như việc sắp xếp nội thất trong một căn phòng - bạn muốn mọi thứ ở đúng vị trí!

Giá trị Position

Trong Bootstrap, chúng ta có một số giá trị position mà chúng ta có thể sử dụng. Hãy nhìn chúng trong một bảng tiện lợi:

Giá trị Position	Mô tả
static	Vị trí mặc định
relative	Định vị tương đối so với vị trí bình thường
absolute	Định vị tương đối so với phần tử cha đã được định vị gần nhất
fixed	Định vị tương đối so với cửa sổ trình duyệt
sticky	Chuyển đổi giữa relative và fixed

Bây giờ, hãy phân tích chúng với một số ví dụ.

Position Static

Đây là vị trí mặc định cho tất cả các phần tử. Hãy xem một ví dụ:

<div class="position-static">
Tôi là một phần tử static!
</div>

Trong trường hợp này, thẻ div sẽ chỉ nằm ở vị trí tự nhiên của nó trong luồng tài liệu. Không có gì phức tạp, nhưng điều này rất quan trọng để hiểu làm cơ sở.

Position Relative

Định vị tương đối cho phép bạn di chuyển một phần tử so với vị trí bình thường của nó. Đây là cách nó hoạt động:

<div class="position-relative" style="top: 20px; left: 30px;">
Tôi được định vị tương đối!
</div>

Thẻ div này sẽ được di chuyển 20 pixel xuống và 30 pixel sang phải từ vị trí bình thường của nó. Nó giống như bảo宠物, "Di chuyển một chút sang bên trái, bạn nhé!"

Position Absolute

Định vị tuyệt đối là một chút phức tạp hơn. Nó định vị một phần tử tương đối so với phần tử cha đã được định vị gần nhất. Nếu không có phần tử cha nào, nó sẽ sử dụng body của tài liệu. Hãy nhìn nó trong hành động:

<div class="position-relative">
<div class="position-absolute" style="top: 0; right: 0;">
Tôi được định vị tuyệt đối ở góc trên bên phải!
</div>
</div>

Trong ví dụ này, thẻ div trong sẽ được định vị ở góc trên bên phải của thẻ div cha. Nó giống như một note dán bạn có thể đặt bất kỳ đâu trên bảng tin!

Position Fixed

Định vị cố định giống như việc cấp cho một phần tử một vị trí vĩnh viễn trên màn hình. Nó vẫn ở đó ngay cả khi bạn cuộn. Đây là cách bạn sử dụng nó:

<div class="position-fixed" style="bottom: 0; right: 0;">
Tôi được cố định ở góc dưới bên phải của màn hình!
</div>

Thẻ div này sẽ luôn hiển thị ở góc dưới bên phải của cửa sổ trình duyệt, không matter bạn cuộn bao nhiêu. Nó hoàn hảo cho các thứ như nút "Trở lên trên cùng"!

Position Sticky

Định vị dính là chameleon của việc định vị. Nó hoạt động như relative cho đến một điểm cuộn nhất định, sau đó trở thành fixed. Nó rất tốt cho các menu điều hướng. Hãy nhìn một ví dụ:

<div class="position-sticky" style="top: 0;">
Tôi sẽ dính ở trên cùng khi bạn cuộn xuống!
</div>

Thẻ div này sẽ cuộn bình thường với trang cho đến khi nó đạt đến đỉnh của viewport, sau đó nó sẽ dính ở đó khi bạn tiếp tục cuộn.

Sắp xếp các phần tử

Bây giờ chúng ta đã hiểu các giá trị position khác nhau, hãy nói về việc sắp xếp các phần tử trên trang của chúng ta. Bootstrap cung cấp một số lớp tiện lợi cho điều này.

Top, Bottom, Start, và End

Bạn có thể sử dụng các lớp như top-0, bottom-50, start-50, và end-0 để định vị các phần tử. Hãy nhìn một ví dụ:

<div class="position-relative" style="height: 200px;">
<div class="position-absolute top-0 start-0">Góc trên bên trái</div>
<div class="position-absolute top-0 end-0">Góc trên bên phải</div>
<div class="position-absolute bottom-0 start-0">Góc dưới bên trái</div>
<div class="position-absolute bottom-0 end-0">Góc dưới bên phải</div>
</div>

Điều này sẽ đặt bốn thẻ div ở mỗi góc của thẻ div cha. Nó giống như đặt note dán trên bảng trắng!

Trung tâm các phần tử

Việc trung tâm các phần tử là một nhiệm vụ phổ biến trong thiết kế web. Bootstrap làm cho nó dễ dàng với lớp translate-middle. Đây là cách bạn có thể trung tâm một phần tử cả theo chiều ngang và dọc:

<div class="position-relative" style="height: 200px;">
<div class="position-absolute top-50 start-50 translate-middle">
Tôi đang ở chính giữa!
</div>
</div>

Điều này trung tâm thẻ div trong theo cả chiều dọc và chiều ngang trong thẻ div cha. Nó giống như bullseye trong dart - chính giữa!

Một vài ví dụ thêm

Hãy kết thúc với một vài ví dụ thêm để巩固 hiểu biết của chúng ta.

Navbar dính trên cùng

Đây là cách bạn có thể tạo một thanh điều hướng dính trên cùng trên màn hình lớn hơn:

<nav class="navbar navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Thanh điều hướng dính trên cùng</a>
</div>
</nav>

Thanh điều hướng này sẽ cuộn cùng với trang trên thiết bị di động, nhưng sẽ dính trên cùng trên màn hình lớn hơn. Nó giống như một chameleon, thích nghi với môi trường!

Overlay

Bạn có thể tạo hiệu ứng overlay bằng cách sử dụng định vị:

<div class="position-relative">
<img src="beautiful-landscape.jpg" alt="Cảnh quan đẹp" style="width: 100%;">
<div class="position-absolute top-50 start-50 translate-middle text-white">
<h2>Cảnh quan đẹp</h2>
<p>Thưởng thức view!</p>
</div>
</div>

Điều này đặt văn bản lên trên ảnh, trung tâm cả theo chiều dọc và chiều ngang. Nó giống như thêm chú thích cho một postcard!

Và thế là xong, các bạn! Chúng ta đã cùng nhau đi qua thế giới của việc định vị trong Bootstrap. Nhớ rằng, thực hành là cách tốt nhất để thành thạo, vì vậy đừng ngần ngại thử nghiệm với các khái niệm này. Chúc các bạn may mắn và hy vọng các phần tử của bạn luôn được định vị hoàn hảo!

Credits: Image by storyset