سچل ليبل
خوبصورت سادو فارم ليبل ٺاھيو جيڪي توھان جي ان پٽ فيلڊن تي فلوٽ ٿين.
مثال
بوٽ اسٽريپ جي متن واري فارم فيلڊن سان سچل ليبلز کي فعال ڪرڻ لاءِ هڪ جوڙو <input class="form-control">
۽ <label>
عنصرن کي لپايو. .form-floating
A placeholder
جي ضرورت آهي هر هڪ تي <input>
جيئن اسان جو طريقو CSS-صرف سچل ليبل استعمال ڪري ٿو :placeholder-shown
pseudo-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-select
s تي موجود آهن. اھي ساڳيء طرح ڪم ڪن ٿا، پر <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;