oujood.com

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.
Dans ce tutoriel nous allons voir deux classes importantes , vous apprendrez comment utiliser le composant jumbotron Bootstrap et le composant page-header.

chercher |

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


  Copier 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(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


  Copier 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




Voir aussi nos tutoriel :

Condition switch js

Condition switch js

fonction convert_uudecode, convert_uudecode

Decode une chaîne au format uuencode

fonction strlen, strlen

Calcule la taille d'une chaîne