Asosiy tarkibga o'tish Hujjatlar navigatsiyasiga oʻtish
Check
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 usuli psevdoelementdan foydalanadi :placeholder-shown. Shuni ham yodda tutingki, <input>biz birodarlar selektoridan foydalanishimiz uchun birinchi bo'lib kelishi kerak (masalan, ~).

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

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

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

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

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

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

Faqat o'qish uchun ochiq matn

Suzuvchi teglar ham ni qoʻllab-quvvatlaydi , bu sahifa tartibiga taʼsir qilmasdan tahrirlanadigan qiymatdan ochiq matn qiymatiga .form-control-plaintextoʻtish uchun foydali boʻlishi mumkin .<input>

html 
<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]">
  <label for="floatingEmptyPlaintextInput">Empty input</label>
</div>
<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="[email protected]" value="[email protected]">
  <label for="floatingPlaintextInput">Input with value</label>
</div>

Kirish guruhlari

Suzuvchi teglar ham qo'llab-quvvatlaydi .input-group.

@
html 
<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">Username</label>
  </div>
</div>

Foydalanilganda .input-groupva .form-floatingshaklni tekshirish bilan birga, ning -feedbacktashqarisida .form-floating, lekin ichida joylashtirilishi kerak .input-group. Bu shuni anglatadiki, fikr-mulohaza javascript yordamida ko'rsatilishi kerak.

@
Iltimos, foydalanuvchi nomini tanlang.
html 
<div class="input-group has-validation">
  <span class="input-group-text">@</span>
  <div class="form-floating is-invalid">
    <input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required>
    <label for="floatingInputGroup2">Username</label>
  </div>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

Tartib

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

html 
<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">
        <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;