بستن

info@behinwebdesign.com

توسط

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

نحوه نوشتن css – hack برای دستگاه های مختلف :

 

 

 

مثلا فرض کنید در حالت موبایل میخواهید موقعیت یک کلاس را تغییر دهید

به شکل زیر در فایل style.css  مینویسیم :

چطور فاصله بین grid ها را کم و زیاد کنیم :

با دستورات margin میتوان به میزان دلخواه این فاصله ها را کم و زیاد کرد

 

کار با عکس ها 

شما می توانید برای قرار دادن عکس از تگ معمول <img src=“demo.jpg”/> استفاده کنید. برای اینکه عکس فرم جالب تری پیدا کند می توانید از کلاس هایی همچون «img-rounded» برای عکسهایی با گوشه های گرد، «img-circle» برای نمایش عکس به شکل دایره و «img-polaroid» برای کادر و سایه دادن به عکس استفاده کنید.

رنگ بندی متن 
شما می توانید رنگ های پیش فرض را برای متن پارگراف در نظر بگیرید. رنگ های مختلف را با کلاس های تعیین شده از قبیل «muted» برای خاکستری، «text-warning» برای زرد، «text-error» برای قرمز تیره، «text-info» برای آبی روشن و «text-success» برای رنگ سبز استفاده کرد.

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

ردیف کردن متن
چپ چین، راست چین و وسط چین کردن پاراگراف یا 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”

The following two tabs change content below.
کارشناس رشته مهندسی نرم افزار، فعال در حوزه طراحی وب، افزایش رتبه سایت در گوگل و بازاریابی

پاسخ دهید

ایمیل شما نمایش داده نخواهد شد. فیلدهای با علامت * ضروری هستند

با وب سایتی مناسب تحولی بزرگ در کسب و کار خود ایجاد نمایید.