Bootstrap الشبكة مثال: الأجهزة متوسطة
في الفصل السابق، قدمنا مثالا الشبكة مع الطبقات للأجهزة الصغيرة. كنا اثنين من عناصر div (الأعمدة) وأعطينا لهم 25%/75% انقسام:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>ولكن على الأجهزة المتوسطة التصميم قد يكون أفضل بمثابة 50%/50% الانقسام.
نصيحة: يتم تعريف الأجهزة متوسطة عن وجود عرض الشاشة من 992 بكسل إلى 1199 بكسل.
للأجهزة المتوسطة سوف نستخدم .col-md-* الطبقات.
الآن سوف نقوم بإضافة الأعمدة للأجهزة المتوسطة:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
الآن Bootstrap هو الذهاب الى القول "في حجم صغير، والنظر في الطبقات مع -sm- فيها، واستخدام تلك. وفي متوسطة الحجم، والنظر في الطبقات مع -md- فيها، واستخدام تلك".
والمثال التالي يؤدي إلى 25%/75% انقسام على الأجهزة الصغيرة و 50%/50% انقسام على الأجهزة المتوسطة (والكبيرة). على الأجهزة الصغيرة الإضافية، وسوف كومة تلقائيا (100٪):
مثال
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-3
col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> انها محاولة لنفسك » ملاحظة: تأكد من أن المبلغ يضيف دائما ما يصل إلى 12.
استخدام الوسيلة فقط
في المثال التالي، نحن فقط تحديد .col-md-6 فئة (دون .col-sm-* ). وهذا يعني أن الأجهزة المتوسطة والكبيرة سيتم تقسيم 50%/50% - لأن فئة موازين المباراة. ومع ذلك، من أجل الأجهزة الصغيرة، وسوف كومة عموديا (عرض 100٪):
مثال
<div
class="row">
<div class="col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
انها محاولة لنفسك » ويبين الفصل التالي كيفية إضافة انقسام في المئة مختلفة للأجهزة الكبيرة.