همانطور که در مقاله "بوت استرپ چیست؟" توضیح داده شد، بوت استرپ ساخت صفحات اینترنتی را بسیار سریع و راحت تر  کرده است. خوشبختانه فرایند دانلود، نصب و استفاده از بوت استرپ (Bootstrap) نیز فوق العاده آسان است!

فایل های CSS و JavaScript بوت استرپ را دانلود می کنید، در پیج خود به آن ها لینک می دهید و همین! بوت استرپ آماده ی استفاده است.

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

انتخاب نسخه بوت استرپ

نسخه های متداول بوت استرپ 3 و 4 می باشند!

با اینکه نسخه جدیدتر 4 چند وقتی است که عرضه شده است اما نسخه 3 همچنان طرفداران خود را دارد. نسخه 3 با مرورگرهای قدیمی تر بهتر تا می کند در حالی نسخه 4 امکانات و قابلیت های پیشرفته تری ارئه می دهد.

اگر پشتیبانی از مرورگر های قدیمی در اولویت نیست بهتر است از آخرین نسخه یعنی Bootstrap 4 استفاده کنید.

دانلود بوت استرپ (Bootstrap)

پس از انتخاب نسخه مورد نظر نوبت به دانلود بوت استرپ می رسد که می توان به روش های نسبت به انجام اینکار اقدام کرد...

  • با استفاده از CDN. این روش آسان ترین راه حل ممکن است! فقط کافی است در پیج خود به فایل های CDN بوت استرپ لینک بدهید و تمام! بوت استرپ آماده استفاده است. اگر تنها به استایل های Bootstrap نیاز دارید می توانید فقط فایل CSS را بکار بگیرید و به فراخور نیازتان به امکانات جانبی از فایل های JS نیز استفاده کنید. روش CDN با وجود اینکه خیلی آسان است اما قطعا به درد پروژه های واقعی نمی خورد و اگر قصد تمرین کردن یا ارائه ی دمویی چیزی داشته باشید می تواند بسیار مفید واقع شود.
  • با استفاده از کاستومایزر (Customizer). کمتر کسی بوت استرپ را بدون سفارشی سازی استفاده می کند. خوشبختانه می توان با استفاده از Bootstrap Customizer تقریبا تمامی المان های آن را شخصی سازی کرد. مزیت بزرگ این روش اینست که می توانید برخی امکاناتی که نیاز ندارید را از فایل نهایی حذف کنید و حجم آن را تا حد زیادی کاهش دهید. اگه کار کردن با متغیر ها و کدهای کاستومایزر بوت استرپ برایتان دشوار است می توانید از ابزار Live Customizer استفاده کنید که تغییرات را به صورت زنده به شما نشان می دهد.
  • دانلود فایل ها به صورت مستقیم. کسانی که می خواهند فایل های بوت استرپ را روی سیستم خود داشته باشند و تغییرات را مستقیما اعمال کنند باید از این روش کمک بگیرند. در صفحه ی دانلود بوت استرپ می توان هم سورس کامل و هم فایل های کامپایل شده ی آن را دانلود کرد. اگر در کدنویسی دستی دارید یا پروژه ای آماده می کنید توصیه ی ما اینست که سورس آن را کامل دانلود کرده و نسخه ی نهایی را خودتان با تغییراتی که لازم دارید، تهیه کنید.
  •  با استفاده از پکیج منیجر. برای کاربران حرفه ای تر امکان استفاده از ابزارهای مدیریت پکیج یا Package Manager که کار با کتابخانه ها و فریم ورک های مختلف را بسیار آسان می کنند فراهم شده است. این ابزار ها شامل composer, npm, bower و ... می شوند و به راحتی با وارد کردن یک خط فرمان ساده تمامی فایل های مورد نیاز شما را به پروژه تان اضافه می کنند. راه اندازی و یادگیری این روش اندکی زمان بر است اما اگر به صورت حرفه ای کدنویسی می کنید قطعا ارزش امتحان کردن را دارد.
npm install bootstrap 👍

چگونه بوت استرپ (Bootstrap) را نصب و استفاده کنیم؟

صرف نظر از روشی که برای دانلود استفاده کردید باید به نحوی فایل ها را به HTML خود وارد کنید!

برای اینکار واضح است که فایل های CSS باید در تگ <head> قرار گیرند و فایل های JavaScript در صورتی که از ابزارهای جانبی بوت استرپ استفاده می کنید در انتها پیش از بسته شدن تگ <body> وارد می شوند.

لازم به ذکر است که برای نمایش درست صفحه در موبایل، تبلت و ... باید از دستور viewport meta استفاده کرد و برای اجرای جاوا اسکریپت، وارد کردن کتابخانه jQuery نیز ضروری است.

قالب شروع به کار بوت استرپ:

<!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>

در صورتی که سورس Bootstrap را کامل دانلود کرده اید و می خواهید فایل های LESS یا SASS را خودتان ویرایش کنید باید ابتدا با یک کامپایلر این فایل ها را به CSS تبدیل کنید که آموزش روش انجام اینکار در این مقاله نمی گنجد.

حرف آخر؟

پیشنهاد می شود هنگام اعمال تغییرات تا جای ممکن کدهای هسته ی Bootstrap را ویرایش نکنید تا در صورتی که نسخه ی جدیدی از این فریم ورک در دسترس قرار گرفت بتوانید به راحتی آن را با نسخه کنونی جایگزین کنید. همچنین اگر بوت استرپ را برای یک پروژه ی واقعی بکار می گیرید، فایل های CSS و JavaScript نهایی آن را تا جایی که می شود فشرده و کم حجم کنید تا تاثیر منفی روی سرعت سایت شما نداشته باشد.

مطالب مرتبط