بوت استرپ چیست؟
بوت استرپ یک فریم ورک بوده که این امکان را فراهم می کند به، HTML، سبک و استایل های CSS و اجزای جاوا اسکریپت از پیش نوشته شده دسترسی لازم را داشته باشید. به کمک این ابزار می توانید پروژه خود را راه اندازی کنید. بوت استرپ اجازه ترکیب و ادغام ابزارهای مختلف HTML CSS و جاوا اسکریپت را به افراد داده و می توان به کمک کلاس های مختلف CSS و ماژول های جاوا اسکریپت، قابلیت های مختلفی به پروژه اضافه کرد. حال بهتر متوجه می شوید که آموزش نصب بوت استرپ و یادگیری کار با این فریمورک رایگان و منبع باز، چقدر اهمیت دارد.
آموزش نصب بوت استرپ
به دو روش نصب بوت استرپ امکان پذیر می باشد که در ادامه به بررسی بیشتر این موارد می پردازیم:
نصب از طریق CDN بوت استرپ
افراد این امکان را دارند تا از طریق CDN یا شبکه تحویل محتوا، بوت استرپ را در پروژه خود پیاده سازی کنند. این کار به سادگی و تنها با اضافه کردن چند لینک به برنامه وب امکان پذیر خواهد بود. انجام مراحل زیر باعث نصب بوت استرپ از طریق CDN به شکل موفق خواهد شد.
- ایجاد یک فایل HTML اولیه
در ابتدا ویرایشگر کد خود را باز کنید و یک فایل HTML ایجاد کنید. کد زیر را به عنوان "example.html" در کامپیوتر خود، ذخیره کنید. به کمک این کد، متا تگ ها اضافه می شوند تا اطمینان حاصل شود که محتوا در هر صفحه نمایش، درست مقیاس بندی شود.
- CDN Bootstrap را اضافه کنید.
برای تبدیل فایل HTML به یک الگوی بوت استرپ، باید بوت استرپ CSS و بوت استرپ JS Bundle را به کمک Popper و با استفاده از پیوندها و لینک های CDN، اضافه کنید. برای بارگذاری بوت استرپ CSS، صفحه سبک <link> را قبل از همه شیوه نامه های دیگر در <head> خود کپی کنید.
بسیاری از مولفه های بوت استرپ برای داشتن عملکرد بهتر، به افزونه های جاوا اسکریپت و popper نیاز دارند. bootstrap.bundle.min.js به صورت خودکار شامل popper می شود. از popper به عنوان راهنمای ابزار و popovers استفاده می شود که در این مرحله کافی است تا کد اسکریپت زیر را در انتهای برنامه وب خود، درست قبل از بسته شدن برچسب یا تگ </body> قرار دهید.
جهت پیاده سازی ایمن تر و امن تر برخی ویژگی ها به لینک های CDN اضافه شده است که شما زمانی که در حال بارگیری قطعه کدی بر روی سرور دیگر هستید، این ویژگی به شما این اطمینان را می دهد تا برای نصب بوت استرپ، دقیقا همان چیزی که می خواهید را دانلود کنید. پس از افزودن لینک های CDN، کد به شکل زیر خواهد بود. این فایل را به عنوان bootstrap_example.html ذخیره کنید.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Example</title>
<!-- Bootstrap CSS -->
"link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css>
rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" rossorigin="anonymous
<body>
<h1>Let's build our first Bootstrap powered webpage!</h1>
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
بعد از رویت این قسمت، با موفقیت بوت استرپ به برنامه وب اضافه می شود. اما به منظور درک مزایای نصب و استفاده از بوت استرپ بهتر است از کلاس های CSS از پیش موجود استفاده کنید.
- کلاس های بوت استرپ را اضافه کنید.
از کلاس Bootstrap Alert CSS برای استفاده از رنگ ها به جهت افزودن معنی به متنی مانند پیامهای اخطار message alert استفاده می شود. در کد زیر، کلاس "alert alert-success" یک کلاس CSS از قبل موجود در بوت استرپ می باشد که می توان به راحتی توسط هر کاربری برای ایجاد پیام موفقیت یا هشدار استفاده شود.
<div class="alert alert-success" role="alert">
Success Message
</div>
کلاس های Bootstrap Alert CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Example</title>
<!-- Bootstrap CSS -->
"link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css>
"rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC
<"crossorigin="anonymous
<body>
<h1>Let's use Bootstrap Alert Component</h1>
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert
نصب از طریق دانلود بوت استرپ
شما می توانید نصب بوت استرپ را از طریق دانلود انجام دهید. برای این کار باید فایل های CSS و جاوا اسکریپت را از وب سایت رسمی آن ها در سیستم خود دانلود کرده و در برنامه وب خود قرار دهید. مراحل این کار به شرح زیر است:
- Bootstrap را دانلود کنید.
برای نصب بوت استرپ، نیاز است آخرین نسخه بوت استرپ را دانلود کنید. به منظور این کار به لینک دانلود بوت استرپ مراجعه کرده و سپس در قسمت Download به قسمت Compiled CSS and JS رفته و روی Download کلیک کنید.
بعد از دانلود به محل ذخیره سازی فایل در دستگاه خود بروید و فایل را از حالت فشرده خارج کنید. مطالب دانلود شده به صورت زیر خواهند بود:
-
فایل های CSS و JS (bootstrap.*) کامپایل شده
-
CSS و JS کامپایل و کوچک شده (bootstrap.min.*)
-
نقشه های منبع (bootstrap.*.map) برای کار با برخی ابزارهای توسعه دهنده مرورگر
-
فایلهای JS همراه (bootstrap.bundle.js و minified bootstrap.bundle.min.js) که شامل Popper است.
افراد می توانند بر اساس نیازها و برنامه های تحت وب خود، از یکی از فایل های بالا استفاده کنند. کاملا استفاده کردن از فایل ها بستگی به نیاز و پروژه شما دارد.
- محتویات را در همان دایرکتوری سند HTML کپی کنید.
فایل "example.html" را در کامپیوتر خود ایجاد کرده و محتویات فایل های زیپ نشده مانند پوشه های CSS و js را در همان دایرکتوری "example.html" کپی کنید.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Example</title>
</head>
<body>
<h1>Let's build our first Bootstrap powered webpage using Bootstrap Download!</h1>
</body>
</html>
- فایل Bootstrap CSS و JS را در سند HTML بارگیری کنید.
برای بارگذاری Bootstrap CSS، به پوشه CSS کپی شده بروید و فایل "bootstrap.min.css" را پیدا کنید. مسیر فایل را کپی کرده و در قسمت href قرار دهید.
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
به همین صورت برای بارگذاری Bootstrap JS، به پوشه js رفته و مسیر فایل bootstrap.min.js را کپی کرده و در قسمت src کد زیر قرار دهید.
<script src="bootstrap/js/bootstrap.min.js"></script>
در نهایت عبارت <script> زیر را در انتهای فایل example.html خود، قبل از بسته شدن تگ </body> قرار دهید. از قرار گرفتن تمامی کدها کنار هم، کد زیر ایجاد می شود:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Example</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<h1>Let's build our first Bootstrap powered webpage using Bootstrap Download!</h1>
<!-- Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
در صورتی که این دستور نمایش داده شود، شما موفق شده اید مراحل نصب بوت استرپ از طریق دانلود به صورت محلی را پشت سر بگذارید.
مزایا و معایب نصب بوت استرپ با فایل و CDN
|
دانلود Bootstrap |
Bootstrap CDN |
|
زمانی که از Bootstrap Download استفاده کنید، زمان بارگذاری ثابت باقی خواهد ماند. |
استفاده از CDN بوت استرپ به دلیل ذخیره سازی در سرورهای نزدیک به محل جغرافیایی شبکه CDN، منجر به بارگذاری سریعتر می شود. |
|
دانلود بوت استرپ هیچ وابستگی به پیوندهای CDN نداشته و همیشه فعال است. |
ممکن است گاهی اوقات CDN کار نکند یا به دلیل تنظیمات پروکسی یا سیاست های امنیتی، پیوند CDN از کار بیفتد. |
|
پهنای باند سرور ثابت می ماند. |
باعث کاهش مقدار پهنای باند استفاده شده توسط سرور شما خواهد شد. |
کدام ورژن بوت استرپ برای استفاده مناسب است؟
زمانی که وارد داکیومنت فریم ورک بوت استرپ شوید، از بالا و سمت راست سایت می توانید ورژن دلخواه خود را انتخاب کنید. در حال حاضر ورژن نهایی بوت استرپ نسخه 4.5 است در صورتی که هنوز بسیاری از دوستان از نسخه 3 این فریم ورک استفاده می کنند. وقتی فریم ورک یا کتابخانه ای آپدیت می شود، یعنی ایرادات نسخه های قبلی برطرف شده و امکانات جدید تری به ورژن جدید آن اضافه شده است. بنابراین بهتر است از نسخه آخر بوت استرپ استفاده کنید.
سفارشی سازی بوت استرپ
بوت استرپ یک فریم ورک است و تمام نیازهای یک پروژه را ممکن است نتواند پوشش دهد. به عنوان مثال شاید کاربر بخواهد که سایت را با یک گرید بندی دلخواه ریسپانسیو کند و یا یکی از کامپوننت های بوت استرپ را با استایل دلخواه خود استفاده کند، که در این شرایط باید کدهای پیش فرض بوت استرپ سفارشی سازی (customize) شود.
برای سفارشی سازی بوت استرپ، یک فایل css ایجاد کرده و سپس از فایل bootstrap.css به آن لینک کنید و هر کلاسی از بوت استرپ را که می خواهید استایل آن را تغییر دهید، در فایل style.css اسم کلاس را بنویسید و استایل های مدنظر خود را نسبت دهید. به هیچ وجه سورس کد بوت استرپ را تغییر ندهید و برای کاستومایز کردن حتما از یک فایل css اکسترنال استفاده کنید.
مجموعه پلن سایت توصیه می کند از Bootstrap CDN استفاده کنید؛ چرا که اگر کاربر برنامه وب، قبلا فایل های بوت استرپ را هنگام بازدید از سایت بارگیری کرده باشد، این اطلاعات در کش او بارگذاری شده و زمان بارگذاری را سریعتر می کند. حتی اگر کاربر این موارد را دانلود نکرده باشد، درخواست فایل به نزدیکترین سرور جغرافیایی شبکه CDN رفته و باز هم منجر به زمان بارگذاری سریعتر خواهد شد.
