Как создать jumbotron в Bootstrap 5?
В Bootstrap 5 компонент jumbotron удален в пользу служебных классов, таких как.bg-light для цвета фона и классов.p-* для управления заполнением. Я новичок, может кто-нибудь привести пример, как это сделать?
9 ответов
В миграционных документах вы найдете именно то, что вам нужно знать. В v4.x Bootstrap.jumbotron Компонент буквально таков:
.jumbotron {
padding: 2rem 1rem;
margin-bottom: 2rem;
background-color: #e9ecef;
border-radius: .3rem;
}
Вы можете, за исключением определенного цвета фона, полностью имитировать это без использования этого класса:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<h5>In Bootstrap v4.x</h5>
<div class="jumbotron m-3">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<h5>In Bootstrap v5.x</h5>
<div class="bg-light p-5 rounded-lg m-3">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>При этом, если вы новичок в Bootstrap, я настоятельно рекомендую воздержаться от попыток освоить v5.x, который в настоящее время находится в альфа-версии и подлежит любому количеству изменений.
Я просто использую некоторые из базовых контейнеров и классов начальной загрузки 5, вот пример:
<div class="container-fluid bg-dark text-light p-5">
<div class="container bg-dark p-5">
<h1 class="display-4">Welcome to my Website</h1>
<hr>
<p>Go to My Website</p>
<a href="#" class="btn btn-primary">link</a>
</div>
</div>
Поскольку в версии 5 нет Jumbotron, если вы переходите на версию 5, лучший способ переопределить его - повторно использовать код jumbotron версии 4.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
<style type="text/css">
.jumbotron {
padding: 4rem 2rem;
margin-bottom: 2rem;
background-color: var(--bs-light);
border-radius: .3rem;
}
</style>
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>Вот скрипка: https://jsfiddle.net/fatgamer85/ya37wk4c/2/
Чистое решение Bootstrap 5. Не требуется CSS. Примечание: «jumboton» не поддерживается в Bootstrap 5. Я думаю, что этот подход лучше, вы можете изменить цвет с помощью bg-dark ... и т. д.
Компонент jumbotron удален в пользу служебных классов, таких как .bg-light для цвета фона и классов .p-* для управления заполнением. Ссылка:https://getbootstrap.com/docs/5.0/migration/#jumbotron
вы можете попробовать что-то вроде этого
<div class="container-fluid text-sm-center p-5 bg-light"> <!-- bg-light is background color & p-5 is padding -->
<h1 class="display-2">Full Stack Conf</h1>
<p class="lead">A One-day Conference About All Things JavaScript!</p>
</div>
Дополнительные примеры можно найти здесь:https://getbootstrap.com/docs/5.0/examples/jumbotron/
Создавать класс не нужно, потому что его можно воспроизвести с помощью утилит.
Вот пример jumbotron (Bootstrap v4) для Boostrap v5:
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Custom jumbotron</h1>
<p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in
previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to
your liking.</p>
<button class="btn btn-primary btn-lg" type="button">Example button</button>
</div>
</div>
Источник: https://getbootstrap.com/docs/5.0/examples/jumbotron/
Вы можете использовать следующий фрагмент кода:
<div class="container-fluid bg-light text-dark p-5">
<div class="container bg-light p-5">
<h1 class="display-4 fw-bold">Welcome to Admin Dashboard</h1>
<hr>
<p>Go to My Website</p>
<a href="#" class="btn btn-primary">link</a>
</div>
</div>
Также перейдите по этой ссылке и используйте функцию «проверить элемент», чтобы внести изменения в приведенный выше фрагмент кода в соответствии с вашими потребностями. Пример Джамботрона
Это точно такой же Jumbotron, как и Bootstrap 4. Просто скопируйте и вставьте его в код.
<div class="container py-5 px-3 my-4 rounded" style="background:#E9ECEF">
<h1 class="display-4 pb-2">Welcome to Python Forums</h1>
<p class="lead">Python is a high-level, general-purpose programming language. Its design philosophy emphasizes code readability with the use of significant indentation. Its language constructs and object-oriented approach aim to help programmers write clear, logical code</p>
<hr>
<p class="py-2">This is peer to peer forum for sharing knowledge with each other</p>
<div class="btn btn-primary">Learn more</div>
</div>