तैरते लेबल
खूबसूरती कन्नै सरल फार्म लेबल बनाओ जेह् ड़े तुंदे इनपुट फील्डें उप्पर तैह् त होंदे न।
मसाल
बूटस्ट्रैप दे पाठ रूप फील्डें कन्नै फ्लोटिंग लेबल गी सक्षम करने आस्तै <input class="form-control">
ते <label>
तत्वें दी इक जोड़ी गी लपेटो . हर इक पर .form-floating
ए दी लोड़ ऐ की जे साढ़े CSS-केवल फ्लोटिंग लेबल दी विधि छद्म-तत्व दा उपयोग करदी ऐ। एह् बी ध्यान रखो जे पैह् ले आना जरूरी ऐ तां जे अस इक भ्राऽ चयनकर्ता दा उपयोग करी सकचे (जियां, ) ।placeholder
<input>
: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>
एस अपने आप गै उंदी तैह् त स्थिति च समायोजित होग।
<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>
एस कन्नै एस .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
। वे एक ही तयह से काभ कयते शैं, रेककन <input>
एस के उल्टे, वे हभशाॊ ददखा देंगे <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;