ستقدم هذه المقالة نظام شبكة Bootstrap بشكل أساسي.
يتمثل تنفيذ نظام الشبكة في تحديد حجم الحاوية ، وتقسيم 12 جزءًا (أو 24 جزءًا أو 32 جزءًا ، ولكن 12 جزءًا هو الأكثر شيوعًا) ، ثم ضبط الهوامش الداخلية والخارجية ، وأخيراً الجمع بين استعلامات الوسائط لإنشاء نظام شبكة استجابة قوي.
نظام الشبكة في bootstrap هو تقسيم الحاوية إلى 12 جزء.
يتم استخدام نظام شبكة Bootstrap للتخطيط ، وهو في الواقع مزيج من الأعمدة. هناك أربعة استخدامات أساسية:
1. مجموعة العمود
تغيير الرقم لدمج الأعمدة (المبدأ: لا يمكن أن يتجاوز مجموع الأعمدة 12) ، على سبيل المثال:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> الاستخدام الأساسي لمجموعة الأعمدة </title> <link rel = "stylesheet" href = "http://netdna.bootsstrapcdn.com/bootstrap/3.1.1/csss style-> <style> [class *= col-] {background-color: #EEE ؛ الحدود: 1px الصلبة #CCC ؛ } </style> </head> <body> <br> <viv> <viv> <!-نظام الشبكة في bootstrap يقسم الحاوية إلى 12 قطعة-> <!-يتم تقسيم هذا الخط بالتساوي بواسطة 1: 1: 1-> <viv> .col-md-4 </viv> <viv> .col-md-4 </viv> </viv> <viv> <!-يتم تقسيم هذا الخط بالتساوي عن طريق 1: 2: 1-> <div> .col-md-3 </viv> <viv> .col-md-6 </fiv> <viv> .col-md-3 </div>العروض كما يلي:
2. إزاحة العمود
أضف اسم الفئة "COL-MD Offset-*" على عنصر العمود (حيث يمثل العلامة النجمية عدد مجموعات الأعمدة المراد تعويضها) ، وسيتم تعويض العمود الذي يحمل اسم الفئة إلى اليمين.
<viv> <!-تباعد أربعة أعمدة تنتقل إلى اليمين-> <viv> <viv> .col-md-4 </viv> <viv> تباعد أربعة أعمدة تتحرك إلى اليمين </div> <viv> .col-md-3 <///div> </div> <!-تباعد أربعة أعمدة تتحرك إلى اليمين </div> -> <viv> <viv> <viv> .col-md-4 </viv> <viv> تباعد أربعة أعمدة تنتقل إلى اليمين </div> <viv> col-md-4 </viv> </viv> </viv>
العروض كما يلي:
3. فرز العمود
فرز العمود هو تغيير اتجاه العمود ، وتغيير العائمة اليسرى واليمين ، وضبط المسافة العائمة. يتم تحقيق Bootstrap عن طريق إضافة أسماء الفصول "Col-MD-Push-" و "Col-MD-Pull-" (حيث يمثل النجمة عدد مجموعات الأعمدة المتحركة).
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> الاستخدام الأساسي </title> <link rel = "stylesheet" href = "http://netdna [class *= col-] {background-color: #EEE ؛ الحدود: 1px الصلبة #CCC ؛ } </style> </head> <body> <viv> <viv> <viv> .col-md-3 </viv> <viv> .col-md-6 </viv> </viv> </viv> </body> </html>4. تعشش الأعمدة
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> الاستخدام الأساسي </title> <link rel = "stylesheet" href = "http://netdna [class *= col-] {background-color: #EEE ؛ الحدود: 1px الصلبة #CCC ؛ } [class *= col-] [class *= col-] {background-color: #f36 ؛ الحدود: 1px متقطع #FFFF ؛ اللون: #ffff ؛ } </style> </head> <body> <viv> <viv> <viv> <viv> لدي شبكة متداخلة فيها <viv> <viv> col-md-6 </viv> <viv> col-md-6 </viv> </viv> </div>العروض كما يلي:
إذا كنت لا تزال ترغب في التعلم بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوعين مثيرين لك: Bootstrap التعلم التعليمي التعليمي التعليمي العملي
سلسلة من المقالات:
في المرة الأولى التي أتصل بها مع التخطيط الأساسي bootstrap السحري //www.vevb.com/article/89278.htm
في المرة الأولى التي أتصل بها مع نموذج bootstrap السحري //www.vevb.com/article/89330.htm
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.