फ्लोटिंग लेबल
तुमच्या इनपुट फील्डवर तरंगणारी सुंदर सोपी फॉर्म लेबले तयार करा.
उदाहरण
बूटस्ट्रॅपच्या मजकूर फॉर्म फील्डसह फ्लोटिंग लेबल्स सक्षम करण्यासाठी <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>
मांडणी
बूटस्ट्रॅप ग्रिड प्रणालीसह कार्य करताना, स्तंभ वर्गांमध्ये फॉर्म घटक ठेवण्याची खात्री करा.
<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;