පාවෙන ලේබල්
ඔබේ ආදාන ක්ෂේත්ර මත පාවෙන අලංකාර සරල ආකෘති ලේබල සාදන්න.
උදාහරණයක්
Bootstrap හි පාඨ ආකෘති ක්ෂේත්ර සමඟ පාවෙන ලේබල සබල කිරීමට යුගලයක් <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
දැනටමත් අර්ථ දක්වා ඇති විට, s <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>
Textareas
පෙරනිමියෙන්, <textarea>
s with 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>
සරල පෙළ කියවීමට පමණි
පාවෙන ලේබල ද සහය දක්වයි , එය පිටු සැකැස්මට බලපාන්නේ නැතිව සංස්කරණය කළ හැකි සිට සරල පෙළ අගයකට මාරු කිරීම .form-control-plaintext
සඳහා උපකාරී වේ .<input>
<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
.
<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
පෝරමය වලංගු කිරීම සමඟ, එය -feedback
පිටතින් තැබිය යුතුය .form-floating
, නමුත් ඇතුළත .input-group
. මෙයින් අදහස් කරන්නේ javascript භාවිතයෙන් ප්රතිපෝෂණ පෙන්විය යුතු බවයි.
<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 ජාල පද්ධතිය සමඟ වැඩ කරන විට, තීරු පන්ති තුළ ආකෘති මූලද්රව්ය තැබීමට වග බලා ගන්න.
<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;