چطور میشه توی بوت استرپ ۵ یه jumbotron ساخت؟
How to create Jumbotron in Bootstrap 5?
سلام به همه من تازه کار با بوت‌استرپ ۵ رو شروع کردم و میخوام یه jumbotron مثل اون چیزی که توی نسخ ه‌های قبلی بوت استرپ بود درست کنم. توی داک جدید بوت‌استرپ ۵ چیزی پیدا نکردم که دقیقا بهم بگه چطور این کار رو بکنم.
سلام توی بوت استرپ ۵، کلاس jumbotron که توی نسخه های قبلی بود، حذف شده. ولی نگران نباش، چون با استفاده از کلاس های جدید و امکاناتی که بوت استرپ ۵ ارائه داده، به راحتی میتونی یه jumbotron مشابه بسازی.
کلاس‌های container، row، col و کلاس های مربوط به تایپوگرافی و پس زمینه میشه تا همون استایل رو بسازیم.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap 5 Jumbotron</title>
</head>
<body>
<div class="container mt-5">
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Hello, world!</h1>
<p class="col-md-8 fs-4">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<button class="btn btn-primary btn-lg" type="button">Learn more</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
از یک div با کلاس‌های p-5 (paddingو mb-4 margin-bottom و bg-light پس‌زمینه روشن استفاده کردیم که توی بوت‌استرپ جایگزین جامبوترون شده. این کلاس‌ها باعث میشن یه کادر بزرگ و جذاب داشته باشیم.
از کلاس‌های تایپوگرافی مثل display-5 برای تیتر و fs-4 برای متن استفاده کردیم که به ما کمک میکنن متن ها رو بزرگ تر و جذاب تر کنیم.
با کلاس btn و btn-primary، دکمه با استایل جذاب ساختیم.