in English

مقدمة

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

بداية سريعة

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

CSS

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

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

شبيبة

تتطلب العديد من مكوناتنا استخدام JavaScript لتعمل. على وجه التحديد ، فهي تتطلب jQuery و Popper ومكونات JavaScript الإضافية الخاصة بنا. نحن نستخدم البنية النحيفة لـ jQuery ، لكن النسخة الكاملة مدعومة أيضًا.

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

حزمة

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

متفرق

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

عناصر

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

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

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

تأكد من إعداد صفحاتك بأحدث معايير التصميم والتطوير. وهذا يعني استخدام نوع مستند 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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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, shrink-to-fit=no">

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

حجم الصندوق

لمزيد من التحجيم المباشر في 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-4).
  • يجب على المطورين استخدام الكلمة الأساسية bootstrapفي الحزم التي تعدل أو تضيف إلى وظائف Bootstrap عند التوزيع من خلال npm أو آليات التسليم المماثلة لتحقيق أقصى قدر من الاكتشاف.

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

CSPs و SVGs المدمجة

تشتمل العديد من مكونات Bootstrap على SVGs مضمنة في CSS لدينا لتصميم المكونات باستمرار وبسهولة عبر المتصفحات والأجهزة. بالنسبة للمؤسسات التي لديها تكوينات أكثر صرامة لـ CSP ، قمنا بتوثيق جميع مثيلات SVGs المضمنة الخاصة بنا (والتي يتم تطبيقها جميعها عبر background-image) حتى تتمكن من مراجعة خياراتك بشكل أكثر شمولاً.

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