तैरत लेबल बा
खूबसूरती से सरल फॉर्म लेबल बनाईं जवन रउरा इनपुट फील्डन पर तैरत होखे.
उदाहरण
बूटस्ट्रैप के टेक्स्टुअल फॉर्म फील्ड सभ के साथ फ्लोटिंग लेबल सभ के सक्षम करे खातिर <input class="form-control">
आ <label>
तत्व सभ के एगो जोड़ी लपेटीं । .form-floating
हर एक पर ए 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 with .form-control
के ऊंचाई s के समान होई <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
, फ्लोटिंग लेबल खाली s पर उपलब्ध बा .form-select
। इ लोग एकही तरीका से काम करेला, लेकिन <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;