Bootstrap الشبكة مثال: الأجهزة الصغيرة
نفترض لدينا تصميم بسيط مع اثنين من الأعمدة. نريد من الأعمدة التى يمكن تقسيم 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> انها محاولة لنفسك » ويبين الفصل التالي كيفية إضافة انقسام في المئة مختلفة للأجهزة المتوسطة.