انتقل إلى المحتوى الرئيسي انتقل إلى التنقل في المستندات
View on GitHub

مقدمة

ابدأ مع Bootstrap, اطار الأكثر شهرة في العالم لبناء متجاوب, مواقع الجوال أولاً, مع jsDelivr وصفحة بداية النموذج.

بداية سريعة

تتطلع إلى إضافة Bootstrap بسرعة إلى مشروعك؟ استخدم jsDelivr، CDN مجاني مفتوح المصدر. تستخدم مدير الحزم أو تحتاج إلى تنزيل ملفات المصدر؟ توجه إلى صفحة تنزيلات.

CSS

انسخ والصق ورقة الأنماط <link> داخل علامة <head> قبل كل أوراق الأنماط الأخرى لتحميل CSS الخاص بنا.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-LPvXVVAlyPoBSGkX8UddpctDks+1P4HG8MhT7/YwqHtJ40bstjzCqjj+VVVDhsCo" crossorigin="anonymous">

JS

العديد من عناصر الخاصة بنا تتطلب استخدام JavaScript لتعمل. على وجه التحديد، أنها تتطلب إضافات JavaScript الخاصة بنا و Popper. ضع واحد من <script> الأتى قرب نهاية صفحاتك، قبل علامة الإغلاق </body>، لتمكينهم.

حزمة

تشمل كل اضافة Bootstrap JavaScript والاعتماد مع واحد من حزمتين الخاصة بنا كل من bootstrap.bundle.js وbootstrap.bundle.min.js يشمل Popper لتلميحات الأدوات والقوائم المنبثقة. لمزيد من المعلومات حول ما يشمله في Bootstrap، يرجى الاطلاع على المحتويات الخاص بنا.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

منفصل

اذا قررت الذهاب مع المنفصل scripts المحلول، يجب أن يأتي Popper أولاً (إذا كنت تستخدم تلميحات الأدوات أو القوائم المنبثقة)، وثم إضافات JavaScript الخاصة بنا.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

الوحدات النمطية

إذا كنت تستخدم <script type="module">، يرجى الرجوع إلى قسم استخدام Bootstrap كوحدة نمطية الخاص بنا.

عناصر

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

إظهار العناصر التي تتطلب JavaScript
  • تنبيهات للرفض
  • أزرار لتبديل الحالات ووظائف مربع الاختيار/الراديو
  • دائري لجميع سلوكيات الانزلاق، عناصر التحكم، والمؤشرات
  • انهيار لتبديل رؤية المحتوى
  • القوائم المنسدلة للعرض والتمركز (يتطلب أيضًا Popper)
  • وسائط العرض، التمركز، وسلوك التمرير
  • نافبار لتوسيع إضافة Collapse الخاصة بنا لتنفيذ السلوك المتجاوب
  • نخب للعرض والرفض
  • تلميحات الأدوات والقوائم المنبثقة للعرض والتمركز (يتطلب أيضًا Popper)
  • متتبع التمرير لتحديثات سلوك التمرير والتنقل

نموذج البداية

تأكد من أن صفحاتك معدّة مع أحدث معايير التصميم والتطوير. هذا يعني استخدام نوع مستند HTML5 وتشمل علامة meta لإطار العرض للسلوكيات المتجاوبة المناسبة. ضع كل ذلك معًا وستظهر صفحاتك على النحو التالي:

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <!-- علامات meta المطلوبة -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.rtl.min.css" rel="stylesheet" integrity="sha384-LPvXVVAlyPoBSGkX8UddpctDks+1P4HG8MhT7/YwqHtJ40bstjzCqjj+VVVDhsCo" crossorigin="anonymous">

    <title>مرحبا بالعالم!</title>
  </head>
  <body>
    <h1>مرحبا بالعالم!</h1>

    <!-- اختيار JavaScript; اختر واحد من الاثنين! -->

    <!-- الخيار 1: حزمة Bootstrap مع Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

    <!-- الخيار 2: منفصل Popper وBootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    -->
  </body>
</html>

للخطوات التالية، قم بزيارة مستندات التخطيط أو الأمثلة الرسمية الخاصة بنا للبدء في وضع محتوى وعناصر موقعك.

الأمور العامّة الأساسية

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

نوع مستند HTML5

يتطلب Bootstrap الاستخدام لنوع المستند HTML5. بدونه، سترى بعض التصميم التقليدي غير المكتمل، لكن شمله لا ينبغي أن يسبب أي عوائق كبيرة.

<!doctype html>
<html lang="ar" dir="rtl">
  ...
</html>

علامة meta متجاوبة

تم تطوير Bootstrap جوال أولاً، هي استراتيجية التي نقوم من خلالها بتحسين التعليمات البرمجية للأجهزة المحمولة أولاً وثم توسيع نطاق العناصر عند الضرورة باستخدام استعلامات وسائط CSS. لتأكد من التقديم الصحيح والتكبير باللمس لجميع الأجهزة، أضف علامة meta لإطار عرض المتجاوب الى <head> الخاصة بك.

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

يمكنك رؤية مثال على ذلك عمل في نموذج البداية.

خاصية Box-sizing

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

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

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

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

تعلم المزيد حول نموذج الصندوق والتحجيم في CSS Tricks.

اعادة التشغيل

لتحسين العرض عبر المستعرضات، نحن نستخدم اعادة التشغيل لتصحيح التناقضات عبر المتصفحات والأجهزة في حين توفير عمليات إعادة تعيين أكثر إبداءً لرأي عناصر HTML المشتركة.

تواصل اجتماعي

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

  • اقرأ واشترك في مدونة Bootstrap الرسمية.
  • انضم غرفة Slack الرسمية.
  • الدردشة مع زميل Bootstrappers في IRC. على الخادم irc.freenode.net، في القناة ##bootstrap.
  • يمكن العثور على مساعدة التنفيذ في Stack Overflow (موسومة bootstrap-5).
  • ينبغي على المطورين استخدام الكلمة الأساسية bootstrap على الحزم التي تعدل أو تضيف إلى الوضائف Bootstrap عند التوزيع من خلال npm أو آليات تسليم مماثلة لتحقيق أقصى قدر من قابلية الاكتشاف.

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