Download WordPress Themes, Happy Birthday Wishes

Bootstrap Exemples

Ajoutez le doctype HTML 5: Bootstrap utilise des éléments HTML et des propriétés CSS. Vous devez donc ajouter le doctype HTML 5 au début de la page avec l’attribut lang et le bon jeu de caractères.

<!DOCTYPE html>    
<html lang="en">    
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">  
    
<title>Titre de site</title>    
</head>    
<body>    
//écrire un code
</body>    
</html>

Bootstrap est adapté aux mobiles: Bootstrap 3 est conçu pour répondre aux besoins des appareils mobiles.

Les styles Mobile-first font partie du plateforme principal de Bootstrap.Vous devez ajouter la balise <meta> suivante dans l’élément <head> pour obtenir un rendu correct et un zoom tactile:

<meta name="viewport" content="width=device-width, initial-scale=1">

Remarque: La partie « width = device-width » sert à définir la largeur de la page afin qu’elle suive la largeur de l’écran du périphérique (varie en fonction des périphériques).

La partie initial-scale = 1 est utilisée pour définir le niveau de zoom initial lors du premier chargement de la page par le navigateur.

Conteneurs: le conteneur est utilisé pour envelopper le contenu du site. Il existe deux classes de conteneurs.

  • La classe .container fournit un conteneur sensible à largeur fixe.
  • La classe .container-fluid fournit un conteneur de largeur complète, couvrant toute la largeur de la fenêtre.

Remarque: Un conteneur ne peut pas être placé à l’intérieur d’un autre conteneur.

Premier exemple de Bootstrap (avec un conteneur sensible à largeur fixe)

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>Ceci est un exemple Bootstrap</title>  
    
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
</head>  
<body>  
<div class="container">  
  <h1> Première page web Bootstrap</h1>  
  <p>Écrivez votre texte ici ..</p>   
</div>  
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
</body>  
</html>