Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
in English

Nhãn nổi

Tạo các nhãn biểu mẫu đơn giản đẹp mắt nổi trên các trường đầu vào của bạn.

Trên trang này

Thí dụ

Bọc một cặp <input class="form-control">và <label>các phần tử vào .form-floatingđể kích hoạt nhãn nổi với các trường dạng văn bản của Bootstrap. A placeholderlà bắt buộc trên mỗi <input>nhãn vì phương pháp nhãn nổi chỉ CSS của chúng tôi sử dụng :placeholder-shownphần tử giả. Cũng lưu ý rằng cái <input>phải đến trước để chúng ta có thể sử dụng bộ chọn anh chị em (ví dụ ~:).

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>

Khi có một giá valuetrị đã được xác định, <label>s sẽ tự động điều chỉnh về vị trí thả nổi của chúng.

<form class="form-floating">
  <input type="email" class="form-control" id="floatingInputValue" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputValue">Input with value</label>
</form>

Các kiểu xác thực biểu mẫu cũng hoạt động như mong đợi.

<form class="form-floating">
  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputInvalid">Invalid input</label>
</form>

Textareas

Theo mặc định, <textarea>s với .form-controlsẽ có cùng chiều cao với <input>s.

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

Để đặt chiều cao tùy chỉnh trên của bạn <textarea>, không sử dụng rowsthuộc tính. Thay vào đó, hãy đặt một cách rõ ràng height(nội tuyến hoặc qua CSS tùy chỉnh).

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
  <label for="floatingTextarea2">Comments</label>
</div>

Lựa chọn

Ngoài .form-controlra, nhãn nổi chỉ có sẵn trên .form-selects. Chúng hoạt động theo cùng một cách, nhưng không giống như <input>s, chúng sẽ luôn hiển thị <label>ở trạng thái thả nổi. Các lựa chọn có sizevà multiplekhông được hỗ trợ.

<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="floatingSelect">Works with selects</label>
</div>

Cách trình bày

Khi làm việc với hệ thống lưới Bootstrap, hãy đảm bảo đặt các phần tử biểu mẫu trong các lớp cột.

<div class="row g-2">
  <div class="col-md">
    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]" value="[email protected]">
      <label for="floatingInputGrid">Email address</label>
    </div>
  </div>
  <div class="col-md">
    <div class="form-floating">
      <select class="form-select" id="floatingSelectGrid" aria-label="Floating label select example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <label for="floatingSelectGrid">Works with selects</label>
    </div>
  </div>
</div>

Sass

Biến

$form-floating-height:            add(3.5rem, $input-height-border);
$form-floating-line-height:       1.25;
$form-floating-padding-x:         $input-padding-x;
$form-floating-padding-y:         1rem;
$form-floating-input-padding-t:   1.625rem;
$form-floating-input-padding-b:   .625rem;
$form-floating-label-opacity:     .65;
$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem);
$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out;