Source

مقدمة

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

بداية سريعة

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

CSS

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

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

شبيبة

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

نحن نستخدم البنية النحيفة لـ jQuery ، لكن النسخة الكاملة مدعومة أيضًا.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

لدينا bootstrap.bundle.jsوتشمل bootstrap.bundle.min.jsPopper ، ولكن ليس jQuery . لمزيد من المعلومات حول ما هو مدرج في Bootstrap ، يرجى الاطلاع على قسم المحتويات لدينا .

إظهار المكونات التي تتطلب JavaScript
  • تنبيهات للرفض
  • أزرار لتبديل الحالات ووظائف مربع الاختيار / الراديو
  • دائري لجميع سلوكيات الشرائح ، وعناصر التحكم ، والمؤشرات
  • تصغير لتبديل رؤية المحتوى
  • القوائم المنسدلة للعرض وتحديد المواقع (تتطلب أيضًا Popper.js )
  • نماذج لعرض السلوك وتحديد المواقع والتمرير
  • Navbar لتوسيع البرنامج المساعد Collapse لتنفيذ السلوك المتجاوب
  • تلميحات الأدوات والأجزاء المنبثقة للعرض وتحديد المواقع (يتطلب أيضًا Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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 وتواصل مع المجتمع بهذه الموارد المفيدة.

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

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