يقسم نظام الشبكة في إطار bootstrap الحاوية إلى 12 قطعة. عند استخدامه ، يمكنك إعادة ترجمة رمز مصدر Less/Sass وفقًا للوضع الفعلي لتعديل القيمة 12. كيف يعمل نظام الشبكة في إطار Bootstrap:
1. يجب تضمين صفوف البيانات (.ROWS) في الحاوية حتى يتمكنوا
<viv> <viv> </viv> </viv>
2. يمكنك إضافة أعمدة (.Column) في الصفوف (.ROW) ، ولكن لا يمكن أن يتجاوز مجموع الأعمدة إجمالي عدد الأعمدة التي يتم تشكيلها (مثل: 12)
<viv> <viv> <viv> </viv> <viv> </viv> </viv>
3. يجب وضع المحتوى المحدد في حاوية العمود (.Column) ، ويمكن استخدام العمود فقط (.Column) كعنصر طفل مباشر في حاوية الصف (.ROW).
4. قم بإنشاء التباعد بين الأعمدة عن طريق ضبط المسافة الداخلية (الحشو) ، ثم تعويض تأثير الحشوة عن طريق ضبط القيم السلبية للعمود الأول والمكدس الأخير.
هناك تأثير متجاوب في نظام شبكة Bootstrap ، والذي يحتوي على أربعة أنواع من المتصفحات ، (شاشة Small فائقة ، شاشة صغيرة ، شاشة متوسطة وشاشة كبيرة) ، ونقطة التوقف الخاصة بها هي 768 بكسل ، 992 بكسل ، 1220 بكسل.
الحاوية (. -container) ، لقرارات المتصفح المختلفة ، لها عرض مختلف: أوتوماتيكي ، 760 بكسل ، 970 بكسل ، 1170 بكسل ؛
.container {padding-right: 15px ؛ padding-left: 15px ؛ hargin-right: auto ؛ margin-left: auto ؛ media (min-width: 768px) {.Container {width: 750px ؛}@media (min-width: 992px) {.container { (Min-Width: 1200px) {.Container {Width: 1170px ؛}حاوية الصف (.Row) ، تقسم صفوف الحاوية إلى 12 جزءًا متساويًا ، أي الأعمدة. كل عمود لديه حشو اليسار: 15 بكسل وحشو اليمين: 15 بكسل ؛ يؤدي هذا أيضًا إلى احتلال حشوة اليسار في العمود الأول وحشو اليمين في العمود الأخير 30 بكسل من العرض المتوسط.
.col-XS-1 ، .COL-MD-1 ، .COL-LG-1 ، .COL-XS-2 ، .COL-MD-2 ، .COL-MD-2 ، .COL-LG-2 ، .COL-XS-3 ، .COL-SM-3 ، .COL-MD-3 ، .COL-MD-3 ، .COL-MD-3 ، .COL-LG-3 ، .col-MD-4 ، .COL-LG-4 ، .COL-XS-5 ، .COL-MD-5 ، .COL-MD-5 ، .COL-LG-5 ، .COL-XS-6 ، .COL-MD-6 ، .COL-LG-6 ، .COL-MD-6 ، .COL-LG-6 ، .COL-EX-7 ، .col-XS-8 ، .COL-MD-8 ، .COL-MD-8 ، .COL-LG-8 ، .COL-XS-9 ، .COL-SM-9 ، .COL-MD-9 ، .COL-MD-9 ، .COL-LG-9 ، .COL-XS-10 ، .COL-MD-10 ، .COL-MD-10 ، .Col-XS-11 ، .COL-MD-11 ، .COL-MD-11 ، .COL-MD-11 ، .COL-LG-11 ، .COL-XS-12 ، .COL-MD-12 ، .COL-MD-12 ، .COL-LG-12 {position: Relatial ؛ MIN-HEIGHT: 1PX ؛تحدد حاوية الصف (.Row) قيم الهامش والهامش اليمين -15 بكسل ، والتي تستخدم لتعويض المسافة الداخلية اليسرى من العمود الأول والمسافة الداخلية اليمنى من العمود الأخير ، بحيث لا يوجد تباعد بين العمود الأول والعمود الأخير والحاوية (.Container).
.ROW {margin -right: -15px ؛ margin -left: -15px ؛}الاستخدام الأساسي
نظرًا لأن إطار Bootstrap يستخدم أنماطًا مختلفة للشبكة لأحجام شاشة مختلفة ، فلنأخذ الشاشة المتوسطة (970 بكسل) كمثال.
1. مجموعة العمود
مزيج الأعمدة هو تغيير الرقم لدمج الأعمدة (لا يمكن أن يتجاوز العدد الإجمالي للأعمدة 12) ، وهو ما يشبه إلى حد ما سمة Colspan للجدول ؛ تتضمن طريقة تركيبة الأعمدة خصائصين فقط: تطفو في نسبة العرض
<viv> <viv> <viv> col-md-4 </viv> <viv> col-md-8 </viv> </viv> <viv> <viv> col-md-4 </viv> <viv> col-md-4 </viv> <viv> col-md-4 </viv> <di v> col-md-4 </viv> </viv> <viv> <viv> col-md-4 </viv> </viv> <viv> col-md-3 </viv> <viv> col-md-6 </viv> <viv> col-md-3 </viv> </viv>
الآثار هي كما يلي:
تأكد من ترك جميع الأعمدة
.COL-MD-1 ، .COL-MD-2 ، .COL-MD-3 ، .COL-MD-4 ، .COL-MD-5 ، .COL-MD-6 ، .COL-MD-7 ، .COL-MD-8 ، .COL-MD-9 ، .COL-MD-10 ، .COL-MD-11 ،.
حدد عرض كل مجموعة عمود
.col-md-12 {width: 100 ٪ ؛}. col-md-11 {width: 91.66666667 ٪ ؛}. 66.66666667 ٪ ؛}. col-md-7 {width: 58.3333333333333 ؛}. col-md-6 {width: 50 ٪ ؛}. {العرض: 25 ٪ ؛}. col-md-2 {العرض: 16.66666667 ٪ ؛}. col-md-1 {width: 8.3333333 ٪ ؛}إزاحة العمود
في بعض الأحيان ، لا نريد أن يكون عمودان مجاوران قريبًا معًا ، لكننا لا نريد استخدام الهامش أو غيرها من الوسائل الفنية. يمكن تحقيق ذلك باستخدام إزاحة العمود. باستخدام إزاحة العمود ، ما عليك سوى إضافة اسم الفئة. سيتم تعويض العمود الذي يحمل اسم الفئة هذا ، مثل: إضافة .col-md-OfSet-4 على عنصر العمود ، مما يشير إلى أن العمود يعوض إلى اليمين بمقدار 4 أعمدة في العرض.
<viv> <viv> <viv> 1111 </viv> <viv> 1111 </viv> <viv> 333 </viv> </viv> <viv> إزاحة العمود </div> <viv> col-md-2 </div> <viv> col-md-2 </viv> </div> </div>
الآثار هي كما يلي:
مبدأ التنفيذ:
باستخدام اليسار الهامش واحد من الهامش ، مثل العديد من الهامش اليساري كما يوجد إزاحة ، يمكنك الحصول على أكبر عدد من الهامش اليسرى.
.col-md-offset-12 {margin-left: 100 ٪ ؛}. {margin-left: 66.666666667 ٪ ؛}. {Margin-Left: 33.333333333 ٪ ؛}. 0 ؛}تجدر الإشارة إلى أنه عند استخدام COL-MD-* لتعويض العمود الصحيح ، من الضروري التأكد من أن العدد الإجمالي للأعمدة وأعمدة الإزاحة لا يتجاوز 12 ، وإلا فإنه سيؤدي إلى عرض العمود خارج الصف.
فرز العمود
فرز العمود هو تغيير اتجاه العمود وتعيين المسافة العائمة. في نظام شبكة bootstrap ، هو عن طريق إضافة أسماء فئة. col-md-push-* و col-md-pull-*
<viv> <viv> <viv> col-md-4 </iv> <viv> col-md-8 </iv> </viv> </viv>
الآثار هي كما يلي:
Col-MD-4 على اليسار و Col-MD-8 على اليمين. إذا كنت ترغب في تبديل المواضع ، فأنت بحاجة إلى نقل Col-MD-4 إلى اليمين بمقدار 8 أعمدة ، أي إضافة اسم الفئة. col-md-push-8 ؛ في الوقت نفسه ، تحتاج إلى نقل COL-MD-8 إلى اليسار بواسطة 4 أعمدة ، أي إضافة اسم الفئة. col-md-pull-4.
Bootstrap يحقق تأثيرات تحديد المواقع فقط عن طريق تحديد اليسار واليمين.
.col-md-pull-12 {يمين: 100 ٪ ؛}. col-md-pull-11 {right: 91.6666667 ٪ ؛}. 66.666666667 ٪ ؛}. col-md-pull-7 {يمين: 58.3333333333333333330 ؛}. col-md-pull-6 {right: 50 ٪ ؛ 33.3333333333 ٪ ؛}. col-md-pull-3 {يمين: 25 ٪ ؛}. col-md-pull-2 {يمين: 16.6666666667 ٪ ؛}. 100 ٪ ؛}. col-md-push-11 {يسار: 91.666666667 ٪ ؛}. col-md-push-10 {يسار: 83.33333333333 ٪ ؛}. 58.3333333333 ٪ ؛}. col-md-push-6 {يسار: 50 ٪ ؛}. col-md-push-5 {يسار: 41.666666667 ٪ ؛}. 16.666666667 ٪ ؛}.التعشيش
يمكن أن يضيف تعشش العمود واحدًا أو صنع حاوية صف في عمود ، ثم أدخل عمودًا في حاوية الصف هذه. عندما يكون عرض حاوية الصف (الصف) في حاوية العمود 100 ٪ ، يكون عرض العمود الخارجي الحالي.
<viv> <viv> <viv>
لقد تنازلت شبكة في الداخل
<viv> <viv> col-md-6 </viv> <viv> col-md-6 </viv> </viv> </viv> <viv> col-md-4 </viv> </viv> <viv> <viv> col-md-4 </viv> </div> <viv> col-md-4 </div> <viv>
لقد تنازلت شبكة في الداخل
<viv> <viv> col-md-4 </viv> <viv> col-md-4 </viv> <viv> col-md-4 </viv> </viv> </viv> </viv> </viv>
المحتوى أعلاه هو نظام شبكة bootstrap الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا للجميع!