मुखेल आशयाचेर वचचें डॉक्स नेव्हिगेशनाचेर वचचें
in English

तरंगपी लेबलां

तुमच्या इनपुट क्षेत्रांचेर तरंगपी सोबीत सादीं फॉर्म लेबलां तयार करात.

ह्या पानाचेर

उदारण

Bootstrap च्या मजकूर फॉर्म क्षेत्रां वांगडा तरंगपी लेबलां सक्षम करपाक <input class="form-control">आनी <label>घटकांची जोडी गुठलावची. आमची फकत CSS-फक्त तरंगपी लेबलांची पद्दत छद्म-घटक वापरता म्हणून दरेकाचेर .form-floatingA जाय. तशेंच लक्षांत दवरात की the must come first म्हणजे आमी भावंड निवडपी वापरूं येता (देखीक, ).placeholder<input>: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पयलींच व्याख्या केल्ली आसता, तेन्ना <label>s आपोआप तांच्या तरंगपी स्थितींत समायोजीत जातले.

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

तुमच्या चेर सानुकूल उंचाय सेट करपाक , गुणधर्म <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-selects चेर उपलब्ध आसात. ते एकेच तरेन काम करतात, पूण <input>s परस वेगळे तरेन, ते सदांच the <label>in its floated state दाखयतले. कडेन निवडटा 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>

सास

चड-उणें

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