بخش ۱: شروع کار
آموزش بوتاسترپ ۵ – شروع کار (Get Started)
بوتاسترپ ۵ چیست؟
بوتاسترپ محبوبترین فریمورک HTML، CSS و JavaScript در جهان برای ایجاد وبسایتهای واکنشگرا و اول-موبایل است. بوتاسترپ ۵ (نسخه منتشر شده در سال ۲۰۲۱) جدیدترین نسخه از بوتاسترپ است که با اجزای جدید، استایلشیتهای سریعتر و پاسخگویی بهتر عرضه شده است.چرا از بوتاسترپ ۵ استفاده کنیم؟
- استفاده آسان: هر کسی با دانش پایه از HTML و CSS میتواند شروع به استفاده از بوتاسترپ کند.
- ویژگیهای واکنشگرا: طراحیهای بوتاسترپ با موبایل، تبلت و دسکتاپ سازگار است.
- رویکرد اول-موبایل: در بوتاسترپ ۵، استایلهای اول-موبایل بخشی از هسته اصلی فریمورک هستند.
- سازگاری با مرورگرها: بوتاسترپ ۵ با تمام مرورگرهای مدرن (Chrome، Firefox، Edge و Safari) سازگار است.
اولین صفحه با بوتاسترپ ۵
برای شروع کار، میتوانید از کد پایه زیر استفاده کنید. این مثال شامل یک هدر تمامعرض و سه ستون است که در موبایل به صورت خودکار زیر هم قرار میگیرند.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap 5 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.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div class=”container-fluid p-5 bg-primary text-white text-center”>
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class=”container mt-5″>
<div class=”row”>
<div class=”col-sm-4″>
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</p>
</div>
<div class=”col-sm-4″>
<h3>Column 2</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco…</p>
</div>
<div class=”col-sm-4″>
<h3>Column 3</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco…</p>
</div>
</div>
</div>
</body>
</html>
خروجی بصری کد بالا:
My First Bootstrap Page
Resize this responsive page to see the effect!
Column 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit…
Column 2
Ut enim ad minim veniam, quis nostrud exercitation ullamco…
Column 3
Ut enim ad minim veniam, quis nostrud exercitation ullamco…
تفاوت بوتاسترپ ۵ با نسخههای ۴ و ۳
بوتاسترپ ۵ جدیدترین نسخه است. اگرچه نسخههای ۳ و ۴ هنوز محبوب هستند، اما نسخه ۵ تغییرات زیر را ایجاد کرده است:- حذف وابستگی به jQuery: بوتاسترپ ۵ اکنون از جاوااسکریپت خالص (Vanilla JS) استفاده میکند.
- عدم پشتیبانی از Internet Explorer: نسخه ۵ دیگر از مرورگرهای IE 10 و ۱۱ پشتیبانی نمیکند.
- بهبود سیستم گرید: اضافه شدن سطح جدید XXL برای نمایشگرهای بسیار بزرگ.
- کتابخانه آیکونهای جدید: بوتاسترپ ۵ اکنون آیکونهای SVG اختصاصی خود را دارد.
راهاندازی بوتاسترپ ۵ از طریق CDN
اگر نمیخواهید فایلها را دانلود کنید، میتوانید با استفاده از لینکهای شبکه توزیع محتوا (CDN)، بوتاسترپ را مستقیماً در فایل خود فراخوانی کنید:
<!– Latest compiled and minified CSS –>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
<!– Latest compiled JavaScript –>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js”></script>
تگ Meta Viewport برای موبایل
بوتاسترپ ۵ برای رندر صحیح در موبایل و دستگاههای لمسی، نیاز به تنظیم Viewport دارد. تگ زیر را حتماً در بخش<head> قرار دهید:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
محفظهها (Containers)
بوتاسترپ به یک عنصر نگهدارنده برای بستهبندی محتویات سایت نیاز دارد. دو کلاس اصلی برای این کار وجود دارد:- کلاس
.container: محفظهای با عرض ثابت و واکنشگرا ایجاد میکند. - کلاس
.container-fluid: محفظهای با عرض کامل (تمام عرض صفحه) ایجاد میکند.
<div class=”container”>
<!– محتوا با عرض ثابت در اینجا قرار میگیرد –>
</div>
<div class=”container-fluid”>
<!– محتوا با عرض کامل در اینجا قرار میگیرد –>
</div>
پایان بخش اول: شروع کار