oujood.com

Tutoriel Bootstrap

Le framework HTML, CSS et JavaScript boostrap 3 pour créer vos pages web responsives qui s'adaptent automatiquement avec les différentes largeurs des écrans
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.

chercher |

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.

Code : HTML


  Copier 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

Code : HTML


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

Code : HTML


  Copier 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) :

Code : HTML


  Copier 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

MARKETPOWER-IA
Logiciel d'I.A.
Logiciel d'I.A. 100% Français pour lancer son business en ligne

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'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE

Consulter


1tpe