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