عرض مصدر Bootstrap/introduction

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

إضافة Bootstrap إلى مشروعك

هل تبحث عن طريقة سريعة لإضافة Bootstrap إلى مشروعك؟ استخدم BootstrapCDN، الذي توفِّره MaxCDN مجانًا. هل تستخدم مدير حزم أو تحتاج لتنزيل الملفات المصدرية؟ توجّه إلى [https://getbootstrap.com/docs/4.0/getting-started/download/ صفحة التنزيلات].

== CSS ==
انسخ وسم <code>[[HTML/link|<link>]]</code> الخاصّ بصفحة الأنماط وألصقه في محتوى الوسم <code>[[HTML/head|<head>]]</code> قبل جميع صفحات الأنماط الأخرى لتحميل صفحة الأنماط الخاصّة بإطار العمل Bootstrap.<syntaxhighlight lang="html">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</syntaxhighlight>

== JavaScript ==
تحتاج عناصر عدّة من إطار العمل Bootstrap إلى استخدام [[JavaScript]] لتؤدّي وظيفتها؛ خصوصًا [https://jquery.com/ jQuery] و [https://popper.js.org/ Popper.js] وملحقات JavaScript الخاصّة بإطار العمل. ضع وسوم <code>[[HTML/script|<script>]]</code> التالية في نهاية صفحتك، قبل وسم الإغلاق <code>[[HTML/body|<‎/body>]]</code> تمامًا، لتفعيل عناصر إطار العمل التي تحتاج JavaScript. يجب تضمين jQuery أولًا، تليها Popper.js ثم ملحقات JavaScript. يستخدم إطار العمل [https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/ النسخة الخفيفة من jQuery]، إلا أنه يدعم كذلك النسخة الكاملة.<syntaxhighlight lang="html">
<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>
</syntaxhighlight>في ما يلي عناصر إطار العمل التي يتطلّب عملها ملحقات JavaScript الخاصّة بإطار العمل Bootstrap:
* تنبيهات الإخفاء
* أزرار الانتقاء ([[HTML/input/radio|radio]])، وصناديق التأشير ([[HTML/input/checkbox|checkbox]])
* العروض المتكرّرة Carousel لكل ما يتعلّق بشرائح العرض من أزرار تحكم ومؤشرات
* التقلّصات Collapse للتغيير بين إظهار المحتوى وإخفائه
* القوائم المنسدلة Dropdowns للعرض والتموضع (تتطلّب [https://popper.js.org/ Popper.js])
* النوافذ الشرطية Modals للعرض، التموضع والتمرير
* شريط التصفّح navbar لتمديد مُلحق Collapse من أجل تنفيذ سلوك متجاوب
* التلميحات Tooltips والتلميحات المنبثقة Popovers للعرض والتموضع (تتطلّب [https://popper.js.org/ Popper.js])
* رقيب التمرير Scrollspy لسلوك التمرير والتحديث أثناء التصفّح.

== قالب ابتدائي ==
تأكد من أن صفحة الويب التي تريد كتابتها معدّة لتتوافق مع أحدث معايير التصميم والتطوير. أي أنها تستخدم نوع المستندات [[HTML5]] (أي HTML5 doctype) وتتضمّن وسم بيانات وصفية (العنصر <code>[[HTML/meta|<meta>]]</code>) من النوع viewport لسلوك متجاوب صحيح. ضع جميع العناصر سالفة الذكر معًا وستحصُل على صفحة تشبه التالي:<syntaxhighlight lang="html">
<!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>

</syntaxhighlight>

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

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

=== نوع المستند HTML5 ===
يتطلّب إطار العمل Bootstrap استخدام [[HTML5]] الذي بدونه ستظهر تنسيقات غريبة وغير مكتملة. يجدر بتضمين نوع المستند [[HTML5]] ألا يتسبّب في أي مشاكل ملحوظة.<syntaxhighlight lang="html">
<!doctype html>
<html lang="en">
  ...
</html>
</syntaxhighlight>

=== إطار عرض متجاوب ===
يُطوَّر Bootstrap وفق مبدأ الجوّال أولًا، الذي يتمثّل في تحسين الشفرة البرمجيّة لتعمل على الأجهزة الجوّالة أولًا، ثم استخدام استعلامات الوسائط في [[CSS]] لتكبير أحجام العناصر وفق الحاجة. تأكّد من إضافة وسم بيانات وصفيّة من النوع viewport في الوسم <code>[[HTML/head|<head>]]</code> للحصول على ميزة التكبير أو التصغير باللمس ولتعرض عرضًا سليمًا على جميع الأجهزة.<syntaxhighlight lang="html">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</syntaxhighlight>يمكنك رؤية أمثلة على هذا الاستخدام في [https://docs.google.com/document/d/1ufY2s5qf9oLtJ8oU8iuczmgTinvISk4RGFtV3ltkF1E/edit#bookmark=id.3dy6vkm القالب الابتدائي].

=== الخاصيّة Box-sizing ===
من أجل تحديد مباشر للأبعاد فإن Bootstrap يستخدم القيمة <code>content-box</code> للخاصيّة <code>[[CSS/box-sizing|box-sizing]]</code> بدلًا من <code>border-box</code>، ممّا يضمن أن الحواشي (<code>[[CSS/padding|padding]]</code>) لا تؤثّر على حساب العرض النهائي للعنصر؛ إلا أن هذا الأمر يمكن أن يتسبّب في مشاكل مع برامج طرف ثالث مثل خرائط Google ومحرّك Google للبحث المُخصَّص.

استخدم الشفرة التالية لتجاوز السلوك المُشار إليه في الحالات القليلة التي تحتاج فيها لذلك:<syntaxhighlight lang="css">
.selector-for-some-widget {
  box-sizing: content-box;
}
</syntaxhighlight>

سينتُج عن الشفرة السابقة أن ترِث العناصر المتداخلة -بما ذلك المحتوى المُولَّد عبر الصنفين الزائفين <code>[[CSS/::before|‎::before]]</code> و <code>[[CSS/::after|‎::after]]</code>- قيمة <code>[[CSS/box-sizing|box-sizing]]</code> المحدَّدة للعنصُر <code>‎.selector-for-some-widget</code>.

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

== مصادر ==
* [https://getbootstrap.com/docs/4.0/getting-started/introduction/ صفحة Introduction في توثيق Bootstrap].
[[تصنيف:Bootstrap]]