Bootstrap Jumbotron et en-tête de Page

Dans ce tutoriel nous allons voir deux classes importantes , vous apprendrez comment utiliser le composant jumbotron Bootstrap et le composant page-header.

Tutoriel Bootstrap 3

Mettre en évidence un contenu avec Jumbotron

Le composant  jumbotron de Bootstrap fournit un excellent moyen de mettre en valeur les principaux contenus ou informations d’une page web. Juste envelopper votre contenu, que vous voulez mettre en valeur,  comme les entêtes, les descriptions etc. dans un élément <div> et lui  appliquer la classe .jumbotron.
Un jumbotron indique une grosse boîte pour attirer l’attention supplémentaire sur un contenu spécial ou un renseignement.
Un jumbotron est affiché comme une boîte avec un fond gris et avec des coins arrondis. Il augmente également les tailles de police du texte qui se trouve à l'intérieur.
Astuce : À l'intérieur d'un jumbotron, vous pouvez mettre  n'importe quel texte  HTML valide, y compris les autres éléments et classes de Bootstrap.
Utilisez un élément <div> avec la classe .jumbotron pour créer un jumbotron comme suit:

Sélectionner le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</head>
<body>
<div class="container">
  <div class="jumbotron">
    <h1> Tutoriel de Bootstrap </h1> 
    <p> Bootstrap est le cadre HTML, CSS et JS le plus populaire pour le développement réactifs, mobile en premier du web.</p> 
  </div>
  <p>Ceci est un texte.</p> 
  <p>Et ceci est aussi un texte.</p>
</div>
Placez le jumbotron en dehors de la <div class="container"> si vous voulez que la largeur du jumbotron s'étendre jusqu'aux bords de l'écran et sans coins arrondies:
<div class="jumbotron">
  <h1> Tutoriel de Bootstrap </h1> 
    <p> Bootstrap est le cadre HTML, CSS et JS le plus populaire pour le développement réactifs, mobile en premier du web.</p> 
</div>
<div class="container">
  <p>Ceci est un texte.</p> 
  <p>Et ceci est aussi un texte.</p>
</div>
</body>
</html>

 

Création d'un en-tête de Page

Un en-tête de page est comme un diviseur de section.
La classe .page-header ajoute une ligne horizontale sous le titre en plus elle ajoute un espace supplémentaire autour de l'élément :
Pour  créer un en-tête de page utilisez un élément <div> avec la classe .page-header:

Sélectionner le code

 
<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
  <h1>Exemple d’entête de page</h1>
</div>
  <p>Ceci est un texte.</p> 
  <p>Et ceci est aussi un texte.</p>
</div>
</body>
</html>
 
 


chapitre précédent chapitre suivant

Par carabde 25 decembre 2015