Bootstrap - Nhãn nổi: 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! Hôm nay, chúng ta sẽ cùng khám phá thế giới kỳ diệu của Nhãn nổi trong Bootstrap. Là người thầy thân thiện trong khu phố, tôi rất vui được hướng dẫn các bạn trong hành trình này. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - chúng ta sẽ cùng nhau từng bước, và sooner or later, bạn sẽ thành thạo như một chuyên gia!

什么是 Nhãn nổi?

Trước khi bắt đầu, hãy cùng hiểu Nhãn nổi là gì. Hãy tưởng tượng bạn đang điền một biểu mẫu, và nhãn cho mỗi ô nhập liệu sẽ tự động nổi lên trên trường khi bạn bắt đầu gõ. Đó chính là essence của Nhãn nổi! Chúng cung cấp một giao diện người dùng干净, trực quan, tiết kiệm không gian và trông rất tuyệt.

Ví dụ cơ bản

Hãy bắt đầu với một ví dụ cơ bản để làm quen:

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">Địa chỉ email</label>
</div>

Đang xảy ra gì ở đây? Hãy cùng phân tích:

1. Chúng ta bao bọc ô nhập liệu và nhãn trong một div với lớp form-floating.
2. Ô nhập liệu (input) đặt trước nhãn (label) (thứ tự này rất quan trọng!).
3. Chúng ta thêm một placeholder vào ô nhập liệu, mà Bootstrap sẽ sử dụng để xác định kích thước của nhãn.

Khi bạn nhấn vào ô nhập liệu hoặc bắt đầu gõ, nhãn sẽ từ từ nổi lên trên trường nhập liệu. Đó như một phép màu, nhưng thực ra chỉ là CSS thông minh!

Textareas

Nhãn nổi không chỉ适用于 đơn giản inputs. Chúng hoạt động rất tốt với textareas:

<div class="form-floating">
<textarea class="form-control" placeholder="Để lại bình luận ở đây" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Bình luận</label>
</div>

Ví dụ này hoạt động tương tự như ví dụ cơ bản, nhưng với textarea thay vì input. Hoàn hảo cho khi bạn cần người dùng nhập văn bản dài hơn!

Selects

Vậy下拉菜单呢？Bootstrap cũng có hỗ trợ:

<div class="form-floating">
<select class="form-select" id="floatingSelect" aria-label="Ví dụ chọn nhãn nổi">
<option selected>Mở menu chọn này</option>
<option value="1">Một</option>
<option value="2">Hai</option>
<option value="3">Ba</option>
</select>
<label for="floatingSelect">Hoạt động với selects</label>
</div>

Nhãn nổi sẽ xuất hiện khi một tùy chọn được chọn. Đây là một cách tuyệt vời để làm cho các biểu mẫu của bạn trông đồng nhất trên các loại đầu vào khác nhau.

Disabled

Đôi khi, bạn có thể cần vô hiệu hóa một ô nhập liệu. Dưới đây là cách bạn có thể làm điều đó trong khi vẫn giữ nhãn nổi:

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInputDisabled" placeholder="[email protected]" disabled>
<label for="floatingInputDisabled">Địa chỉ email (vô hiệu hóa)</label>
</div>

Chỉ cần thêm thuộc tính disabled vào ô nhập liệu, và Bootstrap sẽ định dạng nó phù hợp.

Readonly Plaintext

Vậy nếu bạn muốn hiển thị một số thông tin không thể thay đổi? Hãy thử readonly plaintext:

<div class="form-floating mb-3">
<input type="email" class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]" readonly>
<label for="floatingEmptyPlaintextInput">Ô trống</label>
</div>

Điều này tạo ra một trường không thể chỉnh sửa nhưng vẫn hưởng lợi từ phong cách nhãn nổi.

Input Groups

Nhãn nổi cũng có thể được sử dụng với các nhóm đầu vào cho các bố cục biểu mẫu phức tạp hơn:

<div class="input-group mb-3">
<span class="input-group-text">$</span>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
<label for="floatingInputGroup1">Số tiền</label>
</div>
</div>

Ví dụ này kết hợp một nhóm đầu vào (tiền tố dấu dollar) với một ô nhập liệu có nhãn nổi.

Bố cục

Cuối cùng, hãy cùng xem cách chúng ta có thể sắp xếp các ô nhập liệu có nhãn nổi trong một lưới响应式:

<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]">
<label for="floatingInputGrid">Địa chỉ email</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid">
<option selected>Mở menu chọn này</option>
<option value="1">Một</option>
<option value="2">Hai</option>
<option value="3">Ba</option>
</select>
<label for="floatingSelectGrid">Hoạt động với selects</label>
</div>
</div>
</div>

Điều này tạo ra một bố cục hai cột sẽ叠放 vertically trên các màn hình nhỏ hơn.

Kết luận

Và thế là bạn đã có nó, các bạn! Chúng ta đã bao quát kỹ lưỡng các khía cạnh của Nhãn nổi trong Bootstrap. Từ các ô nhập liệu cơ bản đến các bố cục phức tạp, bạn bây giờ đã có công cụ để tạo ra các biểu mẫu thời trang, thân thiện với người dùng và làm nổi bật trang web của bạn.

Nhớ rằng, thực hành là chìa khóa của thành công. Hãy thử nghiệm với các ví dụ này, kết hợp các yếu tố khác nhau, và xem bạn có thể tạo ra điều gì. Trước khi bạn biết, bạn sẽ thành thạo như một nhà phát triển web có kinh nghiệm!

Chúc các bạn may mắn và hy vọng nhãn của bạn luôn nổi đẹp!

Credits: Image by storyset