طريقة انشاء زر بقائمة منسدلة تحتوي على عدة ازرار أخرى

يمكن إنشاء زر يحتوي على قائمة من خلال استخدام مكونات Bootstrap. يمكن استخدام الفئة "dropdown-toggle" لتنشيط القائمة عند النقر على الزر، ويمكن استخدام الفئة "dropdown-menu" لتحديد عناصر القائمة.

فيما يلي مثال على كيفية إنشاء زر يحتوي على قائمة باستخدام Bootstrap:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <!-- يمكنك استخدام الثلاث نقاط الأفقية هنا -->
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">زر 1</a>
    <a class="dropdown-item" href="#">زر 2</a>
  </div>
</div>

يمكن استخدام الأيقونات بدلاً من النقاط الأفقية باستخدام العنصر `<i>`، ويمكن تخصيص الأيقونات باستخدام فئات Bootstrap مثل "fas" و "fa-caret-down" و "fa-ellipsis-h"؛ على سبيل المثال:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fas fa-ellipsis-h"></i>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">زر 1</a>
    <a class="dropdown-item" href="#">زر 2</a>
  </div>
</div>

يرجى ملاحظة أنه يجب تضمين مكتبة Bootstrap و FontAwesome في مشروعك لاستخدام هذه الأيقونات والفئات.

عليكم السلام ورحمة الله وبركاته،

يمكنك استخدام الصنف dropdown من bootstrap لعمل قائمة منسدلة ووضع أيقونة ثلاثة نقاط أفقية لفتحها على الشكل التالي:

<div class="dropdown">
    <button class="btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
  <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
</svg>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">تعديل</a></li>
        <li><hr class="dropdown-divider border-top border-secondary"></li>
        <li><a class="dropdown-item text-danger" href="#">حذف</a></li>
    </ul>
</div>

بالتوفيق.

إذا كنت ترغب في إنشاء زر مع ثلاث نقاط أفقية يُطلق عليها القائمة المنبثقة عند النقر عليها، يمكنك استخدام مكوّن القائمة المنبثقة المتاح في مكتبة Bootstrap. هنا هو كيف يمكنك القيام بذلك:

• قم بتضمين مكتبة Bootstrap في مشروعك. يمكنك تنزيلها واستخدامها من موقع Bootstrap الرسمي أو استخدام CDN.
• استخدم العنصر div لإنشاء زر الثلاث نقاط. قم بإضافة الكلاس "dropdown" إلى العنصر div لتطبيق الأنماط اللازمة من Bootstrap.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <!-- زر الثلاث نقاط -->
    ...
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <!-- محتوى القائمة المنبثقة -->
    <button type="button" class="dropdown-item" href="#">زر 1</button>
    <button type="button" class="dropdown-item" href="#">زر 2</button>
  </div>
</div>

• قم بتعديل المحتوى داخل زر الثلاث نقاط بحسب احتياجاتك، مثل استخدام رمز أيقونة ثلاث نقاط.
• قم بإضافة العناصر التي ترغب في وضعها داخل القائمة المنبثقة بين عناصر div ذات الكلاس "dropdown-menu". يمكنك استخدام العنصر button لإنشاء زر داخل القائمة المنبثقة.

تأكد من أنك قمت بتضمين ملفات JavaScript وCSS الخاصة بـ Bootstrap في مشروعك لتفعيل الوظائف اللازمة.

بعد تنفيذ الخطوات السابقة وتشغيل مشروعك، عند النقر على زر الثلاث نقاط، ستظهر القائمة المنبثقة التي تحتوي على الأزرار الأخرى.

شكرًا لكم