مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
Check
in English

تیرتے لیبلز

خوبصورتی سے سادہ فارم لیبلز بنائیں جو آپ کے ان پٹ فیلڈز پر تیرتے ہیں۔

مثال

بوٹسٹریپ کے متنی شکل والے فیلڈز کے ساتھ تیرتے لیبلز کو فعال کرنے کے لیے <input class="form-control">اور <label>عناصر کے جوڑے کو لپیٹیں ۔ .form-floatingہر ایک پر A placeholderکی ضرورت ہے <input>کیونکہ ہمارے صرف CSS کے فلوٹنگ لیبلز کا طریقہ :placeholder-shownسیوڈو عنصر استعمال کرتا ہے۔ یہ بھی نوٹ کریں کہ <input>پہلے آنا ضروری ہے تاکہ ہم ایک بہن بھائی سلیکٹر (جیسے، ~) استعمال کر سکیں۔

html
<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 خود بخود اپنی فلوٹ شدہ پوزیشن کے مطابق ہو جائے گا۔

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

فارم کی توثیق کے انداز بھی توقع کے مطابق کام کرتے ہیں۔

html
<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>ہوگی۔

html
<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 کے ذریعے)۔

html
<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تعاون یافتہ نہیں ہے۔

html
<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>سے سادہ متن کی قدر میں ٹوگل کرنے کے لیے مددگار ثابت ہو سکتے ہیں۔

html
<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ہیں۔

@
html
<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۔ اس کا مطلب ہے کہ تاثرات جاوا اسکرپٹ کا استعمال کرتے ہوئے دکھائے جانے کی ضرورت ہوگی۔

@
براہ کرم ایک صارف نام منتخب کریں۔
html
<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>

ترتیب

بوٹسٹریپ گرڈ سسٹم کے ساتھ کام کرتے وقت، کالم کلاسز کے اندر فارم عناصر کو رکھنا یقینی بنائیں۔

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