آموزش Bootstrap 4 – بخش دوم – سیستم شبکه ای

سیستم شبکه ای بوت استرپ ۴

در فریم ورک بوت استرپ ، شما به آسانی می توانید چارچوب صفحه را بصورت کاملا واکنش گرا ایجاد کنید . بدین منظور میبایست طبق کلاس های تعریف شده در بوت استرپ که به آن سیستم شبکه ای گفته می شود صفحه مورد نظرتان را بسازید ؛

سیستم شبکه ای بوت استرپ ۴ با استفاده از Flexbox ساخته شده و اجازه ساخت ستون را تا ۱۲ عدد می دهد .

دقت داشته باشید که ستون یا ستون ها باید در ردیف خود قرار بگیرند ؛ هر ردیف با کلاس row  شناخته می شود و تمام ردیف ها باید در یک ظرف قرار داده شوند ؛ در مورد ظرف ها (Container) که در جلسه اول آموزش بوت استرپ مطرح شد بیشتر بخوانید .

اندازه هر ستون بر اساس طرح مورد نظر شما ایجاد می شود ؛ دقت داشته باشید جمع ستون ها در هر ردیف از ۱۲ بیشتر نباشد .

کلاس های شبکه ای

پنج نوع کلاس شبکه ای در بوت استرپ ۴ موجود است :

col-  دستگاه های بسیار کوچک – عرض صفحه نمایش کمتر از ۵۷۶px

col-sm- دستگاه های کوچک – عرض صفحه نمایش مساوی یا بزرگتر از ۵۷۶px

col-md- دستگاه های متوسط – عرض صفحه نمایش مساوی یا بزرگتر از ۷۶۸px

col-lg- دستگاه های بزرگ – عرض صفحه نمایش مساوی یا بزرگتر از ۹۹۲px

col-xl- دستگاه های خیلی بزرگ – عرض صفحه نمایش مساوی یا بزرگتر از ۱۲۰۰px

نمونه از ستون های مساوی

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

در مثال بالا ۴ ستون مساوی قرار داده شده که جمع آن ها ۱۲ است ؛

نکته : در دستگاه های موبایل یا زمانی که عرض صفحه نمایش کمتر از ۵۷۶ پیکسل باشد ، ستون ها در زیر هم قرار میگیرند .

یک نمونه از ستون های غیر مساوی

<div class="row">
  <div class="col-md-4">.col-sm-4</div>
  <div class="col-md-8">.col-sm-8</div>
</div>

نمونه کامل سیستم شبکه ای بوت استرپ ۴

<!-- ردیف سر صفحه -->
<div class="row">
<div class="col-md-12"> Header </div>
</div>
<!-- ردیف محتوا و سایدبار -->
<div class="row">
<div class="col-md-9"> Header </div>
<div class="col-md-3"> Header </div>
</div>