آموزش بوت استرپ – مقدمه و راه اندازی

asadi

9 سال پیش

قسمت اول آموزش بوت استرپ

در این سری از آموزش بوت استرپ ما به نحوه ایجاد قالب سایت با استفاده از این فریم ورک کاربردی می پردازیم اغلب قالب های امروزی از بوت استرپ استفاده می کنند.

بوت استرپ چیست ؟

بوت استرپ یک فریم ورک قدرتمند است که با آن می توان برنامه های تحت وب را به سرعت ایجاد کرده و توسعه دهیم .

دلایل استفاده از بوت استرپ

پشتیبانی مرورگرها : به وسیله مرورگر های معروف پشتیبانی می شود.
به راحتی قابل یادگیری است : با دانستن تنها HTML و CSS می توان از Bootstrap استفاده کرد.
طراحی واکنشگرا : CSS موجود در Bootstrap واکنشگرا بوده و خود را با دسکتاپ ها ، موبایل ها و تبلت ها تطبیق می دهد.
راه حلی یکدست و تمیز برای ایجاد رابط کاربری در اختیار برنامه نویسان قرار می دهد.
شامل کامپوننت های زیبا و کاربردی که به راحتی قابلیت سفارشی سازی دارند.
و از بهترین ویژگی های آن متن باز ( open source) بودن است .

آموزش استفاده از بوت استرپ

در این قسمت نحوه استفاده از Bootstrap و ساختار فایل های آن را توضیح می دهیم .

دانلود بوت استرپ

برای دانلود آخرین نسخه Bootstrap به http://getbootstrap.com/ بروید :

در اینجا ۲ دکمه وجود دارد :

Download Bootstrap : با انتخاب این گزینه شما می توانید همه فایل های از قبل کامپایل شده و فشرده شده شامل CSS و JavaScript و فونت ها را دانلود کنید. این قسمت شامل داکیومنت ها و فایل های کد منبع اصلی نمی شود.
Download Source : این گزینه آخرین نسخه کد های منبع Bootstrap LESS و JavaScript را مستقیما از GitHub دانلود می کند.

برای درک راحت مطالب ما از گزینه اول که شامل فایل های از قبل کامپایل شده و آماده Bootstrap می باشد استفاده می کنیم . همچنین در زمان نوشتن این متن از آخرین نسخه Bootstrap 3 استفاده شده است .

ساختار فایل ها

بعد از اینکه بوت استرپ را دانلود کرده و آن را از حالت فشرده خارج کردید ساختار پوشه ها و فایل ها به شکل زیر خواهد بود:

هماگونه که می بینید شامل فایل های CSS و JS که با (*.boostrap) و هچنین فایل های فشرده CSS و JS که با (*.bootstrap.min) شروع می شوند می باشد. فونت ها و آیکن ها نیز به صورت اختیاری قابل استفاده درقالب می باشند.

قالب HTML

یک قالب HTML پایه که از bootstrap استفاده می کند به شکل زیر است:

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"      
<!-- Bootstrap -->
      <link href="css/bootstrap.min.css" rel="stylesheet">

      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media          queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0 html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

همانگونه که می بینید فایل های jquery.js و bootstrap.min.js و bootstrap.min.css جزء فایل های اصلی قالب bootstrap می باشند.

asadi