Bootstrap 4



bootstrap

Bootstrap 4

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

بداية سريعة

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

CSS

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS

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

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

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

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

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

قالب البدء

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

<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

هذا هو كل ما تحتاجه لمتطلبات الصفحة بشكل عام. قم بزيارة مستندات Layout أو الأمثلة الرسمية لدينا للبدء في وضع محتوى ومكونات موقعك.

globals مهمة

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

HTML5 doctype

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

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

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

تم تطوير Bootstrap mobile أولاً ، وهي إستراتيجية نقوم من خلالها بتحسين الكود للأجهزة المحمولة أولاً ، ثم نرفع مستوى المكونات حسب الضرورة باستخدام استعلامات CSS للوسائط. لضمان العرض المناسب وتكبير الزوم لجميع الأجهزة ، أضف العلامة الوصفية لـ viewport المتجاوبة إلى <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 box-sizing المحدد box-sizing ذلك. .selector-for-some-widget .

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

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

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

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

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

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

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