Төп эчтәлеккә күчү Документлар навигациясенә күчү
in English

Йөзүче этикеткалар

Сезнең кертү кырларыгызда йөзә торган гади форма этикеткаларын булдырыгыз.

Бу биттә

Мисал

Bootstrap'ның текст формасы кырлары белән йөзүче этикеткаларны эшләтеп җибәрү өчен пар <input class="form-control">һәм <label>элементларны урыгыз. .form-floatingEachәрберсендә A placeholderталәп ителә, <input>чөнки безнең CSS-ның йөзә торган этикеткалары :placeholder-shownпсевдо-элементны куллана. Шунысын да онытмагыз: <input>без беренче булырга тиеш, шуңа күрә без бертуган селекторны куллана алабыз (мәс ~.).

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

valueИнде билгеләнгән булганда, s <label>автоматик рәвештә аларның йөзгән позициясенә көйләнәчәк.

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

Форманы тикшерү стиле дә көтелгәнчә эшли.

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

Текстар

Килешү буенча, <textarea>s белән s .form-controlбиеклеге булачак <input>.

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

Yourзегезгә махсус биеклек куяр өчен <textarea>, rowsатрибутны кулланмагыз. Киресенчә, ачык итеп куегыз height(яисә CSS аша).

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

Сайлый

Моннан тыш .form-control, йөзүче этикеткалар ларда гына бар .form-select. Алар бер үк ысул белән эшлиләр, ләкин слардан аермалы буларак <input>, алар һәрвакыт <label>аның йөзгән халәтендә күрсәтәчәкләр. Белән сайлана sizeһәм multipleярдәм итми.

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

Таблицасы

Bootstrap челтәр системасы белән эшләгәндә, форма элементларын багана классларына урнаштырыгыз.

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

Сасс

Variзгәрешләр

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