التلميحات والقوائم الجانبية

<!-- تلميح أساسي --> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-title="هذا تلميح"> مرر فوقي </button> <!-- تهيئة جميع التلميحات --> <script> // يجب تهيئة التلميحات const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]'); const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl)); </script>

<!-- أعلى (افتراضي) --> <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="تلميح في الأعلى"> تلميح في الأعلى </button> <!-- يمين --> <button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="تلميح على اليمين"> تلميح على اليمين </button> <!-- أسفل --> <button type="button" class="btn btn-warning" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="تلميح في الأسفل"> تلميح في الأسفل </button> <!-- يسار --> <button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="تلميح على اليسار"> تلميح على اليسار </button>

<!-- محتوى HTML في التلميح --> <button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>محتوى</em> <strong>HTML</strong>"> تلميح مع HTML </button> <!-- مفعل مخصص --> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-trigger="click" data-bs-title="انقر للإظهار"> تفعيل بالنقر </button> <!-- تكوين جافا سكريبت --> <script> const tooltip = new bootstrap.Tooltip(element, { animation: true, // تفعيل حركة التلاشي delay: { show: 500, hide: 100 }, // تأخيرات الإظهار/الإخفاء (مللي ثانية) html: false, // السماح بمحتوى HTML placement: 'top', // موضع التلميح trigger: 'hover focus', // كيفية تفعيل التلميح title: 'نص التلميح', // محتوى التلميح offset: [0, 8], // الإزاحة من العنصر customClass: 'my-tooltip' // فئة CSS مخصصة }); // إظهار التلميح tooltip.show(); // إخفاء التلميح tooltip.hide(); // التبديل tooltip.toggle(); </script>

<!-- غلف الزر المعطل --> <span class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="زر معطل"> <button class="btn btn-primary" type="button" disabled> زر معطل </button> </span>

<!-- زر التفعيل --> <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample"> فتح القائمة الجانبية </button> <!-- Offcanvas --> <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasExampleLabel">عنوان القائمة</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="إغلاق"></button> </div> <div class="offcanvas-body"> <p>هذا محتوى القائمة الجانبية. يمكنك إضافة أي محتوى هنا.</p> <div class="dropdown mt-3"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"> قائمة منسدلة </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">إجراء</a></li> <li><a class="dropdown-item" href="#">إجراء آخر</a></li> </ul> </div> </div> </div>

<!-- الجانب الأيسر (افتراضي) --> <div class="offcanvas offcanvas-start" id="offcanvasLeft"> <div class="offcanvas-header"> <h5 class="offcanvas-title">قائمة يسارية</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button> </div> <div class="offcanvas-body"> المحتوى ينزلق من اليسار. </div> </div> <!-- الجانب الأيمن --> <div class="offcanvas offcanvas-end" id="offcanvasRight"> <div class="offcanvas-header"> <h5 class="offcanvas-title">قائمة يمينية</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button> </div> <div class="offcanvas-body"> المحتوى ينزلق من اليمين. </div> </div> <!-- أعلى --> <div class="offcanvas offcanvas-top" id="offcanvasTop"> <div class="offcanvas-header"> <h5 class="offcanvas-title">قائمة علوية</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button> </div> <div class="offcanvas-body"> المحتوى ينزلق من الأعلى. </div> </div> <!-- أسفل --> <div class="offcanvas offcanvas-bottom" id="offcanvasBottom"> <div class="offcanvas-header"> <h5 class="offcanvas-title">قائمة سفلية</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button> </div> <div class="offcanvas-body"> المحتوى ينزلق من الأسفل. </div> </div>

<!-- مع خلفية (افتراضي) --> <div class="offcanvas offcanvas-start" data-bs-backdrop="true" data-bs-scroll="false" id="offcanvasWithBackdrop"> <!-- المحتوى --> </div> <!-- بدون خلفية --> <div class="offcanvas offcanvas-start" data-bs-backdrop="false" id="offcanvasWithoutBackdrop"> <!-- المحتوى --> </div> <!-- السماح بتمرير الجسم --> <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="true" id="offcanvasWithScroll"> <!-- المحتوى --> </div> <!-- خلفية ثابتة (لا يمكن الإغلاق بالنقر خارجها) --> <div class="offcanvas offcanvas-start" data-bs-backdrop="static" id="offcanvasStatic"> <!-- المحتوى --> </div>

<!-- شريط تنقل مع Offcanvas --> <nav class="navbar navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">موقعي</a> <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar"> <div class="offcanvas-header"> <h5 class="offcanvas-title">القائمة</h5> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button> </div> <div class="offcanvas-body"> <ul class="navbar-nav justify-content-end flex-grow-1 pe-3"> <li class="nav-item"> <a class="nav-link active" href="#">الرئيسية</a> </li> <li class="nav-item"> <a class="nav-link" href="#">حول</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> الخدمات </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">تصميم الويب</a></li> <li><a class="dropdown-item" href="#">التطوير</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">اتصل</a> </li> </ul> <form class="d-flex mt-3" role="search"> <input class="form-control me-2" type="search" placeholder="بحث"> <button class="btn btn-outline-success" type="submit">بحث</button> </form> </div> </div> </div> </nav>

<script> // الحصول على عنصر القائمة الجانبية const offcanvasEl = document.getElementById('myOffcanvas'); // إنشاء نسخة من القائمة مع خيارات const offcanvas = new bootstrap.Offcanvas(offcanvasEl, { backdrop: true, // إظهار الخلفية keyboard: true, // الإغلاق بمفتاح ESC scroll: false // تعطيل تمرير الجسم }); // إظهار القائمة offcanvas.show(); // إخفاء القائمة offcanvas.hide(); // التبديل offcanvas.toggle(); // مستمعي الأحداث offcanvasEl.addEventListener('show.bs.offcanvas', function (event) { console.log('القائمة على وشك الظهور'); }); offcanvasEl.addEventListener('shown.bs.offcanvas', function (event) { console.log('القائمة ظهرت بالكامل'); }); offcanvasEl.addEventListener('hide.bs.offcanvas', function (event) { console.log('القائمة على وشك الاختفاء'); }); offcanvasEl.addEventListener('hidden.bs.offcanvas', function (event) { console.log('القائمة اختفت بالكامل'); }); </script>

<!-- Offcanvas فقط على الشاشات الصغيرة --> <div class="offcanvas-lg offcanvas-start" id="responsiveOffcanvas"> <div class="offcanvas-header"> <h5 class="offcanvas-title">قائمة متجاوبة</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button> </div> <div class="offcanvas-body"> <p>على الشاشات الكبيرة (≥992px)، يظهر هذا كمحتوى عادي.</p> <p>على الشاشات الأصغر، يتصرف كقائمة جانبية.</p> </div> </div> <!-- الفئات المتجاوبة المتاحة --> <!-- offcanvas-sm, offcanvas-md, offcanvas-lg, offcanvas-xl, offcanvas-xxl -->