Bootstrap 5 Jumbotron
Bootstrap 3 中引入了 Jumbotron,它是一个带衬垫的大框,用于引起人们对某些特殊内容或信息的额外注意。
Bootstrap 5 不再支持 Jumbotron。但是,您可以使用 <div>
元素并添加特殊辅助类和颜色类来实现相同的效果:
Jumbotron 示例
<!DOCTYPE html>
<html>
<head>
<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 mt-3">
<h2>Example of Jumbotron</h2>
<div class="mt-4 p-5 bg-primary text-white rounded">
<h1>Jumbotron Example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..</p>
</div>
</div>
</body>
</html>
总结
本文介绍了Bootstrap 5 Jumbotron的使用,如有问题欢迎私信和评论