نظام الشبكة الافتراضي المقدم كجزء من Bootstrap هو شبكة بعرض 940 بكسل ، مكونة من 12 عمودًا .

كما أن لديها أربعة أشكال متجاوبة لمختلف الأجهزة والدقة: الهاتف ، واللوح العمودي ، والمناظر الطبيعية للجدول ، وأجهزة الكمبيوتر المكتبية الصغيرة ، وأجهزة الكمبيوتر المكتبية الكبيرة ذات الشاشة العريضة.

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

كما هو موضح هنا ، يمكن إنشاء تخطيط أساسي باستخدام "عمودين" ، كل منهما يمتد على عدد من الأعمدة التأسيسية الاثني عشر التي حددناها كجزء من نظام الشبكة الخاص بنا.

مع نظام الشبكة الثابت (غير السائل) في Bootstrap ، يكون التعشيش أمرًا سهلاً. لتداخل المحتوى الخاص بك ، ما عليك سوى إضافة مجموعة جديدة .rowومجموعة من .span*الأعمدة داخل عمود موجود .span*.

مثال

<div class = "row" > 
  <div class = "span12" > 
    المستوى 1 من العمود
    <div class = "row" > 
      <div class = "span6" > المستوى 2 </div> 
      <div class = "span6" > المستوى 2 </div> 
    </div>
  </div>
</div>

المتغيرات في أقل

يوجد في Bootstrap عدد قليل من المتغيرات لتخصيص نظام الشبكة الافتراضي 940 بكسل ، الموثق أعلاه. يتم تخزين جميع متغيرات الشبكة في متغيرات.

كيفية التخصيص

يعني تعديل الشبكة تغيير @grid*المتغيرات الثلاثة وإعادة تجميع Bootstrap. قم بتغيير متغيرات الشبكة في variables.less واستخدم إحدى الطرق الأربعة الموثقة لإعادة التحويل البرمجي . إذا كنت تضيف المزيد من الأعمدة ، فتأكد من إضافة CSS لمن هم في الشبكة.

البقاء متجاوبا

تخصيص الشبكة يعمل فقط على المستوى الافتراضي ، شبكة 940 بكسل. للحفاظ على جوانب الاستجابة في Bootstrap ، سيتعين عليك أيضًا تخصيص الشبكات في response.less.

تخطيط ثابت

التصميم الافتراضي والبسيط الذي يبلغ عرضه 940 بكسل والمتمركز في أي موقع ويب أو صفحة يتم توفيرها بواسطة شخص واحد <div class="container">.

<الجسم>
  <div class = "container" > 
    ...
  </div>
</body>

تخطيط مرن

<div class="container-fluid">يعطي بنية صفحة مرنة ، والحد الأدنى والحد الأقصى للعرض ، والشريط الجانبي الأيسر. إنه رائع للتطبيقات والمستندات.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <! - محتوى الشريط الجانبي ->
    </div>
    <div class = "span10" > 
      <! - محتوى الجسم ->
    </div>
  </div>
</div>

اجهزة مدعومة

يدعم Bootstrap عددًا قليلاً من استعلامات الوسائط للمساعدة في جعل مشروعاتك أكثر ملاءمة على الأجهزة المختلفة ودقة الشاشة. إليك ما تم تضمينه:

ماذا يفعلون

تسمح استعلامات الوسائط باستخدام CSS مخصص بناءً على عدد من الشروط - النسب ، والعرض ، ونوع العرض ، وما إلى ذلك - ولكنها تركز عادةً حول min-widthو max-width.

• قم بتعديل عرض العمود في شبكتنا
• كدس العناصر بدلاً من الطفو حيثما كان ذلك ضروريًا
• قم بتغيير حجم العناوين والنصوص لتكون أكثر ملاءمة للأجهزة

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

1. استخدم الإصدار المجمع المتجاوب ، bootstrap-responsive.css
2. أضفimport "responseive.less" وأعد ترجمة Bootstrap
3. تعديل وإعادة تجميع response.less كملف منفصل

لماذا لا يتم تضمينها فقط؟ يقال الحقيقة ، ليس كل شيء يحتاج إلى الاستجابة. بدلاً من تشجيع المطورين على إزالة هذه الميزة ، نرى أنه من الأفضل تمكينها.

  // هواتف أفقية وأسفل
  media ( أقصى عرض : 480 بكسل ) { ... }     
 
  // هاتف أفقي إلى جهاز لوحي عمودي
  media ( أقصى عرض : 768 بكسل ) { ... }     
 
  // جهاز لوحي عمودي إلى أفقي وسطح المكتب
  media ( الحد الأدنى - العرض : 768 بكسل ) و ( الحد الأقصى - العرض : 940 بكسل ) { ... }        
 
  // سطح مكتب كبير
  media ( الحد الأدنى - العرض : 1200 بكسل ) { .. }