ابدأ مع Bootstrap

الـ Bootstrap هو مجموعة أدوات واجهة أمامية قوية ومليئة بالميزات. يمكنك بناء أي شيء من النموذج الأولي إلى الإنتاج في دقائق معدودة.

في هذه الصفحة

بداية سريعة

ابدأ من خلال تضمين الـ CSS والـ JavaScript الخاص بالـ Bootstrap والجاهزين للإنتاج عبر الـ CDN دون الحاجة إلى أي خطوات بناء. شاهد ذلك عملياً من خلال عرض Bootstrap CodePen التوضيحي.

قم بإنشاء ملف index.html جديد في المجلد الرئيسي لمشروعك. قم بتضمين علامة <meta name="viewport"> أيضاً من أجل سلوك متوافق مع الشاشات (Responsive) بشكل صحيح في الأجهزة المحمولة.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

تضمين الـ CSS والـ JS الخاص بالـ Bootstrap. ضع علامة <link> في الـ <head> من أجل الـ CSS الخاص بنا، وعلامة <script> لحزمة الـ JavaScript الخاصة بنا (بما في ذلك Popper لتحديد مواقع القوائم المنسدلة، والنوافذ المنبثقة، وتلميحات الأدوات) قبل إغلاق علامة </body>. تعرف على المزيد حول روابط الـ CDN الخاصة بنا.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
  </body>
</html>

يمكنك أيضاً تضمين Popper والـ JS الخاص بنا بشكل منفصل. إذا كنت لا تخطط لاستخدام dropdowns أو popovers أو tooltips، يمكنك توفير بعض الكيلوبايتات من خلال عدم تضمين Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>

مرحباً بالعالم! (Hello, world!) افتح الصفحة في المتصفح الذي تفضله لترى صفحتك التي تم بناؤها باستخدام الـ Bootstrap. يمكنك الآن البدء في البناء باستخدام الـ Bootstrap من خلال إنشاء الـ layout الخاص بك، وإضافة العشرات من الـ components، والاستفادة من أمثلتنا الرسمية.

روابط CDN

كمرجع، إليك روابط الـ CDN الأساسية لدينا.

الوصف	الرابط
CSS	`https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js`

يمكنك أيضاً استخدام الـ CDN لجلب أي من عمليات البناء الإضافية المدرجة في صفحة المحتويات.

عند استخدام روابط الـ CDN، تأكد من استخدام سمة integrity للتحقق من الملفات والإصدارات الصحيحة. هذه الـ hashes فريدة لكل ملف وإصدار من الـ Bootstrap، لذا عندما تقوم بالتحديث إلى إصدار جديد، تأكد من تحديث سمة integrity أيضاً.

كما نقوم بتضمين سمة crossorigin="anonymous" لمنع أخطاء CORS.

الخطوات التالية

اقرأ المزيد عن بعض إعدادات البيئة العالمية المهمة التي يستخدمها الـ Bootstrap.
اقرأ عما يتضمنه الـ Bootstrap في قسم المحتويات وقائمة المكونات التي تتطلب JavaScript أدناه.
هل تحتاج إلى قوة أكبر؟ فكر في البناء باستخدام الـ Bootstrap من خلال تضمين ملفات المصدر عبر مدير الحزم.
هل تتطلع إلى استخدام الـ Bootstrap كوحدة نمطية (module) باستخدام <script type="module">؟ يرجى الرجوع إلى قسم استخدام Bootstrap كوحدة نمطية.

مكونات JS

هل تتساءل عن المكوّنات التي تتطلب صراحةً استخدام JavaScript و Popper الخاص بنا؟ إذا كنت غير متأكد تماماً من هيكل الصفحة العام، فاستمر في القراءة للحصول على قالب صفحة تجريبي.

الـ Accordions لتوسيع الـ Collapse plugin الخاص بنا.
الـ Alerts من أجل الإغلاق (dismissing).
الأزرار (Buttons) لتبديل الحالات ووظائف الـ checkbox/radio.
الـ Carousel لجميع سلوكيات الشرائح وعناصر التحكم والمؤشرات.
الـ Collapse لتبديل رؤية المحتوى.
الـ Dropdowns للعرض وتحديد الموقع (تتطلب أيضاً Popper)
الـ Modals للعرض وتحديد الموقع وسلوك التمرير.
الـ Navbar لتوسيع الـ Collapse و Offcanvas plugins لتنفيذ السلوكيات المستجيبة.
الـ Navs مع الـ Tab plugin لتبديل ألواح المحتوى (content panes).
الـ Offcanvases للعرض وتحديد الموقع وسلوك التمرير.
الـ Scrollspy لسلوك التمرير وتحديثات التنقل.
الـ Toasts للعرض والإغلاق.
الـ Tooltips والـ popovers للعرض وتحديد الموقع (تتطلب أيضاً Popper).

إعدادات عالمية مهمة

يستخدم الـ Bootstrap مجموعة من الأنماط والإعدادات العالمية المهمة، والتي تهدف جميعها بشكل حصري تقريباً إلى توحيد (normalization) الأنماط عبر المتصفحات المختلفة. دعنا نتعمق في ذلك.

نوع مستند HTML5 (HTML5 doctype)

يتطلب الـ Bootstrap استخدام الـ HTML5 doctype. وبدونه، ستظهر بعض الأنماط الغريبة وغير المكتملة.

<!doctype html>
<html lang="en">
  ...
</html>

وسم الـ Viewport meta

تم تطوير الـ Bootstrap بنهج المحمول أولا، وهي استراتيجية نقوم فيها بتحسين الكود للأجهزة المحمولة أولاً، ثم نقوم بتوسيع المكوّنات حسب الضرورة باستخدام الـ CSS media queries. ولضمان عملية الرندرة (rendering) الصحيحة والتقريب باللمس (touch zooming) لجميع الأجهزة، أضف وسم viewport meta المستجيب إلى الـ <head> الخاص بك.

<meta name="viewport" content="width=device-width, initial-scale=1">

You can see an example of this in action in the quick start.

الـ Box-sizing

من أجل تحديد أحجام أكثر وضوحاً في الـ CSS، نقوم بتحويل قيمة box-sizing العالمية من content-box إلى border-box. وهذا يضمن أن الـ padding لا يؤثر على العرض النهائي المحسوب للعنصر، ولكن قد يتسبب ذلك في مشاكل مع بعض برمجيات الأطراف الثالثة مثل Google Maps ومحرك بحث Google المخصص.

في الحالات النادرة التي تحتاج فيها إلى تخطي هذه القيمة، استخدم شيئاً مثل التالي:

.selector-for-some-widget {
  box-sizing: content-box;
}

مع المقتطف أعلاه، فإن العناصر المتداخلة بما في ذلك المحتوى الذي يتم إنشاؤه عبر ::before و ::after سترث جميعها قيمة box-sizing المحددة لهذا الـ .selector-for-some-widget.

تعرف على المزيد حول نموذج الصندوق (box model) وتحديد الأحجام في CSS Tricks.

Reboot

لتحسين الرندرة (rendering) عبر المتصفحات المختلفة، نستخدم Reboot لتصحيح التناقضات بين المتصفحات والأجهزة مع توفير عمليات إعادة ضبط (resets) أكثر تحديداً لعناصر HTML الشائعة.

المجتمع (Community)

ابقَ على اطلاع دائم بتطور الـ Bootstrap وتواصل مع المجتمع من خلال هذه الموارد المفيدة.

اقرأ واشترك في مدونة Bootstrap الرسمية.
اطرح الأسئلة واستكشف مناقشاتنا على GitHub.
ناقش، واطرح الأسئلة، والمزيد على Discord الخاص بالمجتمع أو subreddit الخاص بـ Bootstrap.
دردش مع زملائك من مستخدمي Bootstrap في IRC. على خادم irc.libera.chat، في قناة #bootstrap.
يمكن العثور على مساعدة في التنفيذ على Stack Overflow (تحت وسم bootstrap-5 (رابط)).
يجب على المطورين استخدام الكلمة المفتاحية bootstrap في الحزم التي تعدل أو تضيف إلى وظائف الـ Bootstrap عند التوزيع من خلال npm أو آليات تسليم مماثلة لتحقيق أقصى قدر من إمكانية الاكتشاف.

يمكنك أيضاً متابعة @getbootstrap on X للحصول على أحدث الأخبار ومقاطع الفيديو الموسيقية الرائعة.