Bootstrap الشبكة مثال:-مرصوف إلى أفقي
سوف نقوم بإنشاء نظام الشبكة الأساسي الذي يبدأ من مكدسة على الهواتف النقالة / أقراص (الأجهزة الصغيرة)، قبل أن يصبح أفقيا على سطح المكتب (متوسطة / الأجهزة الكبيرة).
يظهر المثال التالي "مكدسة لالأفقي" تخطيط عمودين بسيط، وهذا يعني أنها سوف تؤدي في 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-* الطبقات يشير عدد الأعمدة للشعبة أن تمتد (من أصل 12). لذا، .col-sm-1 يمتد العمود 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> انها محاولة لنفسك »