شروع به کار با Bootstrap

در این دوره آموزشی از نرم افزار Visual Studio Code برای ساخت صفحات استفاده می شود. در صورتیکه با این نرم افزار آشنایی ندارید می توانید از بخش آموزش HTML مقالات مربوط به نصب و نحوه استفاده از این نرم افزار را مطالعه فرمایید.

فایل های مورد نیاز

برای استفاده از بوت Bootstrap  می بایست لینک فایل های زیر را در قسمت head پروژه اضافه نمایید.

  1. فایل CSS مربوط به Bootstrap که شامل کلاس های CSS جهت استایل دهی به عناصر می باشد.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
  1. کتابخانه jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  1. کتابخانه جاوا اسکریپت مربوط به  Popper
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  1. کتابخانه جاوا اسکریپت مربوط به Bootstrap
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

طراحی اولین صفحه

جهت طراحی اولین صفحه، در محل دلخواه یک پوشه ایجاد و پس از بازکردن آن در برنامه Visual Studio Code، یک صفحه Html بسازید و لینک های مورد نیاز را در قسمت head اضافه نمایید.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Beno Academy | Bootstrap Tutorial</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  </head>
  <body></body>
</html>

هنگام استفاده از Bootstrap می بایست عملکرد کلاس های موجود در آن را یاد بگیرید تا با ترکیب آنها بتوانید صفحات مورد نیازتان را طراحی کنید.

Container

این کلاس همواره به عنصر اصلی (div اصلی) صفحه اختصاص داده می شود که در بر گیرنده سایر عناصر می باشد و به دو شکل قابل استفاده است:

  • container: کادری با عرض ثابت که چپ و راست آن خالی می باشد.
  • container-fluid: کادری با عرض 100% که کل صفحه را می پوشاند.
<body>
    <div class="container">
        <h1>Welcome to Bootstrap</h1>
    </div>
</body>

در صورتیکه لینک های مربوط به Bootstrap را به درستی انجام داده باشید، با ذخیره سازی و اجرای کدهای فوق، صفحه ای همانند تصویر زیر نمایش داده خواهد شد.

اولین برنامه بوت استرپ

Border

در صورتیکه قصد داشته باشید برای container خود حاشیه نیز اضافه کنید تا محدوده آن مشخص باشد، می توانید کلاس border را نیز به div اضافه کنید.

<div class="container border">
    <h1>Welcome to Bootstrap</h1>
</div>

نکته: در صورتی که قصد داشته باشید بیش از یک کلاس را برای عنصری اعمال کنید، می بایست بین نام کلاس های مختلف فاصله (space) قرار دهید.

طراحی Responsive

مهمترین هدف Bootstrap طراحی صفحات Responsive(واکنش گرا) می باشد. بطوریکه صفحه طراحی شده عملکردی متناسب با اندازه صفحه نمایش داشته باشد. در Bootstrap چهار اندازه متفاوت برای نمایشگرها در نظر گفته شده است که هرکدام از آنها با پیشوند خاصی معین می گردند.

اندازه صفحه نمایش در بوت استرپ

بنابراین هنگامی که عبارت lg ذکر می شود منظور ما صفحه نمایش هایی بزرگتر 992px می باشد.