Définit la marge du haut d'un élément
Dans ce tutoriel nous allons voir deux classes importantes , vous apprendrez comment utiliser le composant jumbotron Bootstrap et le composant page-header.
Dans ce tutoriel nous allons voir deux classes importantes , vous apprendrez comment utiliser le composant jumbotron Bootstrap et le composant page-header.
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:
Code : HTML
<!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>
Un en-tête de page(bootstrap page header) 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:
Code : HTML
<!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