Tutoriel Bootstrap 3  

Bootstrap 3 est le framework HTML, CSS et  JavaScript  le plus populaire pour le développement de projets réactifs sur le web mobiles en premiers.

Tutoriel Bootstrap 3

Qu’est ce que Bootstrap 3 ?

Bootstrap 3 est un framework libre facile et rapide pour le développement Web.

Bootstrap 3 inclut du  HTML et CSS selon des modèles de conception pour le développement Web, formulaires, boutons, tableaux, navigation, carrousels image et beaucoup d'autres, comme optionnel plugins JavaScript.

Bootstrap 3 vous permet  également  de créer facilement des modèles Responsive.

Qu’est ce que Responsive Web Design ?

Responsive web design est  la création de sites web qui s'ajustent automatiquement eux-mêmes à la surface de l’écran de  tous les appareils, des petits téléphones aux grands ordinateurs de bureau.

Pourquoi utiliser Bootstrap 3 ?

Facile à utiliser : Toute personne connaissant des notions de HTML et CSS peut commencer à utiliser Bootstrap 3

Sensibilité : Responsive CSS de Bootstrap 3 s'adapte aux téléphones, tablettes et ordinateurs de bureau

Première approche Mobile: Dans Bootstrap 3 le style pour mobile en premier fait partie du cadre de base

Compatibilité avec les navigateurs : Bootstrap 3 est compatible avec tous les navigateurs modernes (Chrome, Firefox, Internet Explorer, Safari et Opera)

Où se procurer Bootstrap 3 ?

Vous pouvez utiliser Bootstrap 3 sur votre propre site web de deux manières:

· Si vous souhaitez télécharger et héberger Bootstrap 3 vous-même, allez à  getBootstrap 3.com et suivez les instructions.

· Si vous ne voulez pas télécharger et héberger Bootstrap 3 vous-même, vous pouvez inclure Bootstrap 3 à partir d'un CDN (Content Delivery Network)

CDN pour Bootstrap 3

Pour inclure Bootstrap 3  depuis un CDN nous allons utiliser MaxCND.

MaxCDN prend en charge CDN de Bootstrap 3 CSS et JavaScript.

Sélectionner le code

  <!-- Dernière mise à jour minimisé de CSS Bootstrap 3 -->
  <link rel="stylesheet"href="http://maxcdn.Bootstrap3cdn.com/Bootstrap 3/3.3.5/css/Bootstrap3.min.css">
  <!-- Dernière mise à jour minimisé de JavaScript Bootstrap 3 -->
  <script src="http://maxcdn.Bootstrap3cdn.com/Bootstrap 3/3.3.5/js/Bootstrap3.min.js"></script>
  <!-- librairie jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

 

Il faut Également inclure jQuery :

Comment créer une page Web avec Bootstrap 3 ?

1. Utilisation de la Doctype HTML 5

Bootstrap 3 utilise des éléments HTML et des propriétés CSS qui nécessitent la Doctype HTML 5

Sélectionner le code

  <!DOCTYPE html>
  <html lang="fr">
    <head>
      <meta charset="utf-8"> 
    </head>
  <body>
  </body>
  </html>

 

Donc il faut  toujours inclure la balise Doctype du HTML5 au début de la page, ainsi que l'attribut lang et la <meta> du jeu de caractères correct :  

2. Bootstrap 3 est conçu pour le mobile en premier

Bootstrap 3 est surtout conçu pour s adapter aux appareils mobiles. Le styles Mobile en premier  fait partie du cadre de base.

Alors pour garantir le bon rendu et touche zoom, on doit ajouter la balise <meta> suivante à l'intérieur de l'élément <head> :

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

L’attribut width=device-width est la partie qui définit la largeur de la page pour suivre la largeur de l'écran de l'appareil (qui varie suivant l'appareil).

L’attribut initial-scale=1 est la partie qui définit le niveau de zoom initial lorsque la page est chargée par le navigateur.

3. Les conteneurs

Bootstrap 3  nécessite également un élément conteneur pour encapsuler le contenu de la page.

Il y a deux classes de conteneur au choix :

  1. La classe .container prévoit un conteneur responsive à largeur fixe.
  2. La classe .container-fluid prévoit un conteneur à plein largeur, couvrant toute la largeur de la fenêtre qui sera  affiché.

Remarque : Les conteneurs ne sont pas emboîtables (vous ne pouvez pas mettre un conteneur à l'intérieur d'un autre conteneur).

Ce qui nous donne deux pages possible:

Une page avec la classe .container

 L'exemple qui suit montre le code pour une page  de base Bootstrap 3  avec un conteneur responsive à largeur fixe:

Sélectionner le code

  <!DOCTYPE html>
  <html lang="fr">
  <head>
    <title> Exemple de page web avec Bootstrap 3
  </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
  initial-scale=1">
    <link rel="stylesheet"href="http://maxcdn.Bootstrap
  3cdn.com/Bootstrap 3/3.3.5/css/Bootstrap
  3.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.Bootstrap
  3cdn.com/Bootstrap 3/3.3.5/js/Bootstrap
  3.min.js"></script>
  </head>
  <body>
  <div class="container">
    <h1>Ma première Page Bootstrap 3 </h1>
    <p>Ceci est un paragraphe.</p> 
  </div>
  
  </body>
  </html>

 

Une page avec la classe .container-fluid  

L'exemple qui suit montre le code pour une page de base  Bootstrap 3  (avec un conteneur pleine largeur) :

Sélectionner le code

  <!DOCTYPE html>
  <html lang="fr">
  <head>
    <title> Exemple de page web avec Bootstrap 3 </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/Bootstrap3.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-fluid">
    <h1>Ma première Page Bootstrap 3 </h1>
    <p>Ceci est un paragraphe.</p> 
  </div>
  </body>
  </html>

 

chapitre précédent chapitre suivant

Par carabde 25 decembre 2015