تیرتے لیبلز
خوبصورتی سے سادہ فارم لیبلز بنائیں جو آپ کے ان پٹ فیلڈز پر تیرتے ہیں۔
مثال
بوٹسٹریپ کے متنی شکل والے فیلڈز کے ساتھ تیرتے لیبلز کو فعال کرنے کے لیے <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 .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;