تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
in English

مقدمة

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

على هذه الصفحة

بداية سريعة

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

CSS

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

شبيبة

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

حزمة

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

متفرق

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

الوحدات

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

عناصر

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

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

نموذج المبتدئين

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

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

جلوبالس مهمة

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

نوع مستند HTML5

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

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

علامة وصفية سريعة الاستجابة

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

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

يمكنك رؤية مثال على ذلك عمليًا في قالب البدء .

حجم الصندوق

لمزيد من التحجيم المباشر في 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 .

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

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

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

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

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

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