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:
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>
Création d'un en-tête de Page(bootstrap page header)
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
La méthode secrète likes sans fin sur Facebook
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
