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

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

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

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

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

مثال

يجب أن تتضمن الصفوف المتداخلة مجموعة من الأعمدة التي تضيف ما يصل إلى عدد الأعمدة التابعة لها. على سبيل المثال ، .span3يجب وضع عمودين متداخلين داخل ملف .span6.

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

النسب المئوية وليس وحدات البكسل

يستخدم نظام شبكة السوائل النسب المئوية لعرض العمود بدلاً من وحدات البكسل الثابتة. كما أن لديها نفس الاختلافات المتجاوبة مثل نظام الشبكة الثابتة لدينا ، مما يضمن النسب المناسبة لدقة الشاشة والأجهزة الرئيسية.

صفوف السوائل

اجعل أي صف سائلًا ببساطة عن طريق التغيير .rowإلى .row-fluid. تظل الأعمدة كما هي تمامًا ، مما يجعل من السهل جدًا التنقل بين التخطيطات الثابتة والسوائل.

وضع علامة على

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

يختلف التداخل مع الشبكات المرنة قليلاً: لا يلزم أن يتطابق عدد الأعمدة المتداخلة مع الأصل. بدلاً من ذلك ، تتم إعادة تعيين الأعمدة الخاصة بك في كل مستوى لأن كل صف يشغل 100٪ من العمود الأصلي.

<div class = "row-fluid" > 
  <div class = "span12" > 
    المستوى 1 من العمود
    <div class = "row-fluid" > 
      <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 عددًا قليلاً من استعلامات الوسائط في ملف واحد للمساعدة في جعل مشروعاتك أكثر ملاءمة على الأجهزة المختلفة ودقة الشاشة. إليك ما تم تضمينه:

يتطلب علامة وصفية

لضمان عرض الأجهزة للصفحات سريعة الاستجابة بشكل صحيح ، قم بتضمين العلامة الوصفية لإطار العرض.

<meta name = "viewport" content = "width = device-width، initial-scale = 1.0" >  

ماذا يفعلون

تسمح استعلامات الوسائط باستخدام 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 بكسل ) و ( الحد الأقصى - العرض : 980 بكسل ) { ... }        
 
  // سطح مكتب كبير
  media ( الحد الأدنى - العرض : 1200 بكسل ) { .. }