web-dev-qa-db-fra.com

Comment créer un en-tête de page dans Bootstrap 4?

Depuis le .page-header class est obsolète dans Bootstrap 4, comment créer un en-tête de page avec le même style que Bootstrap 3 .page-header classe?

twitter-bootstrap-3bootstrap-4deprecated
23
pgmank

Selon le documents de migration , les classes d’utilitaires Bootstrap 4 doivent être utilisés à la place:

<div class="pb-2 mt-4 mb-2 border-bottom">
      Page header
</div>

https://www.codeply.com/go/20jBKvMkHx

  • pb-2 - bas de rembourrage 2 unités d'espacement
  • mt-4 - marge supérieure 4 unités d'espacement
  • mb-2 - marge inférieure 2 unités d'espacement
  • border-bottom - border-bottom: 1px RGB solide (222, 226, 230)
28
Zim

À ma connaissance, il n'y a pas de remplacement direct dans bootstrap 4 pour le bootstrap 3 .page-header.

Cependant, le CSS pour le bootstrap 3 .page-header est simplement:

padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eee;

Vous pouvez donc créer votre propre classe dans votre fichier css:

.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eee;
}
3
TidyDev