الفرق بين المراجعتين لصفحة: «Bootstrap/introduction»

مراجعة 03:28، 10 مارس 2018

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

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

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

CSS

انسخ وسم <link> الخاصّ بصفحة الأنماط وألصقه في محتوى الوسم <head> قبل جميع صفحات الأنماط الأخرى لتحميل صفحة الأنماط الخاصّة بإطار العمل Bootstrap.

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

JavaScript

تحتاج عناصر عدّة من إطار العمل Bootstrap إلى استخدام JavaScript لتؤدّي وظيفتها؛ خصوصًا jQuery و Popper.js وملحقات JavaScript الخاصّة بإطار العمل. ضع وسوم <script> التالية في نهاية صفحتك، قبل وسم الإغلاق <‎/body> تمامًا، لتفعيل عناصر إطار العمل التي تحتاج JavaScript. يجب تضمين jQuery أولًا، تليها Popper.js ثم ملحقات JavaScript. يستخدم إطار العمل النسخة الخفيفة من 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>

في ما يلي عناصر إطار العمل التي يتطلّب عملها ملحقات JavaScript الخاصّة بإطار العمل Bootstrap:

تنبيهات الإخفاء
أزرار الانتقاء (radio)، وصناديق التأشير (checkbox)
العروض المتكرّرة Carousel لكل ما يتعلّق بشرائح العرض من أزرار تحكم ومؤشرات
التقلّصات Collapse للتغيير بين إظهار المحتوى وإخفائه
القوائم المنسدلة Dropdowns للعرض والتموضع (تتطلّب Popper.js)
النوافذ الشرطية Modals للعرض، التموضع والتمرير
شريط التصفّح navbar لتمديد مُلحق Collapse من أجل تنفيذ سلوك متجاوب
التلميحات Tooltips والتلميحات المنبثقة Popovers للعرض والتموضع (تتطلّب Popper.js)
رقيب التمرير Scrollspy لسلوك التمرير والتحديث أثناء التصفّح.

قالب ابتدائي

تأكد من أن صفحة الويب التي تريد كتابتها معدّة لتتوافق مع أحدث معايير التصميم والتطوير. أي أنها تستخدم نوع المستندات HTML5 (أي HTML5 doctype) وتتضمّن وسم بيانات وصفية (العنصر <meta>) من النوع viewport لسلوك متجاوب صحيح. ضع جميع العناصر سالفة الذكر معًا وستحصُل على صفحة تشبه التالي:

<!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>

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

الأمور العامّة الأساسية

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

نوع المستند HTML5

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

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

إطار عرض متجاوب

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

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

يمكنك رؤية أمثلة على هذا الاستخدام في القالب الابتدائي.

الخاصيّة Box-sizing

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

استخدم الشفرة التالية لتجاوز السلوك المُشار إليه في الحالات القليلة التي تحتاج فيها لذلك:

.selector-for-some-widget {
  box-sizing: content-box;
}

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

Reboot

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

مصادر

صفحة Introduction في توثيق Bootstrap.

@@ سطر 1: / سطر 1: @@
-== مقدّمة ==
 ابدأ باستخدام Bootstrap، إطار العمل الأكثر شعبية لبناء مواقع ويب متجاوبة، وفق مبدأ الجوّال أولًا؛ مع شبكة توزيع المحتوى BootstrapCDN وقالب صفحة ابتدائي.
@@ سطر 7: / سطر 6: @@
 == CSS ==
-انسخ وسم <link> الخاصّ بصفحة الأنماط وألصقه في محتوى الوسم <head> قبل جميع صفحات الأنماط الأخرى لتحميل صفحة الأنماط الخاصّة بإطار العمل Bootstrap.<syntaxhighlight lang="html">
+انسخ وسم <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 الخاصّة بإطار العمل. ضع وسوم <script> التالية في نهاية صفحتك، قبل وسم الإغلاق <‎/body> تمامًا، لتفعيل عناصر إطار العمل التي تحتاج JavaScript. يجب تضمين jQuery أولًا، تليها Popper.js ثم ملحقات JavaScript. يستخدم إطار العمل [https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/ النسخة الخفيفة من jQuery]، إلا أنه يدعم كذلك النسخة الكاملة.<syntaxhighlight lang="html">
+تحتاج عناصر عدّة من إطار العمل 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>
@@ سطر 18: / سطر 17: @@
 </syntaxhighlight>في ما يلي عناصر إطار العمل التي يتطلّب عملها ملحقات JavaScript الخاصّة بإطار العمل Bootstrap:
 * تنبيهات الإخفاء
-* أزرار تغيير الحالة، ومربّعات الاختيار/التعليم (checkbox/radio button)
+* أزرار الانتقاء ([[HTML/input/radio|radio]])، وصناديق التأشير ([[HTML/input/checkbox|checkbox]])
 * العروض المتكرّرة Carousel لكل ما يتعلّق بشرائح العرض من أزرار تحكم ومؤشرات
 * التقلّصات Collapse للتغيير بين إظهار المحتوى وإخفائه
@@ سطر 28: / سطر 27: @@
 == قالب ابتدائي ==
-تأكد من أن صفحة الويب التي تريد كتابتها معدّة لتتوافق مع أحدث معايير التصميم والتطوير. أي أنها تستخدم نوع المستندات [[HTML5]] (أي HTML5 doctype) وتتضمّن وسم بيانات وصفية (العنصر <meta>) من النوع viewport لسلوك متجاوب صحيح. ضع جميع العناصر سالفة الذكر معًا وستحصُل على صفحة تشبه التالي:<syntaxhighlight lang="html">
+تأكد من أن صفحة الويب التي تريد كتابتها معدّة لتتوافق مع أحدث معايير التصميم والتطوير. أي أنها تستخدم نوع المستندات [[HTML5]] (أي HTML5 doctype) وتتضمّن وسم بيانات وصفية (العنصر <code>[[HTML/meta|<meta>]]</code>) من النوع viewport لسلوك متجاوب صحيح. ضع جميع العناصر سالفة الذكر معًا وستحصُل على صفحة تشبه التالي:<syntaxhighlight lang="html">
 <!doctype html>
 <html lang="en">
@@ سطر 57: / سطر 56: @@
 </syntaxhighlight>
-هذا كلّ ما تحتاجه للمتطلّبات العامّة للصفحة. راجع [https://getbootstrap.com/docs/4.0/layout/overview/ توثيق تخطيط الصفحة] أو صفحة [https://getbootstrap.com/docs/4.0/examples/ الأمثلة الرسمية] للبدء في وضع مخطّطات لمحتوى موقعك وعناصره.
+هذا كلّ ما تحتاجه للمتطلّبات العامّة للصفحة. راجع توثيق تخطيط الصفحة أو صفحة الأمثلة الرسمية للبدء في وضع مخطّطات لمحتوى موقعك وعناصره.
 == الأمور العامّة الأساسية ==
@@ سطر 71: / سطر 70: @@
 === إطار عرض متجاوب ===
-يُطوَّر Bootstrap وفق مبدأ الجوّال أولًا، الذي يتمثّل في تحسين الشفرة البرمجيّة لتعمل على الأجهزة الجوّالة أولًا، ثم استخدام استعلامات الوسائط في CSS لتكبير أحجام العناصر وفق الحاجة. تأكّد من إضافة وسم بيانات وصفيّة من النوع viewport في الوسم <head> للحصول على ميزة التكبير أو التصغير باللمس ولتعرض عرضًا سليمًا على جميع الأجهزة.<syntaxhighlight lang="html">
+يُطوَّر 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 يستخدم القيمة content-box للخاصيّة box-sizing بدلًا من border-box، ممّا يضمن أن الحواشي (padding) لا تؤثّر على حساب العرض النهائي للعنصر؛ إلا أن هذا الأمر يمكن أن يتسبّب في مشاكل مع برامج طرف ثالث مثل خرائط Google ومحرّك Google للبحث المُخصَّص.
+من أجل تحديد مباشر للأبعاد فإن 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">
@@ سطر 84: / سطر 83: @@
 </syntaxhighlight>
-سينتُج عن الشفرة السابقة أن ترِث العناصر المتداخلة -بما ذلك المحتوى المُولَّد عبر الصنفين الزائفينـ‎::before و ‎::after- قيمة box-sizing المحدَّدة للعنصُر ‎.selector-for-some-widget.
+سينتُج عن الشفرة السابقة أن ترِث العناصر المتداخلة -بما ذلك المحتوى المُولَّد عبر الصنفين الزائفين <code>[[CSS/::before|‎::before]]</code> و <code>[[CSS/::after|‎::after]]</code>- قيمة <code>[[CSS/box-sizing|box-sizing]]</code> المحدَّدة للعنصُر <code>‎.selector-for-some-widget</code>.
 === Reboot ===