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

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

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

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

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

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

سیستم شبکه ای Bootstrap 4

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

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

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

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>

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

سیستم شبکه ای Bootstrap 4

<!-- ردیف سر صفحه -->
<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>

 

دسته :آموزش تاریخ :28 مرداد 1397بازدید :836 بار نظرات : 3d نظر
نظرات
ارسال نظر جدید
amin
22 شهریور 1397

سلام وقت بخیر … اگه بخوایم بوت استرپ قالب رو غیر فعال کنیم
باید چیکار کنیم؟

    کدین
    23 شهریور 1397

    با سلام
    لینک فایل CSS بوت استرپ رو از بخش header قالب پاک کنید

علیرضا محسنی
4 آذر 1397

بسیار عالی و کاربردی بود
با تشکر