Bootstrap 5 Jumbotron
-
Jumbotron مكون مرن flexible وخفيف الوزن Lightweight لعرض المحتوى خاص او معلومات. تم تقديم jumbotron في Bootstrap 3. ولم تعد Jumbotrons مدعومة في Bootstrap 5. ومع ذلك ، يمكنك استخدام عنصر <div> وإضافة helper classes خاصة مع color class لتحقيق نفس التأثير
نطبق المثال التالي حتى نفهم الموضوع:
<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Example of Jumbotron</h2>
<div class="mt-4 p-5 bg-primary text-white rounded">
<h1>Jumbotron Example</h1>
<p>
تنازلوا عن دوركم في إصلاح الناس، وأصلحوا أنفسكم.
</p>
<p>
من يقع في خطأ فهو إنسان، ومن يصرّ عليه فهو شيطان.
</p>
</div>
</div>
</body>
</html>
النتيجة بتكون :
اترك تعليقك