الفرق بين المراجعتين لصفحة: «Bootstrap/introduction»
ط إضافة تصنيف |
تحديث إلى 4.5 |
||
| (5 مراجعات متوسطة بواسطة مستخدم واحد آخر غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:مقدمة عن إطار Bootstrap}}</noinclude> | |||
ابدأ باستخدام Bootstrap، إطار العمل الأكثر شعبية لبناء مواقع ويب متجاوبة، وفق مبدأ الجوّال أولًا؛ مع شبكة توزيع المحتوى BootstrapCDN وقالب صفحة ابتدائي. | ابدأ باستخدام Bootstrap، إطار العمل الأكثر شعبية لبناء مواقع ويب متجاوبة، وفق مبدأ الجوّال أولًا؛ مع شبكة توزيع المحتوى BootstrapCDN وقالب صفحة ابتدائي. | ||
إضافة Bootstrap إلى مشروعك | == إضافة Bootstrap إلى مشروعك == | ||
هل تبحث عن طريقة سريعة لإضافة Bootstrap إلى مشروعك؟ استخدم BootstrapCDN، الذي توفِّره StackPath مجانًا. هل تستخدم مدير حزم أو تحتاج لتنزيل الملفات المصدرية؟ توجّه إلى [https://getbootstrap.com/docs/4.5/getting-started/download/ صفحة التنزيلات]. | |||
هل تبحث عن طريقة سريعة لإضافة Bootstrap إلى مشروعك؟ استخدم BootstrapCDN، الذي توفِّره | |||
== CSS == | == CSS == | ||
انسخ وسم <code>[[HTML/link|<link>]]</code> الخاصّ بصفحة الأنماط وألصقه في محتوى الوسم <code>[[HTML/head|<head>]]</code> قبل جميع صفحات الأنماط الأخرى لتحميل صفحة الأنماط الخاصّة بإطار العمل Bootstrap.<syntaxhighlight lang="html"> | انسخ وسم <code>[[HTML/link|<link>]]</code> الخاصّ بصفحة الأنماط وألصقه في محتوى الوسم <code>[[HTML/head|<head>]]</code> قبل جميع صفحات الأنماط الأخرى لتحميل صفحة الأنماط الخاصّة بإطار العمل Bootstrap.<syntaxhighlight lang="html"> | ||
<link rel="stylesheet" href="https:// | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== JavaScript == | == 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"> | تحتاج عناصر عدّة من إطار العمل 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. | <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> | ||
<script src="https:// | <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> | ||
<script src="https:// | <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> | ||
</syntaxhighlight>في ما يلي عناصر إطار العمل التي يتطلّب عملها ملحقات JavaScript الخاصّة بإطار العمل Bootstrap: | </syntaxhighlight>في ما يلي عناصر إطار العمل التي يتطلّب عملها ملحقات JavaScript الخاصّة بإطار العمل Bootstrap: | ||
* تنبيهات الإخفاء | * تنبيهات الإخفاء | ||
| سطر 25: | سطر 25: | ||
* التلميحات Tooltips والتلميحات المنبثقة Popovers للعرض والتموضع (تتطلّب [https://popper.js.org/ Popper.js]) | * التلميحات Tooltips والتلميحات المنبثقة Popovers للعرض والتموضع (تتطلّب [https://popper.js.org/ Popper.js]) | ||
* رقيب التمرير Scrollspy لسلوك التمرير والتحديث أثناء التصفّح. | * رقيب التمرير Scrollspy لسلوك التمرير والتحديث أثناء التصفّح. | ||
يمكنك معرفة المزيد عن المُلحقات المُضافة في Bootstrap من [[Bootstrap/contents|صفحة محتويات إطار Bootstrap]]. | |||
== قالب ابتدائي == | == قالب ابتدائي == | ||
| سطر 34: | سطر 35: | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | ||
<!-- Bootstrap CSS --> | <!-- Bootstrap CSS --> | ||
<link rel="stylesheet" href="https:// | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> | ||
<title>Hello, world!</title> | <title>Hello, world!</title> | ||
| سطر 44: | سطر 43: | ||
<body> | <body> | ||
<h1>Hello, world!</h1> | <h1>Hello, world!</h1> | ||
<!-- Optional JavaScript --> | <!-- Optional JavaScript --> | ||
<!-- jQuery first, then Popper.js, then Bootstrap JS --> | <!-- jQuery first, then Popper.js, then Bootstrap JS --> | ||
<script src="https://code.jquery.com/jquery-3. | <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> | ||
<script src="https:// | <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> | ||
<script src="https:// | <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> | ||
</body> | </body> | ||
</html> | </html> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
هذا كلّ ما تحتاجه للمتطلّبات العامّة للصفحة. راجع توثيق تخطيط الصفحة أو صفحة الأمثلة الرسمية للبدء في وضع مخطّطات لمحتوى موقعك وعناصره. | هذا كلّ ما تحتاجه للمتطلّبات العامّة للصفحة. راجع توثيق [[Bootstrap/utilities for layout|تخطيط الصفحة]] أو [https://getbootstrap.com/docs/4.5/examples/ صفحة الأمثلة الرسمية] للبدء في وضع مخطّطات لمحتوى موقعك وعناصره. | ||
== الأمور العامّة الأساسية == | == الأمور العامّة الأساسية == | ||
| سطر 74: | سطر 71: | ||
</syntaxhighlight>يمكنك رؤية أمثلة على هذا الاستخدام في [https://docs.google.com/document/d/1ufY2s5qf9oLtJ8oU8iuczmgTinvISk4RGFtV3ltkF1E/edit#bookmark=id.3dy6vkm القالب الابتدائي]. | </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 للبحث المُخصَّص. | من أجل تحديد مباشر للأبعاد فإن Bootstrap يستخدم القيمة <code>content-box</code> للخاصيّة <code>[[CSS/box-sizing|box-sizing]]</code> بدلًا من <code>border-box</code>، ممّا يضمن أن الحواشي (<code>[[CSS/padding|padding]]</code>) لا تؤثّر على حساب العرض النهائي للعنصر؛ إلا أن هذا الأمر يمكن أن يتسبّب في مشاكل مع برامج طرف ثالث مثل خرائط Google ومحرّك Google للبحث المُخصَّص. | ||
| سطر 86: | سطر 83: | ||
=== Reboot === | === Reboot === | ||
يستخدم Bootstrap مجموعةً من صفحات الأنماط اسمها Reboot لتصحيح التناقضات بين المتصفّحات والأجهزة، مع توفير إعدادات لعناصر HTML الأكثر شيوعا لتتواءم أكثر مع الأجهزة المختلفة. | يستخدم Bootstrap مجموعةً من صفحات الأنماط اسمها [[Bootstrap/reboot|Reboot]] لتصحيح التناقضات بين المتصفّحات والأجهزة، مع توفير إعدادات لعناصر HTML الأكثر شيوعا لتتواءم أكثر مع الأجهزة المختلفة. | ||
== مصادر == | == مصادر == | ||
* [https://getbootstrap.com/docs/4. | * [https://getbootstrap.com/docs/4.5/getting-started/introduction/ صفحة Introduction في توثيق Bootstrap]. | ||
[[تصنيف:Bootstrap]] | [[تصنيف:Bootstrap|{{SUBPAGENAME}}]] | ||
[[تصنيف:Bootstrap Getting Started|{{SUBPAGENAME}}]] | |||
المراجعة الحالية بتاريخ 06:33، 12 يوليو 2020
ابدأ باستخدام Bootstrap، إطار العمل الأكثر شعبية لبناء مواقع ويب متجاوبة، وفق مبدأ الجوّال أولًا؛ مع شبكة توزيع المحتوى BootstrapCDN وقالب صفحة ابتدائي.
إضافة Bootstrap إلى مشروعك
هل تبحث عن طريقة سريعة لإضافة Bootstrap إلى مشروعك؟ استخدم BootstrapCDN، الذي توفِّره StackPath مجانًا. هل تستخدم مدير حزم أو تحتاج لتنزيل الملفات المصدرية؟ توجّه إلى صفحة التنزيلات.
CSS
انسخ وسم <link> الخاصّ بصفحة الأنماط وألصقه في محتوى الوسم <head> قبل جميع صفحات الأنماط الأخرى لتحميل صفحة الأنماط الخاصّة بإطار العمل Bootstrap.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" 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.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
في ما يلي عناصر إطار العمل التي يتطلّب عملها ملحقات JavaScript الخاصّة بإطار العمل Bootstrap:
- تنبيهات الإخفاء
- أزرار الانتقاء (radio)، وصناديق التأشير (checkbox)
- العروض المتكرّرة Carousel لكل ما يتعلّق بشرائح العرض من أزرار تحكم ومؤشرات
- التقلّصات Collapse للتغيير بين إظهار المحتوى وإخفائه
- القوائم المنسدلة Dropdowns للعرض والتموضع (تتطلّب Popper.js)
- النوافذ الشرطية Modals للعرض، التموضع والتمرير
- شريط التصفّح navbar لتمديد مُلحق Collapse من أجل تنفيذ سلوك متجاوب
- التلميحات Tooltips والتلميحات المنبثقة Popovers للعرض والتموضع (تتطلّب Popper.js)
- رقيب التمرير Scrollspy لسلوك التمرير والتحديث أثناء التصفّح.
يمكنك معرفة المزيد عن المُلحقات المُضافة في Bootstrap من صفحة محتويات إطار Bootstrap.
قالب ابتدائي
تأكد من أن صفحة الويب التي تريد كتابتها معدّة لتتوافق مع أحدث معايير التصميم والتطوير. أي أنها تستخدم نوع المستندات 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://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" 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.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" 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 الأكثر شيوعا لتتواءم أكثر مع الأجهزة المختلفة.