مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
in English

سچل ليبل

خوبصورت سادو فارم ليبل ٺاھيو جيڪي توھان جي ان پٽ فيلڊن تي فلوٽ ٿين.

مثال

بوٽ اسٽريپ جي متن واري فارم فيلڊن سان سچل ليبلز کي فعال ڪرڻ لاءِ هڪ جوڙو <input class="form-control">۽ <label>عنصرن کي لپايو. .form-floatingA placeholderجي ضرورت آهي هر هڪ تي <input>جيئن اسان جو طريقو CSS-صرف سچل ليبل استعمال ڪري ٿو :placeholder-shownpseudo-element. اهو پڻ نوٽ ڪريو ته <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>

Textareas

ڊفالٽ طور، <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>

توهان جي تي هڪ رواج جي اوچائي مقرر ڪرڻ لاء، خاصيت <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;