ತೇಲುವ ಲೇಬಲ್ಗಳು
ನಿಮ್ಮ ಇನ್ಪುಟ್ ಕ್ಷೇತ್ರಗಳ ಮೇಲೆ ತೇಲುವ ಸುಂದರವಾಗಿ ಸರಳವಾದ ಫಾರ್ಮ್ ಲೇಬಲ್ಗಳನ್ನು ರಚಿಸಿ.
ಉದಾಹರಣೆ
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಪಠ್ಯ ರೂಪ ಕ್ಷೇತ್ರಗಳೊಂದಿಗೆ ತೇಲುವ ಲೇಬಲ್ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಒಂದು ಜೋಡಿ <input class="form-control">
ಮತ್ತು <label>
ಅಂಶಗಳನ್ನು ಸುತ್ತಿ. CSS-ಮಾತ್ರ ಫ್ಲೋಟಿಂಗ್ ಲೇಬಲ್ಗಳ ನಮ್ಮ ವಿಧಾನವು ಹುಸಿ-ಅಂಶವನ್ನು ಬಳಸುವುದರಿಂದ ಪ್ರತಿಯೊಂದಕ್ಕೂ .form-floating
A ಅಗತ್ಯವಿದೆ. ನಾವು ಮೊದಲು ಬರಬೇಕು ಆದ್ದರಿಂದ ನಾವು ಒಡಹುಟ್ಟಿದವರ ಆಯ್ಕೆಯನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು ಎಂಬುದನ್ನು ಗಮನಿಸಿ (ಉದಾ, ).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>
s ಜೊತೆಗಿನ .form-control
ಎತ್ತರವು <input>
s ನಂತೆಯೇ ಇರುತ್ತದೆ.
<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;