شروع کار (Get Started)
اینجا با «شروع سریع بوت استرپ 5» آشنا می شوی. «فریم ورک (Framework)» یعنی جعبه ابزار آماده برای ساخت وب. همچنین «ریسپانسیو (Responsive)» یعنی صفحه در موبایل و دسکتاپ درست می نشیند. حالا قدم به قدم پیش برو و نمونه ها را امتحان کن.
شروع سریع بوت استرپ 5: نمونه کامل
این نمونه از منبع است. کد را باز کن، ویرایش کن، سپس نتیجه را ببین. مثل تمرین کلاس، تغییر بده و یاد بگیر.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Bootstrap Page</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>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
درباره نسخه ها و تفاوت ها
بوت استرپ 5 تازه تر است و سریع تر عمل می کند. همچنین از جاوااسکریپت استاندارد استفاده می کند. دیگر به jQuery وابسته نیست. مرورگرهای مدرن پشتیبانی می شوند. اما IE11 پشتیبانی نمی شود. نسخه های 3 و 4 فقط وصله حیاتی می گیرند.
گرفتن بوت استرپ 5: CDN یا دانلود
«سی دی ان (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>
نکته: اگر فقط بخش CSS را می خواهی، اسکریپت ها لازم نیستند. اما برای مودال و تولتیپ لازم می شوند.
دو صفحه پایه: Container و Container-Fluid
«کانتینر (Container)» محتوایت را جمع وجور نگه می دارد. «کانتینر-فلوید (Container-Fluid)» تمام عرض صفحه را می گیرد. مثل کیف کوچک در برابر کوله پشتی.
نمونه با Container
<!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.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">
<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>
نمونه با Container-Fluid
<!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.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">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container.</p>
</div>
</body>
</html>
گام های عملی پیشنهادی
- CDN را در <head> اضافه کن.
- یکی از کانتینرها را انتخاب کن.
- یک ردیف و سه ستون بساز.
نکته: «موبایل-فرست (Mobile-First)» یعنی طراحی از نمایشگر کوچک شروع شود. سپس برای بزرگ ترها گسترش بده.
ادامه مسیر یادگیری
حالا سراغ کانتینرها برو و تنظیمات دقیق را ببین. برای شروع سریع بوت استرپ 5 نیز می توانی از این پیوند داخلی استفاده کنی.
جمع بندی سریع
- از CDN شروع کن و سریع تست بزن.
- Container جمع وجور است؛ Fluid تمام عرض است.
- بوت استرپ 5 به jQuery وابسته نیست.
- IE11 پشتیبانی نمی شود.