ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
in English

ተንሳፋፊ መለያዎች

በግቤት መስኮችዎ ላይ የሚንሳፈፉ በሚያምር ቀላል የቅጽ መለያዎችን ይፍጠሩ።

በዚህ ገጽ ላይ

ለምሳሌ

ተንሳፋፊ መሰየሚያዎችን ከBootstrap የጽሑፍ ቅጽ መስኮች ጋር ለማንቃት ጥንድ <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>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 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>

ይመርጣል

ከ ሌላ ፣ ተንሳፋፊ መለያዎች በ s .form-controlላይ ብቻ ይገኛሉ ። .form-selectበተመሳሳይ መንገድ ይሰራሉ፣ ግን እንደ ኤስ ሳይሆን <input>፣ ሁልጊዜም <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>

አቀማመጥ

ከ 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" 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;