मुख्य सामग्री पर जाएँ docs नेविगेशनं प्रति गच्छतु
Check
in English

प्लवमान लेबल

सुन्दरं सरलं रूपलेबलं रचयन्तु ये भवतः निवेशक्षेत्रेषु प्लवन्ति ।

इस पृष्ठ पर

उदाहरण

Bootstrap इत्यस्य पाठ्यरूपक्षेत्रैः सह प्लवमानलेबल् सक्षमीकरणाय <input class="form-control">and <label>elements इत्यस्य युग्मं लपेटयन्तु । .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 with 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 इत्यस्य विपरीतम्, ते सर्वदा the <label>in its floated state दर्शयिष्यन्ति। सह चयनं करोति 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रूपप्रमाणीकरणेन सह, the -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>

प्रारूपं

Bootstrap grid system इत्यनेन सह कार्यं कुर्वन्, column classes इत्यस्य अन्तः form elements अवश्यं स्थापयन्तु ।

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;