سیستم Grid در بوت استرپ

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


سیستم Grid در بوت استرپ

سیستم Grid در بوت استرپ (Bootstrap) به شما اجازه میدهد که بر مبنای 12 ستون صفحه ی خود را ایجاد کنید. اگر شما نمیخواهید از 12 ستون به طور مشخص استفاده کنید. میتوانید ستون ها را با هم ترکیب کرده و ستون های عریض تری ایجاد کنید :

grid-bootstrap
سیستم Grid در بوت استرپ واکنش گرا است، و اندازه ستون ها بسته به اندازه ی صفحه نمایش به طور خودکار تغییر میکند.


کلاس های Grid

سیستم Grid در بوت استرپ 4 نوع کلاس دارد :

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

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


ساختار پایه ی یک Grid در بوت استرپ

در نمونه مثال زیر میتوانید یک ساختار Grid در بوت استرپ را مشاهده کنید :

<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>
<div class="row">
  ...
</div>

در نمونه مثال بالا ابتدا یک row ایجاد میکنیم، سپس تعدادی ستون را اضافه میکنیم (ستون هایی که با  کلاس *-*-col. مشخص شده اند). دقت داشته باشید که مجموع اعداد در ستون هایی که با *-*-col. برای هر row مشخص میشوند باید برابر با عدد 12 باشد.

در زیر نمونه مثال هایی آورده شده است که میتوانید با استفاده از آنها سیستم گرید در بوت استرپ را به سادگی فرا بگیرید.


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

Tree-Equal-column-bootstrap

 

در نمونه مثال زیر میتوان مشاهده نمود که چطور میتوان به ساختاری سه ستونی با پهنایی برابر رسید که از تبلت ها تا دسکتاپ های بزرگ مقیاس پذیر است و در تلفن های همراه یا صفحه نمایش هایی که پهنای آنها از 768 پیکسل کمتر باشد ستون ها به صورت خودکار در زیر هم قرار میگیرند : 

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

دو ستون با پهنای متفاوت

two-notEqual-column-bootstrap

 

در نمونه مثال زیر میتوان مشاهد کرد که چطور میشود به ساختاری دو ستونی با پهنایی نابرابر رسید که از تبلت ها تا دسکتاپ های بزرگ مقیاس پذیر است :

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

 

منتشر شده در ۶ آبان ۱۳۹۶ حمید رضا ملکی ۱۱۱۸ بازدید
دیدگاه ها
امیر احمدی شنبه ۲۹ اردیبهشت ۱۳۹۷

سلام خسته نباشید ممنونم از سایت خوبتون استایل خوب و روانی دارد. لطفا گرید های دیگر هم توضیح بدید. سوالی داشتم: چرا در زیر از دو تا کلاس xs و md استفاده شده؟ فرق اینا رو نمیدونم چرا باید همزمان از دو تا کلاس استفاده کنیم؟ class="col-xs-6 col-md-10"

مدیر سایت شنبه ۲۹ اردیبهشت ۱۳۹۷

سلام. دلیل استفاده همزمان از چندین کلاس این هست که شما میخواهید دیزاین مورد نظرتون در صفحه نمایشگر های مختلف متفاوت نشون داده بشند. نمونه مثال زیر را در نظر بگیرید :

<div class="row">
  <div class="col-xs-12 col-md-4">div1</div>
  <div class="col-xs-12 col-md-4">div2</div>
  <div class="col-xs-12 col-md-4">div3</div>
</div>

کد بالا رو این طور میشه تفسیر کرد : در نمایش گر های کوچک (xs) یعنی موبایل ها با توجه به اینکه برای هر div مقدار 12 در نظر گرفته شده است (حداکثر ظرفیت در حالت عادی برای بوت استرپ 12 است) پس این سه تا div زیر هم قرار میگیرند و و در نمایش گر های متوسط (md) هر کدام از div ها 1/3 از فضا را در کنار هم دیگر اشغال میکنند.