تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
in English

تسميات عائمة

قم بإنشاء ملصقات نموذج بسيطة بشكل جميل تطفو فوق حقول الإدخال الخاصة بك.

مثال

قم بلف زوج من العناصر <input class="form-control">وتمكين التسميات العائمة باستخدام حقول النموذج النصية في Bootstrap. مطلوب A في كل منها لأن طريقتنا في التسميات العائمة فقط في CSS تستخدم العنصر الزائف. لاحظ أيضًا أنه يجب أن يأتي أولاً حتى نتمكن من استخدام محدد الأخوة (على سبيل المثال ، ).<label>.form-floatingplaceholder<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 مع .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>

تَخطِيط

عند العمل باستخدام نظام شبكة 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;