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

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

به این مطلب امتیاز دهید

امتیاز کلی : 0 / 5. تعداد آرا : 0

اولین نفر باید که به این مطلب امتیاز میدهید

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

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

سیستم شبکه ای بوت استرپ ۴ با استفاده از 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>

 

دسته :آموزش تاریخ :۲۸ مرداد ۱۳۹۷نظرات : 1 نظر
نظرات
ارسال نظر جدید
علیرضا محسنی
4 آذر 1397

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