بداية الـ (CDN)
قم بتضمين الـ CSS والـ JavaScript المجمعة الخاصة بـ Bootstrap فوراً عبر jsDelivr CDN.
قوالب البدء
أمثلة عملية لاستخدام Bootstrap في أطر عمل JS الشائعة مثل Webpack و Parcel و Vite وغيرها، والتي يمكنك تحريرها في StackBlitz.
الـ (Sass & JS)
استخدم npm لاستيراد وتجميع الـ Sass الخاصة بـ Bootstrap مع Autoprefixer و Stylelint، بالإضافة إلى الـ JavaScript المجمعة الخاصة بنا.
الـ (Sass & ESM JS)
استورد وقم بتجميع الـ Sass الخاصة بـ Bootstrap مع Autoprefixer و Stylelint، وقم بتجميع الـ JavaScript المصدرية الخاصة بنا باستخدام ESM shim.
أوضاع ألوان الـ (Bootstrap)
استورد وقم بتجميع الـ Sass الخاصة بـ Bootstrap مع Stylelint، وأوضاع الألوان الخاصة بـ Bootstrap.
أيقونات الـ (Bootstrap)
استورد وقم بتجميع الـ Sass الخاصة بـ Bootstrap مع Stylelint و PurgeCSS، وأيقونات الـ (Bootstrap) كخط ويب.
الـ (Parcel)
استورد وقم بتجميع الـ Sass والـ JavaScript المصدرية الخاصة بـ Bootstrap عبر Parcel.
الـ (React)
استورد وقم بتجميع الـ Sass والـ JavaScript المصدرية الخاصة بـ Bootstrap مع React و Next.js و React Bootstrap.
الـ (Vite)
استورد وقم بتجميع الـ Sass والـ JavaScript المصدرية الخاصة بـ Bootstrap مع Vite.
الـ (Vue)
استورد وقم بتجميع الـ Sass والـ JavaScript المصدرية الخاصة بـ Bootstrap مع Vue و Vite.
الـ (Webpack)
استورد وقم بتجميع الـ Sass والـ JavaScript المصدرية الخاصة بـ Bootstrap مع Webpack.
قصاصات برمجية
أنماط شائعة لبناء المواقع والتطبيقات التي تعتمد على المكونات والأدوات المساعدة الموجودة مع CSS مخصص والمزيد.
Headers
اعرض علامتك التجارية، والتنقل، والبحث، وأكثر من ذلك باستخدام مكونات الرأس هذه
Heroes
هيئ الصفحة الرئيسية بمكونات الـ heroes التي تتميز بدعوات واضحة لاتخاذ إجراء.
Features
اشرح الميزات أو الفوائد أو التفاصيل الأخرى في محتواك التسويقي.
Sidebars
أنماط تنقل شائعة مثالية للتخطيطات الجانبية (offcanvas) أو التخطيطات متعددة الأعمدة.
Footers
أنهِ كل صفحة بقوة باستخدام تذييل رائع، سواء كان كبيراً أو صغيراً.
Dropdowns
عزز القوائم المنسدلة باستخدام الفلاتر، والأيقونات، والأنماط المخصصة، وأكثر من ذلك.
List groups
وسع مجموعات القوائم باستخدام الأدوات المساعدة والأنماط المخصصة لأي محتوى.
Modals
حول النوافذ المنبثقة (modals) لتخدم أي غرض، من جولات الميزات إلى الحوارات.
Badges
اجعل الشارات تعمل مع HTML داخلي مخصص ومظاهر جديدة.
Breadcrumbs
دمج أيقونات مخصصة وإنشاء مكونات متسلسلة (stepper).
Buttons
أنشئ أزراراً مخصصة لأي حالة استخدام تقريباً باستخدام الأدوات المساعدة.
Jumbotrons
أنشئ نسخاً حديثة من مكون الـ Bootstrap الكلاسيكي.
مكونات مخصصة
مكونات وقوالب جديدة تماماً لمساعدة الأشخاص على البدء بسرعة مع Bootstrap واستعراض أفضل الممارسات للإضافة إلى الإطار البرمجي.
Album
قالب بسيط من صفحة واحدة لمعارض الصور، والمحافظ الإبداعية، وأكثر من ذلك.
Pricing
مثال لصفحة تسعير مبنية باستخدام الـ Cards وتتميز برأس وتذييل مخصصين.
Checkout
نموذج دفع مخصص يعرض مكونات النماذج لدينا وميزات التحقق الخاصة بها.
Product
صفحة تسويقية بسيطة تركز على المنتج مع عمل مكثف على الشبكة والصور.
Cover
قالب من صفحة واحدة لبناء صفحات رئيسية بسيطة وجميلة.
Carousel
خصص شريط التنقل والـ carousel، ثم أضف بعض المكونات الجديدة.
Blog
قالب مدونة يشبه المجلة مع رأس، وتنقل، ومحتوى مميز.
Dashboard
هيكل لوحة تحكم إدارية أساسية مع شريط جانبي وشريط تنقل ثابتين.
Sign-in
تخطيط وتصميم نموذج مخصص لنموذج تسجيل دخول بسيط.
Sticky footer
ربط التذييل بأسفل منطقة العرض عندما يكون محتوى الصفحة قصيراً.
Sticky footer navbar
ربط التذييل بأسفل منطقة العرض مع شريط تنقل علوي ثابت.
Jumbotron
استخدم الأدوات المساعدة لإعادة إنشاء وتحسين الـ jumbotron الخاص بـ Bootstrap 4.
الإطار البرمجي (Framework)
أمثلة تركز على تنفيذ استخدامات المكونات المدمجة التي يوفرها Bootstrap.
Starter template
لا شيء سوى الأساسيات: CSS و JavaScript مجمعة.
Grid
أمثلة متعددة لتخطيطات الشبكة مع جميع المستويات الأربعة، والتداخل، وأكثر من ذلك.
Cheatsheet
مجموعة شاملة من مكونات Bootstrap.
أشرطة التنقل (Navbars)
أخذ مكون شريط التنقل الافتراضي وإظهار كيف يمكن نقله ووضعه وتوسيعة.
Navbars
عرض لجميع خيارات التوافق مع الشاشات (responsive) وخيارات الحاوية لشريط التنقل.
Navbars offcanvas
نفس مثال الـ Navbars، ولكن مع مكون الـ offcanvas الخاص بنا.
Navbar static
مثال واحد لشريط تنقل علوي ثابت مع بعض المحتوى الإضافي.
Navbar fixed
مثال واحد لشريط تنقل علوي ثابت (fixed) مع بعض المحتوى الإضافي.
Navbar bottom
مثال واحد لشريط تنقل سفلي مع بعض المحتوى الإضافي.
Offcanvas navbar
حول شريط التنقل القابل للتوسيع إلى قائمة offcanvas منزلقة (لا يستخدم مكون الـ offcanvas الخاص بنا).
الإتجاه (RTL)
شاهد نسخة RTL من Bootstrap قيد التشغيل مع هذه الأمثلة المعدلة من فئات مختلفة.
Album RTL
قالب بسيط من صفحة واحدة لمعارض الصور، والمحافظ الإبداعية، وأكثر من ذلك.
Checkout RTL
نموذج دفع مخصص يعرض مكونات النماذج لدينا وميزات التحقق الخاصة بها.
Carousel RTL
خصص شريط التنقل والـ carousel، ثم أضف بعض المكونات الجديدة.
Blog RTL
قالب مدونة يشبه المجلة مع رأس، وتنقل، ومحتوى مميز.
Dashboard RTL
هيكل لوحة تحكم إدارية أساسية مع شريط جانبي وشريط تنقل ثابتين.
Cheatsheet RTL
مجموعة شاملة من مكونات Bootstrap، نسخة RTL.
