اساس شبکه Bootstrap ورژن 4

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

سیستم شبکه بوت استرپ با flexbox ساخته شده و اجازه می دهد تا تا 12 ستون در سراسر صفحه ایجاد شود.
اگر نمیخواهید از تمام 12 ستون به طور جداگانه استفاده کنید، می توانید ستونها را با یکدیگر گروه بندی کنید تا ستون های گسترده تر ایجاد کنید:

Bootstrap 4 Grid System

سیستم شبکه ریسپانسیو است و ستونها بسته به اندازه صفحه نمایش به صورت خودکار مرتب می شوند.

کلاس های شبکه

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

  • -col. (دستگاه های کوچک اضافی - عرض صفحه نمایش کمتر از 576 پیکسل)
  • -col-sm.(دستگاه های کوچک - عرض صفحه نمایش برابر یا بیشتر از 576 پیکسل)
  • -col-md. (دستگاه های متوسط - عرض صفحه نمایش برابر یا بیشتر از 768 پیکسل)
  • -col-lg. (دستگاه های بزرگ - عرض صفحه نمایش برابر یا بیشتر از 992 پیکسل)
  • -col-xl. (دستگاه های xlarge - عرض صفحه نمایش برابر یا بیشتر از 1200px)

کلاس های بالا می توانند برای ایجاد طرح های پویا و انعطاف پذیر تر ترکیب شوند.

نکته: هر کلاس مقیاس دارد، بنابراین اگر می خواهید همان عرض را برای sm و md تنظیم کنید، فقط باید sm را مشخص کنید.

ساختار پایه یک بوت استرپ 4 شبکه

زیر ساختار اصلی یک شبکه بوت استرپ 4 است:

<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

سه ستون مساوی

Three Equal Columns bootstrap

مثال زیر نشان می دهد که چگونه سه ستون  که عرض برابری دارند و در تمام دستگاه ها و عرض صفحه نمایش نشاده داه می شود ایجاد کرد:

سه ستون مساوی
 <div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div> 
مشاهده مثال

ستون های ریسپانسیو

Responsive Columns Bootstrap

مثال زیر نشان می دهد که چگونه می توان چهار ستون برابر با شروع از تبلت و گسترش دادن  به دسکتاپ های بزرگ ایجاد کرد. در تلفن های همراه یا صفحه نمایش هایی که کمتر از 576 پیکسل عرض هستند، ستون ها به طور خودکار در بالای یکدیگر قرار می گیرند:

ستون های ریسپانسیو
 <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> 
مشاهده مثال

دو ستون غیر مساوی ریسپانسیو

Two Unequal Responsive Columns Bootstrap

مثال زیر نشان می دهد که چگونه دو ستون با عرض مختلف با شروع از تبلت وگسترش به دسکتاپ بزرگ ایجاد کنید:

دو ستون غیر مساوی ریسپانسیو
 <div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div> 
مشاهده مثال

نکته: بعدا در این آموزش بیشتر درباره شبکه Bootstrap 4 خواهید آموخت.

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

نظرات

ناهید نمازی بسیار عالی ممنون از این درس ها ، لطفا ادامش رو هم بذارید

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط