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

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

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

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

     

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

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

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

     

    شروع :

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

    http://getbootstrap.com/2.3.2

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

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

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

     

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

     <!DOCTYPE html>  
    <html>  
      <head>  
    
              <meta charset="utf-8">
    	<title>قالب اصلی طراحی </title>  
    	<meta name="description" content="">
    	<meta name="author" content="">
               
    	<!-- Mobile Specific Meta -->	
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
                 <!-- Stylesheets -->
         
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link rel="stylesheet" href=" assets/css/bootstrap-responsive.css" />
         <link rel="stylesheet" href=" assets/css/style.css" />
      
      </head> 
     
      <body>  
    
            <div class=container>
    
    نوشتن کد ها در این قسمت
    
    
              </div>
      
        <script src="https://code.jquery.com/jquery.js"></script>  
    
        <script src="bootstrap/js/bootstrap.min.js"></script>  
    
      </body>  
    </html>  
    

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

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

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

    همچنین ببینید:
    گوگل ترنسلیت با عکس؛ مترجم گوگل با اسکن عکس

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

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

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

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