نحوه نوشتن css – hack برای دستگاه های مختلف :
/* Large desktop */ @media (min-width: 1200px) { ... } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... } /* Landscape phones and down */ @media (max-width: 480px) { ... }
مثلا فرض کنید در حالت موبایل میخواهید موقعیت یک کلاس را تغییر دهید
به شکل زیر در فایل style.css مینویسیم :
@media (max-width: 480px) { .btn { float:left; margin-top:5px; }
چطور فاصله بین grid ها را کم و زیاد کنیم :
با دستورات margin میتوان به میزان دلخواه این فاصله ها را کم و زیاد کرد
کار با عکس ها
شما می توانید برای قرار دادن عکس از تگ معمول <img src=“demo.jpg”/> استفاده کنید. برای اینکه عکس فرم جالب تری پیدا کند می توانید از کلاس هایی همچون «img-rounded» برای عکسهایی با گوشه های گرد، «img-circle» برای نمایش عکس به شکل دایره و «img-polaroid» برای کادر و سایه دادن به عکس استفاده کنید.
رنگ بندی متن
شما می توانید رنگ های پیش فرض را برای متن پارگراف در نظر بگیرید. رنگ های مختلف را با کلاس های تعیین شده از قبیل «muted» برای خاکستری، «text-warning» برای زرد، «text-error» برای قرمز تیره، «text-info» برای آبی روشن و «text-success» برای رنگ سبز استفاده کرد.
ردیف کردن متن
چپ چین، راست چین و وسط چین کردن پاراگراف یا div می تواند توسط کلاس های text-right، text-left و text-center انجام شود.
موارد زیر را میتوان طراحی کرد با بوتسترپ :
از لینک های زیر ایستفاده کنید :
http://getbootstrap.com/2.3.2/components.html
http://getbootstrap.com/2.3.2/javascript.html
ساخت Alerts
ساخت Modal
ساخت Accordion
ساخت اسلایدر
ساخت Tooltip
ساخت Tab content
———————————————————————-
تغییرات مربوط به بوتسرتپ 3 نسبت به نسخه 2.3.2 :
نکته : به کمک لینک زیر میتوان نسخه قبلی بوتسرپ را به نسخه جدید تبدیل کرد :
http://upgrade-bootstrap.bootply.com
How to convert from a 2.x to 3.0 grid without any responsive changes.
· replace .span* with .col-md-*
· replace .container-fluid with .container.
· replace .row-fluid with .row.
به جای span از col-md استفاده شده
مثال :
Class=“Span8” -> class=“ col-md-8”