ප්‍රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
Check
in English

පාවෙන ලේබල්

ඔබේ ආදාන ක්ෂේත්‍ර මත පාවෙන අලංකාර සරල ආකෘති ලේබල සාදන්න.

උදාහරණයක්

Bootstrap හි පාඨ ආකෘති ක්ෂේත්‍ර සමඟ පාවෙන ලේබල සබල කිරීමට යුගලයක් <input class="form-control">සහ <label>මූලද්‍රව්‍ය ඔතා. CSS-පමණක් පාවෙන ලේබලවල අපගේ ක්‍රමය ව්‍යාජ මූලද්‍රව්‍යය භාවිතා කරන බැවින් .form-floatingA placeholderඑකක් අවශ්‍ය වේ. අපට සහෝදර තේරීම් කාරකයක් භාවිතා කළ හැකි වන පරිදි පළමුව පැමිණිය යුතු බව සලකන්න (උදා, ).<input>:placeholder-shown<input>~

html
<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>ස්වයංක්‍රීයව ඒවායේ පාවෙන ස්ථානයට ගැලපේ.

html
<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>

පෝරම වලංගු කිරීමේ ශෛලීන් ද අපේක්ෂා කළ පරිදි ක්‍රියා කරයි.

html
<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>වේ.

html
<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 හරහා) සකසන්න.

html
<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-selects හි පමණි. ඔවුන් එකම ආකාරයෙන් ක්‍රියා කරයි, නමුත් <input>s මෙන් නොව, ඔවුන් සෑම විටම <label>එහි පාවෙන තත්වය පෙන්වයි. සමඟ තෝරන අතර sizeසහය multipleනොදක්වයි.

html
<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>

html
<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.

@
html
<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 භාවිතයෙන් ප්‍රතිපෝෂණ පෙන්විය යුතු බවයි.

@
කරුණාකර පරිශීලක නාමයක් තෝරන්න.
html
<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 ජාල පද්ධතිය සමඟ වැඩ කරන විට, තීරු පන්ති තුළ ආකෘති මූලද්රව්ය තැබීමට වග බලා ගන්න.

html
<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;