Real Time Web Analytics کانال تلگرام لرن روت

Bootstrap

آموزش Bootstrap - درس دوم

نویسنده : محمد مظفری
تاریخ انتشار:
21:24:07 1394-07-15
bootstrap, responsive

فریم ورک Bootstrap چیست ، چه قابلیت هایی دارد، راههای دانلود آن کدامند و چگونگی پیاده سازی آن. لرن روت در این مقاله به بررسی کامل مبانی Bootstrap پرداخته است. لطفا همراه ما باشید.

همانگونه که در قسمت قبلی دیدیدم بوت استرپ صفحه را به 12 ستون تقسیم می کرد.

اگر شما نمی خواهید از 12 ستون آن به صورت جداگانه استفاده کنید می توانید با دسته بندی آنها کار کنید. مانند عکس زیر:

سیستم نمایش Grid بوت استرپ دارای 4 کلاس متفاوت برای دستگاههای با سایز متفاوت می باشند که عبارتند از:

xs = برای موبایل ها

sm = برای تبلت ها

md = برای صفحات دسکتاپ

lg = برای صفحات دسکتاپ بزرگ

اصول ساختار سیستم نمایش Grid بوت استرپ:

<div class="row">
  <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 می سازیم. سپس به ستون هایمان عدد مورد نظر خود را می دهیم.

به جای * اولی باید کلاس مورد نظر را بنویسیم و به جای * دومی باید عدد خود را قرار دهیم.( البته به یاد داشته باشید که جمع کل ستون ها درون یک کلاس row باید برابر با 12 باشد. )

در هنگام طراحی اگر بخواهیم، برای همه صفحات مناسب نشان داده شود می توانیم از ترکیب این کلاس ها استفاده کنیم. برای مثال در قطعه کد زیر مشخص کرده ایم که div در همه دستگاهها به اندازه کل صفحه باشد.

می توانیم مشخص کنیم که در صفحات کوچک برابر با تمام صفحه باشد ولی در صفحات بزرگ نصف صفحه باشد. فقط کافی است عدد جلوی lg ( یا هر سایز مورد نظر دیگری) را برابر با 6 قرار داد.

<div class="row">
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>
</div>

 

برچسب ها:
مقالات مشابه