મુખ્ય સામગ્રી પર જાઓ ડૉક્સ નેવિગેશન પર જાઓ
in English

ફ્લોટિંગ લેબલ્સ

સુંદર રીતે સરળ ફોર્મ લેબલ્સ બનાવો જે તમારા ઇનપુટ ફીલ્ડ પર તરતા હોય.

ઉદાહરણ

બુટસ્ટ્રેપના ટેક્સ્ચ્યુઅલ ફોર્મ ફીલ્ડ્સ સાથે ફ્લોટિંગ લેબલ્સને સક્ષમ કરવા માટે એક જોડી <input class="form-control">અને <label>તત્વોને લપેટો. .form-floatingદરેક પર 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પહેલેથી જ વ્યાખ્યાયિત હોય, ત્યારે <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 સાથે 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>

તમારા પર કસ્ટમ ઊંચાઈ સેટ કરવા માટે , વિશેષતાનો <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 થી વિપરીત, તેઓ હંમેશા <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>

લેઆઉટ

બુટસ્ટ્રેપ ગ્રીડ સિસ્ટમ સાથે કામ કરતી વખતે, કૉલમ વર્ગોમાં ફોર્મ ઘટકો મૂકવાની ખાતરી કરો.

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