bootstrapیکی از مهمترین قسمتهای طراحی وب این هست که صفحات درست و بدون مشکل از همون اول به صورت مرتب در همه مرورگر ها نمایش داده شوند .

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

این فریم وورک توسط توییتر ارایه شده و گسترش داده میشه..

 

این آموزش بر اساس نسخه Bootstrap 2.3.2 ایجاد شده که بعد از این آموزش نسخه 3 نیز آموزش داده خواهد شد .

مزایای استفاده از Bootstrap  :

  • افزایش سرعت کار و طراحی سریع ( تا 50٪ در وقت طراح صرفه جویی میشود )
  • استاندارد بودن کدها و نیز نمایش درست در تمامی مرورگر ها
  • Responsive کردن قالب ( نمایش صحیحی در موبایل ، تبلت و … )
  • شرکت های بزرگی مثل مایکروسافت در net mvc4 و فریم ورک yii , zend و سیستم های مدیریت محتوایی مثل joomla 3 و .. از بوت استرپ استفاده میکنند
  • تحت حمایت شرکت بزرگی مثل تویتر است و بنابراین نسبت به برنامه های مشابه قابل اعتماد تر است
  • در همه مرورگر ها به درستی نمایش داده میشه

 

شروع :

از لینک زیر نسخه 2.3.2 را میتوانید دانلود کنید

http://getbootstrap.com/2.3.2

نسخه rtl شده را نیز میتوانید از لینک زیر دانلود کنید :

دانلود بوتسترپ به صورت راست چین شده

دانلود فایل psd برای نمایش grid بندی

 

در پروژه فوق یک فایل index.html  داریم که کد آن به صورت زیر است و کلیه فایلهای css و jquery را به آن لینک کردیم :

در کد فوق div با کلاس container بدنه اصلی کدنویسی سایت ما است

فایل style.css را هم برای نوشتن css های دلخواه اضافه کردیم

فایل های جاوا اسکریپت را هم به آخر پروژه اضافه کریدیم تا سرعت page بالا باشد .

Like
0

دسته بندی‌ها: آموزش,طراحی وب

برچسب‌ها : <<,,>>

دیدگاه خود را بنوبسید