راهنمای کامل دانلود و نصب بوت استرپ
بوت استرپ مشهورترین فریم‌ورک برای طراحی سایت ریسپانسیو است. در این نوشته می‌خواهیم روشی آسان برای دانلود و نصب بوت استرپ برای استفاده در طراحی سایت را آموزش بدهیم.
۱- دانلود بوت استرپ
برای استفاده از بوت استرپ، روش‌های مختلفی وجود دارد. اگر می‌خواهید فایل‌های بوت استرپ را به ساده‌ترین شکل ممکن دانلود و استفاده کنید، می‌توانید از صفحه Github پروژه، آخرین نسخه dist را دانلود کنید.
در حال حاضر آخرین نسخه‌ی موجود، ۵.۳.۳ است و ما فایل « bootstrap-5.3.3-dist.zip» را دانلود می‌کنیم.
۲- درج کدهای CSS در صفحه
بخش اصلی بوت‌استرپ، قسمت‌های css آن است که با استفاده از کد زیر می‌توانید آن‌ها را در سایت خود درج کنید:
|
1 |
<link rel="stylesheet" href="css/bootstrap.min.css"> |
۳- درج کدهای جاوااسکریپت بوت استرپ
برخی از قابلیت‌های بوت‌استرپ با کمک جاوااسکریپت قابل استفاده می‌باشند. جهت استفاده از تمامی امکانات این فریم‌ورک، ابتدا لازم است تا jQuery و سپس Popper.js را دانلود کنید:
پس از دانلود دو کتابخانه‌ی فوق، کدهای زیر را برای درج بوت‌استرپ در سایت خود، جایی در انتهای فایل html درج کنید:
|
1 2 3 |
<script src="js/jquery-3.7.1.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> |
در صورت تمایل می‌توانید از بسته‌ی bundle بوت استرپ که خود حاوی Popper.js است به شکل زیر استفاده کنید:
|
1 2 |
<script src="js/jquery-3.4.1.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script> |
قالب HTML کامل بوت استرپ
برای آسان‌تر شدن کار می‌توانید از قالب زیر برای تولید فایل HTML استفاده کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <main> <h1>Welcome</h1> Bootstrap Template by <a href="https://rokaweb.ir/">rokaweb.ir</a> </main> <script src="js/jquery-3.7.1.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script> </body> </html> |
منبع: راهنمای بوت استرپ