പ്രധാന ഉള്ളടക്കത്തിലേക്ക് പോകുക ഡോക്സ് നാവിഗേഷനിലേക്ക് പോകുക
in English

ഫ്ലോട്ടിംഗ് ലേബലുകൾ

നിങ്ങളുടെ ഇൻപുട്ട് ഫീൽഡുകൾക്ക് മുകളിലൂടെ ഒഴുകുന്ന മനോഹരമായി ലളിതമായ ഫോം ലേബലുകൾ സൃഷ്ടിക്കുക.

ഉദാഹരണം

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ടെക്‌സ്‌ച്വൽ ഫോം ഫീൽഡുകൾ ഉപയോഗിച്ച് ഫ്ലോട്ടിംഗ് ലേബലുകൾ പ്രവർത്തനക്ഷമമാക്കാൻ ഒരു ജോടിയും ഘടകങ്ങളും <input class="form-control">പൊതിയുക . CSS-മാത്രം ഫ്ലോട്ടിംഗ് ലേബലുകളുടെ ഞങ്ങളുടെ രീതി കപട-ഘടകം ഉപയോഗിക്കുന്നതിനാൽ ഓരോന്നിനും A ആവശ്യമാണ് . നമുക്ക് ഒരു സഹോദര സെലക്‌ടർ ഉപയോഗിക്കാനാകും (ഉദാ, ) ആദ്യം വരേണ്ടത് അത്യാവശ്യമാണ്.<label>.form-floatingplaceholder<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>

തിരഞ്ഞെടുക്കുന്നു

കൂടാതെ , ഫ്ലോട്ടിംഗ് ലേബലുകൾ s- .form-controlൽ മാത്രമേ ലഭ്യമാകൂ . .form-selectഅവ ഒരേ രീതിയിൽ പ്രവർത്തിക്കുന്നു, എന്നാൽ അവയിൽ നിന്ന് വ്യത്യസ്തമായി <input>, അവ എല്ലായ്പ്പോഴും <label>അതിന്റെ ഫ്ലോട്ടഡ് അവസ്ഥയിൽ കാണിക്കും. പിന്തുണയ്‌ക്കാത്തതും തിരഞ്ഞെടുക്കുന്നതും .sizemultiple

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