English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل Bootstrap الأساسي

Bootstrap إضافات

نظام الشبكة Bootstrap

في هذا الفصل سنشرح نظام الشبكة في Bootstrap (Grid System).

Bootstrap توفر مجموعة من الشبكات التفاعلية والهاتفية المميزة، وتقسم تلقائيًا إلى أقصى 12 عمودًا مع زيادة حجم الشاشة أو المنظار (viewport).

ما هو الشبكة (Grid)؟

مأخوذ من ويكيبيديا:

في التصميم البصري، الشبكة هي بنية تتكون من مجموعة من الخطوط المتقاطعة التي تستخدم لتنظيم المحتوى (عمودية، أفقية) وهي عادةً ثنائية الأبعاد. وتستخدم على نطاق واسع في تصميم الصور المطبوعة والتنسيق والمحتوى. وفي تصميم الويب، هي طريقة لإنشاء تخطيطات متسقة باستخدام HTML وCSS بسرعة وتجعل استخدامها فعالًا.

بالكلمات البسيطة، الشبكة في تصميم الويب تستخدم لتنظيم المحتوى، مما يجعل من السهل تصفح الموقع، ويقلل من حمل المستخدم.

ما هو نظام الشبكة في Bootstrap (Grid System)؟

وصف نظام الشبكة في وثائق Bootstrap الرسمية:

تتضمن Bootstrap نظام شبكة ديناميكيًا وأولوية للأجهزة المحمولة وغير ثابت، يمكنه التوسع بشكل مناسب إلى 12 عمودًا مع تزايد حجم الجهاز أو عرض النافذة. وتحتوي أيضًا على فئات مسبقة الإعداد لخيارات التخطيط البسيطة ومزيج قوي لإنشاء ترتيبات منطقية إضافية.

لنفهم جملة أعلاه. Bootstrap 3 هو الأولوية للأجهزة المحمولة، في هذا المعنى، تبدأ كود Bootstrap من الأجهزة الصغيرة (مثل الهواتف المحمولة واللوحات اللمس) وتتوسع إلى العناصر والشبكات على الأجهزة الكبيرة (مثل الكمبيوترات المحمولة والكمبيوترات المكتبية).

استراتيجية أولوية الأجهزة المحمولة

  • المحتوى

    • تحديد ما هو أكثر أهمية.

  • تخطيط

    • تصميم الأوسع أولاً.

    • الCSS الأساسي هو الأولوية للمعدات المحمولة، واستعلامات وسائط هي للحواسيب اللوحية والكمبيوترات المكتبية.

  • التقوية التدريجية

    • إضافة العناصر مع تزايد حجم الشاشة.

يقسم نظام الشبكة الديناميكي مع تزايد حجم الشاشة أو عرض النافذة (viewport) إلى 12 عمودًا كحد أقصى.

111111111111
444
48
66
12

مبدأ عمل نظام الشبكة لBootstrap (Grid System)

يتم إنشاء تخطيط الصفحة من خلال سلسلة من الصفوف والأعمدة المحتوية على المحتوى. يوضح أدناه كيف يعمل نظام الشبكة لBootstrap:

  • يجب وضع الصف في .container في الفئة، لتحقيق الترتيب (alignment) والهوامش الداخلية (padding) المناسبة.

  • استخدام الصف لإنشاء مجموعات أفقية للأعمدة.

  • يجب أن يتم وضع المحتوى داخل الأعمدة، ويجب أن تكون الأعمدة هي العناصر المباشرة للصف.

  • فئات الشبكة المسبقة الإعداد، مثل .row و .col-xs-4، وهي قابلة للاستخدام لإنشاء ترتيبات شبكية سريعة. يمكن استخدام المزيج من LESS لإنشاء ترتيبات منطقية إضافية.

  • تتم إنشاء الفراغ بين محتويات الأعمدة من خلال الهوامش الداخلية (padding). وتتمثل هذه الهوامش في .rows مقابل الهوامش الخارجية (margin) إيجابية، مما يعني أن الأعمدة الأولى والأخيرة تشير إلى انحراف الصف.

  • يتم إنشاء نظام الشبكة عن طريق تحديد العشرة وثمانية أعمدة المتاحة التي ترغب في横حها. على سبيل المثال، لإنشاء ثلاثة أعمدة متساوية، يتم استخدام ثلاثة .col-xs-4.

استعلامات وسائط

استعلامات وسائط هي "قواعد CSS مشروطة" مميزة. تُطبق فقط على بعض CSS تستند إلى بعض الشروط المحددة. إذا تم استيفاء هذه الشروط، يتم تطبيق النمط المماثل.

يسمح لك استعلامات وسائط Bootstrap بنقل وتعديل وتخفيض محتويات بناءً على حجم العرض. تستخدم الاستعلامات التالية في ملف LESS، لإنشاء نقاط التحول الأساسية في نظام الشبكة لBootstrap.

/* أجهزة صغيرة جداً (الهواتف المحمولة، أقل من 768px) */
/* لا تحتوي Bootstrap بشكل افتراضي على استعلامات وسائط */
/* صغير الحجم (لوحة اللمس، من 768px فما فوق) */
@media　(min-width:　@screen-sm-min)　{　...　}
/*　أجهزة متوسطة مثل أجهزة الكمبيوتر المكتبية (من 992px)　*/
@media　(min-width:　@screen-md-min)　{　...　}
/*　أجهزة كبيرة مثل أجهزة الكمبيوتر المكتبية (من 1200px)　*/
@media　(min-width:　@screen-lg-min)　{　...　}

في بعض الأحيان نضيف أيضًا max-width، مما يحد من تأثير CSS إلى نطاق أوسع من أحجام الشاشة الصغيرة.

@media　(max-width:　@screen-xs-max)　{　...　}
@media　(min-width:　@screen-sm-min)　and　(max-width:　@screen-sm-max)　{　...　}
@media　(min-width:　@screen-md-min)　and　(max-width:　@screen-md-max)　{　...　}
@media　(min-width:　@screen-lg-min)　{　...　}

يحتوي الاستعلام الإعلامي على جزأين، الأول هو معيار الجهاز، ثم هو قاعدة الحجم. في هذه الحالة، تم تعيين القواعد التالية:

دعونا نرى هذا السطر أدناه:

@media　(min-width:　@screen-sm-min)　and　(max-width:　@screen-sm-max)　{　...　}

لجميع الذين يحتويون على min-width: @screen-sm-min الأجهزة، إذا كان عرض الشاشة أقل من @screen-sm-max، سيتم بعض التعاملات.

خيارات الشبكة

يُلخص الجدول أدناه كيف تعمل نظام الشبكة لـ Bootstrap عبر أجهزة متعددة:


أجهزة صغيرة جدًا مثل الهواتف المحمولة (<768px)أجهزة صغيرة مثل الأجهزة اللوحية (≥768px)أجهزة متوسطة مثل أجهزة الكمبيوتر المكتبية (≥992px)أجهزة كبيرة مثل أجهزة الكمبيوتر المكتبية (≥1200px)
سلوك الشبكةأفقي دائمًاتبدأ بالطي، وتكون أفقيًا فوق نقطة الانقسامتبدأ بالطي، وتكون أفقيًا فوق نقطة الانقسامتبدأ بالطي، وتكون أفقيًا فوق نقطة الانقسام
أكبر عرض الحاويةلا شيء (auto)750px970px1170px
مقدم الصنف.col-xs-.col-sm-.col-md-.col-lg-
عدد الأعمدة والإجمالي12121212
أكبر عرض عمودAuto60px78px95px
عرض الفجوة30px
（كل جانب من جوانب العمود 15px）		30px
（كل جانب من جوانب العمود 15px）		30px
（كل جانب من جوانب العمود 15px）		30px
（كل جانب من جوانب العمود 15px）
قابلة للغوصنعمنعمنعمنعم
الانتقالاتنعمنعمنعمنعم
ترتيب الأعمدةنعمنعمنعمنعم

بنية الشبكة الأساسية

هنا هي بنية الشبكة الأساسية لـ Bootstrap:

<div>
　　　<div>
　　　　　　<div></div>
　　　　　　<div></div>　　　　　　
　　　</div>
　　　<div>...</div>
</div>
<div>....

دعونا نرى بعض الأمثلة البسيطة للشبكات:

إعادة تعيين الصفوف المفعمة بالحياة

المثال التالي يحتوي على 4 شبكات، ولكن لا يمكن تحديد موقع العرض للشبكات عند تصفح الأجهزة الصغيرة.

لحل هذه المشكلة، يمكنك استخدام .clearfix class و أدوات مفعمة بالحياةلحل هذه المشكلة، كما هو موضح في المثال التالي:

مثال على الخط

<!DOCTYPE　html>
<html>
<head>
　　　<meta charset="utf-8">　
　　　<title>مثال Bootstrap - إعادة تعيين الصفوف الم��رة</title>
　　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container"
　　　<div class="row">
　　　　　　<div class="col-xs-6 col-sm-3"　
　　　　　　　　　style="background-color: #dedef8;
　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444;">
　　　　　　　　　<p>لنأخذ مقعدًا معًا، نبارك حبيبنا.</p>
　　　　　　</div>
　　　　　　<div class="col-xs-6 col-sm-3"　
　　　　　　　　　style="background-color: #dedef8;box-shadow:　
　　　　　　　　　inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　<p>أنا أدعو لك، أتمنى لك السعادة، كل عملي هو مصادفة. لدي قليل من الشجاعة، سأذهب للتدريب في المختبر، هذا هو النتيجة.
　　　　　　　　　</p>
　　　　　　　　　<p>لنأخذ مقعدًا معًا، نبارك أصدقائنا، نبارك لهم.
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="clearfix visible-xs"></div>
　　　　　　<div class="col-xs-6 col-sm-3"　
　　　　　　　　　style="background-color: #dedef8;
　　　　　　　　　box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　<p>يمكنك الانتهاء من التدريب إذا كان لديك القليل من الوقت.
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="col-xs-6 col-sm-3"　
　　　　　　　　　style="background-color: #dedef8;box-shadow:　
　　　　　　　　　inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　<p>العمل والمعاناة، مليئة بالطاقة، لذا، لدينا بعض نماذج الحياة الطويلة العظيمة. خلال هذه السنوات.
　　　　　　　　　</p>
　　　　　　</div>
　　　</div>
</div>
</body>
</html>
الاختبار لرؤيته <‹/›

تغير حجم النافذة على المتصفح أو راجع التأثير على هاتفك المحمول.

الصفوف المنحرفة

الصفوف المنحرفة هي ميزة مفيدة لتحقيق تصميم أكثر احترافية. يمكن استخدامها لتوفير مساحة أكبر للصفوف. على سبيل المثال،.col-xs-* لا تدعم الصفوف المنحرفة، ولكن يمكن تحقيق هذا التأثير ببساطة باستخدام خلية فارغة.

للإستخدام في شاشات كبيرة، استخدم .col-md-offset-* الصفوف. هذه الصفوف تزيد من الهوامش الخارجية للصف (margin) * الصفوف، حيث * المساحة تتراوح من 1 إلى 11.

في المثال التالي، لدينا <div>..</div>، سنستخدم .col-md-offset-3 class لوضع هذا div في الوسط.

مثال على الخط

<!DOCTYPE　html>
<html>
<head>
　　　<meta charset="utf-8">　
　　　<title>مثال Bootstrap - صفوف منحرفة</title>
　　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container"
　　　<h1>مرحبًا،العالم!</h1>
　　　<div class="row">
　　　　　　<div class="col-md-6 col-md-offset-3"　
　　　　　　　　　style="background-color: #dedef8;box-shadow:　
　　　　　　　　　inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit　
　　　　　　　　　　　　elit.
　　　　　　　　　</p>
　　　　　　</div>
　　　</div>
</div>
</body>
</html>
الاختبار لرؤيته <‹/›

النتيجة كما ترونها:

الصفوف المدمجة

لإدراج شبكة افتراضية مدمجة في المحتوى، يرجى إضافة .row، وفي عمود مسبق .col-md-* إضافة مجموعة .col-md-* العمود. السطر المنغمس يجب أن يحتوي على مجموعة من العموديات، وعدد هذه العموديات لا يجب أن يتجاوز 12 (في الواقع، ليس هناك طلب على أن تكون مملوءة بالكامل).

في المثال التالي، هناك عمودان، والعمود الثاني مقسم إلى سطرين وأربعة صناديق.

مثال على الخط

<!DOCTYPE　html>
<html>
<head>
　　　<meta charset="utf-8">　
　　　<title>مثال Bootstrap - عمود منغمس</title>
　　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container"
　　　<h1>مرحبًا،العالم!</h1>
　　　<div　class="row"
　　　　　　<div class="col-md-3" style="background-color: #dedef8;box-shadow:　
　　　　　　　　　inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　<h4>العمود الأول</h4>
　　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
　　　　　　</div>
　　　　　　<div class="col-md-9" style="background-color: #dedef8;box-shadow:　
　　　　　　　　　inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　<h4>العمود الثاني - مقسوم إلى أربعة صناديق</h4>
　　　　　　　　　<div　class="row"
　　　　　　　　　　　　<div class="col-md-6" style="background-color: #B18904;
　　　　　　　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444;">
　　　　　　　　　　　　　　　<p>Consectetur art party Tonx culpa semiotics. Pinterest　
　　　　　　　　　　　　　　　　　　assumenda minim organic quis.
　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　　　　　<div class="col-md-6" style="background-color: #B18904;
　　　　　　　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444;">
　　　　　　　　　　　　　　　<p>sed do eiusmod tempor incididunt ut labore et dolore magna　
　　　　　　　　　　　　　　　　　　aliqua. Ut enim ad minim veniam, quis nostrud exercitation　
　　　　　　　　　　　　　　　　　　ullamco laboris nisi ut aliquip ex ea commodo consequat.
　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　　</div>
　　　　　　　　　<div　class="row"
　　　　　　　　　　　　<div class="col-md-6" style="background-color: #B18904;
　　　　　　　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444;">
　　　　　　　　　　　　　　　<p>quis nostrud exercitation ullamco laboris nisi ut　
　　　　　　　　　　　　　　　　　　aliquip ex ea commodo consequat.
　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>　　　
　　　　　　　　　　　　<div class="col-md-6" style="background-color: #B18904;
　　　　　　　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444;">
　　　　　　　　　　　　　　　Lorem ipsum dolor sit amet, consectetur adipisicing elit,　
　　　　　　　　　　　　　　　　　　يُؤخدُ do eiusmod tempor incididunt ut labore et dolore magna　
　　　　　　　　　　　　　　　　　　aliqua. Ut enim ad minim.
　　　　　　　　　　　　</div>
　　　　　　　　　</div>
　　　　　　</div>
　　　</div>
</div>
</body>
</html>
الاختبار لرؤيته <‹/›

النتيجة كما ترونها:

ترتيب الأعمدة

ميزة مثالية أخرى في نظام الشبكة الخاص بـ Bootstrap، يمكنك بسهولة كتابة الأعمدة بترتيب واحد ثم عرضها بترتيب آخر.

يمكنك بسهولة تغيير الأعمدة التي تحتوي على .col-md-push-* و .col-md-pull-* ترتيب الأعمدة المدمجة في الفئات، حيث * المساحة تتراوح من 1 إلى 11.

في المثال التالي، لدينا تصميم عمودين، العمود الأيسر ضيق جداً، ويتم استخدامه كشريط جانبي. سنستخدم .col-md-push-* و .col-md-pull-* استخدام هذه الفئات لتبادل ترتيب هذين العمودين.

مثال على الخط

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="UTF-8">
	<title>مثال Bootstrap - ترتيب الأعمدة</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container"
　　　<h1>مرحبًا،العالم!</h1>
　　　<div　class="row"
　　　　　　<p>قبل الترتيب
　　　　　　<div　class="col-md-4"　style="background-color:　#dedef8;
　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444;">
　　　　　　　　　أنا على اليسار
　　　　　　</div>
　　　　　　<div　class="col-md-8"　style="background-color:　#dedef8;
　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444,　inset　-1px　1px　1px　#444;">
　　　　　　　　　أنا في الجانب الأيمن
　　　　　　</div>
　　　</div><br>
　　　<div　class="row"
　　　　　　<p>م排序
　　　　　　<div　class="col-md-4　col-md-push-8"　
　　　　　　　　　style="background-color: #dedef8;
　　　　　　　　　box-shadow: inset 1px -1px 1px #444,　
　　　　　　　　　inset -1px 1px 1px #444;">
　　　　　　　　　أنا على اليسار
　　　　　　</div>
　　　　　　<div　class="col-md-8　col-md-pull-4"　
　　　　　　　　　style="background-color: #dedef8;
　　　　　　　　　box-shadow: inset 1px -1px 1px #444,　
　　　　　　　　　inset -1px 1px 1px #444;">
　　　　　　　　　أنا في الجانب الأيمن
　　　　　　</div>
　　　</div>
</div>
</body>
</html>
الاختبار لرؤيته <‹/›

النتيجة كما ترونها:

تنسيق Bootstrapمقدمة إلى CSS Bootstrap