خانه (Home)
به دنیای بوت استرپ 5 خوش آمدی! اینجا «آموزش بوت استرپ 5» را ساده می گیریم. بوت استرپ یک «فریم ورک (Framework)» برای ساخت رابط های وب است. ریسپانسیو یعنی صفحه با موبایل و دسکتاپ سازگار می شود. همین امروز شروع کن و با مثال ها بازی کن.
شروع سریع با مثال بوت استرپ 5
در منبع، یک نمونه آماده وجود دارد. ویرایش کن و نتیجه را ببین. مثل زنگ کامپیوتر، سریع تمرین کن.
<!doctype html>
<html lang="fa">
<head>
<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">
<title>Hello Bootstrap 5</title>
</head>
<body>
<div class="container py-4">
<h1 class="mb-3">سلام بوت استرپ 5</h1>
<p class="mb-3 text-muted">یک متن نمونه برای شروع.</p>
<button class="btn btn-primary" type="button">دکمه نخست</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"><\/script>
</body>
</html>
گام های تمرینی سریع
- کد را در ادیتور باز کن.
- متن دکمه را تغییر بده.
- کلاس btn-secondary را امتحان کن.
نکته: «کلاس (Class)» مثل برچسب روی لباس است. ظاهر را عوض می کند.
تفاوت های نسخه 5 با 3 و 4
نسخه 5 سریع تر و پاسخ گوتر است. از جاوااسکریپت استاندارد استفاده می کند. به jQuery وابسته نیست. اینترنت اکسپلورر 11 پشتیبانی نمی شود. نسخه های 3 و 4 هنوز وصله های حیاتی می گیرند. اما ویژگی تازه نمی گیرند.
تمرین و آزمون
با تمرین ها دستت راه می افتد. سپس کوییز بده و خودت را بسنج.
مسیر ادامه یادگیری
- برو به شروع کار و ابزارها را بشناس.
- متن ها را در تایپوگرافی زیبا کن.
- با کامپوننت ها رابط حرفه ای بساز.
جمع بندی سریع
- آموزش بوت استرپ 5 با مثال زود نتیجه می دهد.
- نسخه 5 وابسته به jQuery نیست.
- IE11 پشتیبانی نمی شود.
- تمرین و کوییز، یادگیری را محکم می کند.
- از کلاس ها برای استایل سریع استفاده کن.