دانلود بوت استرپ
آخرین نسخه Bootstrap را می‌توانید از آدرس GetBootstrap.com دانلود کنید. با انتخاب کردن لینک، به صفحه اصلی سایت هدایت خواهید شد.
در صفحه اصلی سایت بوت استرپ، می توانید دو گزینه را مشاهده کنید:
- Download Bootstrap: با انتخاب کردن بر روی این گزینه، می‌توانید نسخه‌های کامپایل شده از Bootstrap CSS ، JavaScript ، و فونت‌ها را دانلود کنید. در این بخش، مستندات یا فایل‌های مربوط به کد منبع اصلی گنجانده نشده است.
- Download Source : با انتخاب بر روی این گزینه، می‌توانید آخرین کد منبع Bootstrap LESS و JavaScript را به طور مستقیم از GitHub دریافت نمایید.
اگر با کد منبع کامپایل نشده Bootstrap کار کنید، باید فایل‌های LESS را برای تولید فایل‌های CSS قابل استفاده، کامپایل نماییم. برای کامپایل کردن فایل‌های LESS بهCSS ، بوت استرپ به طور رسمی از Recess استفاده می‌کند، که CSS hinter مبتنی بر less.js است.
برای درک بهتر و سهولت استفاده، از نسخه پیش کامپایل شده بوت استرپ در طول آموزش استفاده خواهیم نمود. از آنجایی که فایل‌ها از پیش کامپایل شده می باشند، لازم نیست که هر بار برای اجرای فایل‌های جداگانه، جهت عملکرد انفرادی آنها دچار زحمت شویم. در زمان نوشتن این آموزش آخرین نسخه (Bootstrap 4.5.2) دانلود شده است.
بوت استرپ از پیش کامپایل شده
هنگامی که نسخه کامپایل شده بوت استرپ دانلود می شود، فایل ZIP را استخراج کرده و ساختار فایل/دایرکتوری زیر را مشاهده خواهید نمود :
همانطور که مشاهده می‌شود، فایل‌های CSS وJS بوت استرپ کامپایل شده و همچنین CSS وJS Bootstrap.min کامپایل شده، وجود دارند.
کد منبع Bootstrap
اگر کد منبع Bootstrap را دانلود کنید، ساختار فایل به صورت زیر است :
- فایل‌های بخش /less و /js کد منبع برایBootstrap CSS و JSبه ترتیب هستند.
- پوشه /dist شامل همه موارد لیست شده در بخش دانلود فایل پیش کامپایل شده در قسمت بالا است.
- /docs-assets ، /examples و همه فایل‌هایhtml.* ، مستندات بوت استرپ هستند.
چگونه بوت استرپ (Bootstrap) را نصب و استفاده کنیم؟
صرف نظر از روشی که برای دانلود استفاده کردید، باید به نحوی فایل‌های بوت استرپ را به صفحه HTML خود وارد کنید!
برای اینکار لازم است که فایل‌های CSS را در تگ
قرار دهید و فایل‌های JavaScript را در صورتی که از ابزارهای جانبی بوت‌استرپ استفاده می‌کنید در انتها صفحه پیش از بسته شدن تگ وارد نمایید.
قالب شروع به کار بوت استرپ:
<!doctype html>
<html>
<head>
<meta charsest="utf-8">
<meta name="viewport" content="width=device-with, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="Bootstrap.css">
<title>Helllllo</title>
</head>
<body>
<h1>Helllo</h1>
<!-- jQuery -->
<script src="jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="Bootstrap.js"></script>
</body>
</html>
امیدواریم که این مطلب برای شما مفید واقع شده باشد، ما را به دوستان خود معرفی کنید.