ತೇಲುವ ಲೇಬಲ್‌ಗಳು

ನಿಮ್ಮ ಇನ್‌ಪುಟ್ ಕ್ಷೇತ್ರಗಳ ಮೇಲೆ ತೇಲುವ ಸುಂದರವಾಗಿ ಸರಳವಾದ ಫಾರ್ಮ್ ಲೇಬಲ್‌ಗಳನ್ನು ರಚಿಸಿ.

ಈ ಪುಟದಲ್ಲಿ

ಉದಾಹರಣೆ

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