Asosiy tarkibga o'tish Hujjatlar navigatsiyasiga oʻtish
in English

Suzuvchi teglar

Kirish maydonlaringiz ustida suzuvchi juda oddiy shakl teglarini yarating.

Ushbu sahifada

Misol

Bootstrap matnli shakl maydonlari bilan suzuvchi teglarni yoqish uchun juft <input class="form-control">va <label>elementlarni oʻrab oling. .form-floatingHar birida A placeholdertalab qilinadi, <input>chunki bizning CSS-faqat suzuvchi teglar psevdoelementdan foydalanadi :placeholder-shown. Shuni ham yodda tutingki, <input>biz birodarlar selektoridan foydalanishimiz uchun birinchi bo'lib kelishi kerak (masalan, ~).

<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>

Agar valueallaqachon aniqlangan bo'lsa, <label>s avtomatik ravishda o'zlarining suzuvchi holatiga moslashadi.

<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>

Shaklni tekshirish uslublari ham kutilganidek ishlaydi.

<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>

Matnli hududlar

Odatiy bo'lib, <textarea>s with .form-controlbalandligi s bilan bir xil bo'ladi <input>.

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

ga moslashtirilgan balandlikni o'rnatish uchun atributdan <textarea>foydalanmang . rowsBuning o'rniga, aniq height(ichki yoki maxsus CSS orqali) o'rnating.

<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>

Tanlaydi

dan boshqa .form-controlsuzuvchi teglar faqat .form-selects da mavjud. Ular xuddi shunday ishlaydi, lekin <input>s dan farqli o'laroq, ular har doim <label>suzuvchi holatda ko'rsatiladi. Tanlaydi sizeva multipleqo'llab-quvvatlanmaydi.

<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>

Tartib

Bootstrap grid tizimi bilan ishlaganda, shakl elementlarini ustun sinflari ichida joylashtirishni unutmang.

<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

O'zgaruvchilar

$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;