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