Bootstrap 5: مجموعة النصوص

مجموعة إدخال

.input-group النوع هو وحدة تحكم، من خلال إضافة أيقونة، نص أو زر أمام أو خلف حقل الإدخال كـ "نص المساعدة" لتحسين إدخال.

لإعداد نمط نص المساعدة المحدد، استخدم .input-group-text نوع:

مثال

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="اسم المستخدم">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="عنوان بريدك الإلكتروني">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

جرب بنفسك

حجم المجموعة الإدخالية

يرجى تحديد .input-group-sm النوع المستخدم للمجموعات الإدخال الصغيرة، والذي يحتوي على: .input-group-lg للمجموعات الإدخال الكبيرة:

مثال

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">صغير</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">افتراضي</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">كبير</span>
  <input type="text" class="form-control">
</div>

جرب بنفسك

عدة إدخالات وأدوات مساعدة

إضافة وحدات إدخال أو أجهزة إضافية متعددة:

مثال

<!-- متعدد وحدات الإدخال -->
<div class="input-group mb-3">
  <span class="input-group-text">اسم الشخص</span>
  <input type="text" class="form-control" placeholder="اللقب">
  <input type="text" class="form-control" placeholder="الاسم">
</div>
<!-- متعدد الأدوات/نص المساعدة -->
<div class="input-group mb-3">
  <span class="input-group-text">أول</span>
  <span class="input-group-text">ثاني</span>
  <span class="input-group-text">ثالث</span>
  <input type="text" class="form-control">
</div>

جرب بنفسك

مجموعة إدخال تحتوي على مربعات الاختيار وأزرار الاختيار

يمكنك أيضًا استخدام مربعات الاختيار أو أزرار الاختيار لتعويض النص:

مثال

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="نص معين">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="نص معين">
</div>

جرب بنفسك

نوع المجموعة النصية

مثال

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">نقرة أساسية</button>
  <input type="text" class="form-control" placeholder="نص معين">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="البحث">
  <button class="btn btn-success" type="submit">اذهب</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="نص معين">
  <button class="btn btn-primary" type="button">موافق</button>
  <button class="btn btn-danger" type="button">إلغاء</button>
</div>

جرب بنفسك

مجموعة إدخال مع زر النزول

أضف زر النزول إلى مجموعة الإدخال. يرجى ملاحظة أنك لا تحتاج إلى وعاء التجميع .dropdown كما في العادة.

مثال

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    زر النزول
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">رابط 1</a></li>
    <li><a class="dropdown-item" href="#">رابط 2</a></li>
    <li><a class="dropdown-item" href="#">رابط 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="اسم المستخدم">
</div>

جرب بنفسك