شروع کار با بوت استرپ 5
شروع به کار با Bootstrap5
Bootstrap یک فریمورک و ابزار قدرتمند و پر از ویژگی های مختلف است. هر چیزی از قالب های اولیه تا تولید بهترین سایت های را در چند دقیقه بسازید.
چرا از بوت استرپ استفاده کنیم؟
· استفاده آسان: هر کسی با دانش اولیه HTML و CSS می تواند شروع به استفاده از Bootstrap کند .
· ویژگی‌های واکنش‌گرا:CSS واکنش‌گرا Bootstrap با تلفن، تبلت و دسک‌تاپ تنظیم می‌شود.
· رویکرد اول موبایل: در بوت استرپ، سبک های موبایل اول بخشی از چارچوب اصلی هستند
· سازگاری با مرورگر: Bootstrap 5 با تمام مرورگرهای مدرن (Chrome، Firefox، Edge، Safari و Opera) سازگار است.
✅شاید بخواهید بدانید : چرا باید از فریم ورک بوت استرپ (Bootstrap) استفاده کنید؟
Bootstrap 5 را از کجا تهیه کنیم؟
دو راه برای شروع استفاده از Bootstrap 5 در وب سایت خود وجود دارد.
1. شامل Bootstrap 5 از CDN
2. Bootstrap 5 را از getbootstrap.com دانلود کنید
CDN بوت استرپ 5
اگر نمی‌خواهید Bootstrap 5 را خودتان دانلود و میزبانی کنید، می‌توانید آن را از CDN (شبکه تحویل محتوا) اضافه کنید.
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
یکی از مزایای استفاده از Bootstrap 5 CDN:
بسیاری از کاربران در حال حاضر Bootstrap 5 را هنگام بازدید از سایت دیگری از jsDelivr دانلود کرده اند. در نتیجه، هنگام بازدید از سایت شما از حافظه پنهان بارگیری می شود که منجر به زمان بارگذاری سریعتر می شود. همچنین، اکثر CDN ها اطمینان حاصل می کنند که به محض اینکه کاربر یک فایل را از آن درخواست کرد، از نزدیکترین سرور به آنها ارائه می شود، که همچنین منجر به زمان بارگذاری سریعتر می شود.
جاوا اسکریپت؟
بوت استرپ 5 از جاوا اسکریپت برای اجزای مختلف (مانند مدال، راهنمای ابزار، پاپاور و غیره) استفاده می کند. با این حال، اگر فقط از بخش CSS Bootstrap استفاده می کنید، به آنها نیازی ندارید.
دانلود بوت استرپ 5
اگر می‌خواهید خودتان Bootstrap 5 را دانلود و میزبانی کنید، به https://getbootstrap.com/ بروید و دستورالعمل‌های آنجا را دنبال کنید.
اولین صفحه وب خود را با بوت استرپ 5 ایجاد کنید
· ابتدا doctype HTML5 را اضافه کنید
· بوت استرپ 5 از عناصر HTML و ویژگی های CSS استفاده می کند که به Doctype HTML5 نیاز دارند.
· همیشه doctype HTML5 را در ابتدای صفحه به همراه ویژگی lang و مجموعه عنوان و کاراکتر صحیح قرار دهید:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
</head>
</html>
بوت استرپ 5 برای موبایل
بوت استرپ طوری طراحی شده است که به دستگاه های تلفن همراه پاسخگو باشد. برای اطمینان از رندر مناسب و بزرگنمایی لمسی، تگ <meta> زیر را در عنصر <head> اضافه کنید:
<meta name="viewport" content="width=device-width, initial-scale=1">
قسمت width=device-width عرض صفحه را طوری تنظیم می کند که از عرض صفحه دستگاه پیروی کند (که بسته به دستگاه متفاوت خواهد بود).
زمانی که صفحه برای اولین بار توسط مرورگر بارگیری می شود، قسمت initial-scale=1 سطح بزرگنمایی اولیه را تعیین می کند.
✅ شاید بخواهید بدانید : دانلود رایگان قالب
کانتینرها
Bootstrap 5 همچنین به یک عنصر حاوی برای بسته بندی محتویات سایت نیاز دارد.
دو کلاس کانتینر برای انتخاب وجود دارد:
کلاس .container یک کانتینر با عرض ثابت پاسخگو را ارائه می دهد
کلاس.container-fluid یک کانتینر با عرض کامل را فراهم می کند که کل عرض نمای درگاه را در بر می گیرد
مثال زیر کد یک صفحه اصلی Bootstrap 5 را نشان می دهد:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>