آموزش فریمورک بوتسترپ برای طراحی سایت – قسمت آخر

0
  • bootstrap

     

     

    نحوه نوشتن 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» برای کادر و سایه دادن به عکس استفاده کنید.

    همچنین ببینید:
    BWMeter 4.3.5

    رنگ بندی متن 
    شما می توانید رنگ های پیش فرض را برای متن پارگراف در نظر بگیرید. رنگ های مختلف را با کلاس های تعیین شده از قبیل «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”

     

    bootstrap3

     

     

     

     

     

     

     

     

     

     

     

     

     

    میانگین امتیازات ۵ از ۵
    از مجموع ۱ رای
    ممکن است شما دوست داشته باشید
    ارسال یک پاسخ

    آدرس ایمیل شما منتشر نخواهد شد.

    این سایت توسط reCAPTCHA و گوگل محافظت می‌شود حریم خصوصی و شرایط استفاده از خدمات اعمال.

    The reCAPTCHA verification period has expired. Please reload the page.