شبكة التمهيد - الأجهزة الصغيرة
مثال على شبكة التمهيد: الأجهزة الصغيرة
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Class prefix | .col-xs |
.col-sm |
.col-md |
.col-lg |
| Screen width | <768px | >=768px | >=992px | >=1200px |
افترض أن لدينا تخطيطًا بسيطًا من عمودين. نريد تقسيم الأعمدة بنسبة 25٪ / 75٪ للأجهزة الصغيرة.
نصيحة: يتم تعريف الأجهزة الصغيرة على أنها ذات عرض شاشة من 768 بكسل إلى 991 بكسل .
بالنسبة للأجهزة الصغيرة ، سنستخدم .col-sm-*الفئات.
سنضيف الفئات التالية إلى عمودين لدينا:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
الآن سيقول Bootstrap "بالحجم الصغير ، ابحث عن فئات بها -sm- واستخدمها".
سينتج عن المثال التالي تقسيم 25٪ / 75٪ على الأجهزة الصغيرة (والمتوسطة والكبيرة). على الأجهزة الصغيرة جدًا ، سيتم تكديسها تلقائيًا (100٪):
العمود- sm-3
العمود- SM-9
مثال
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
ملاحظة: تأكد من أن المجموع دائمًا ما يصل إلى 12.
لتقسيم 33.3٪ / 66.6٪ ، يمكنك استخدام .col-sm-4و .col-sm-8:
العمود- SM-4
العمود- SM-8
مثال
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
يوضح الفصل التالي كيفية إضافة نسبة تقسيم مختلفة للأجهزة المتوسطة.