تیرتے لیبلز
خوبصورتی سے سادہ فارم لیبلز بنائیں جو آپ کے ان پٹ فیلڈز پر تیرتے ہیں۔
مثال
بوٹسٹریپ کے متنی شکل والے فیلڈز کے ساتھ تیرتے لیبلز کو فعال کرنے کے لیے <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>
صرف پڑھنے کا سادہ متن
فلوٹنگ لیبل بھی سپورٹ کرتے .form-control-plaintext
ہیں، جو صفحہ کی ترتیب کو متاثر کیے بغیر قابل تدوین <input>
سے سادہ متن کی قدر میں ٹوگل کرنے کے لیے مددگار ثابت ہو سکتے ہیں۔
<div class="form-floating mb-3">
<input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]">
<label for="floatingEmptyPlaintextInput">Empty input</label>
</div>
<div class="form-floating mb-3">
<input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="[email protected]" value="[email protected]">
<label for="floatingPlaintextInput">Input with value</label>
</div>
ان پٹ گروپس
فلوٹنگ لیبل بھی سپورٹ کرتے .input-group
ہیں۔
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<div class="form-floating">
<input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
<label for="floatingInputGroup1">Username</label>
</div>
</div>
استعمال کرتے وقت .input-group
اور .form-floating
فارم کی توثیق کے ساتھ، کو کے -feedback
باہر رکھا جانا چاہیے .form-floating
، لیکن کے اندر .input-group
۔ اس کا مطلب ہے کہ تاثرات جاوا اسکرپٹ کا استعمال کرتے ہوئے دکھائے جانے کی ضرورت ہوگی۔
<div class="input-group has-validation">
<span class="input-group-text">@</span>
<div class="form-floating is-invalid">
<input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required>
<label for="floatingInputGroup2">Username</label>
</div>
<div class="invalid-feedback">
Please choose a username.
</div>
</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">
<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;