tutoriel-javascript:bootstrap:grille-bootstrap

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Prochaine révision
Révision précédente
tutoriel-javascript:bootstrap:grille-bootstrap [08/08/2015 16:03] – créée zonewebmastertutoriel-javascript:bootstrap:grille-bootstrap [08/10/2019 17:03] (Version actuelle) – modification externe 127.0.0.1
Ligne 3: Ligne 3:
 **Bootstrap** utilise une grille pour le positionnement des éléments sur la page, c'est le cœur du système **Bootstrap**. **Bootstrap** utilise une grille pour le positionnement des éléments sur la page, c'est le cœur du système **Bootstrap**.
  
-Bootstrap étant une bibliothèque jQuery permettant de créer facilement des //[[r#responsive-deign|responsive design]]//, vous comprendrez facilement et l'utilité du système de grille de **Bootstrap**.+Bootstrap étant une bibliothèque //jQuery// permettant de créer facilement des //[[glossaire:r#responsive-design|responsive design]]//, vous comprendrez facilement l'utilité du système de grille de **Bootstrap**. Elle permet de positionner les éléments à l'écran en fonction de la largeur de celui-ci.
  
  
Ligne 18: Ligne 18:
  
  
-exemple de code+Exemple de code (Voir les commentaires intégrés)
 <code html> <code html>
 <div class="row"> <!-- Création d'une ligne --> <div class="row"> <!-- Création d'une ligne -->
Ligne 37: Ligne 37:
 <file> <file>
  
-Format Smartphone     inférieur à 768 pixels de large                   Nom de la class .col-xs-* +Format Smartphone     inférieur à 768 pixels de large                            Nom de la class .col-xs-* 
-Format tablette       compris entre 768 et 992 pixels                   Nom de la class .col-sm-* +Format tablette       compris entre 768 et 991 pixels                            Nom de la class .col-sm-* 
-Format "petit écran"  compris entre 992 et 1200 pixels                  Nom de la class .col-md-* +Format "petit écran"  compris entre 992 et 1200 pixels                           Nom de la class .col-md-* 
-Format "standard"     pour tous les écrans supérieurs à 1200 pixels     Nom de la class .col-lg-*+Format "standard"     pour tous les écrans supérieurs ou égale à 1200 pixels     Nom de la class .col-lg-*
 </file> </file>
  
Ligne 57: Ligne 57:
  
 Rien de tel qu'un cas pratique, dans l’exercice suivant, l'objectif est d'afficher 2 éléments. Le premier de couleur bleu qui contiendra un menu et un second qui contiendra des données de type //"texte"//. Rien de tel qu'un cas pratique, dans l’exercice suivant, l'objectif est d'afficher 2 éléments. Le premier de couleur bleu qui contiendra un menu et un second qui contiendra des données de type //"texte"//.
 +
 +(A finir)
 +
 +===== Notes de version =====
 +
 +  * [18/11/2017] : Harmonisation de la page
 +
 +===== Auteurs et sources =====
 +
 +  * Auteur : [[:user:montuy337513]]
 +
 +===== Navigation =====
 +
 +  * [[:accueil|Accueil]]
 +  * [[:gestion-site-internet]]
 +  * [[:tutoriel-javascript]]
 +  * [[:tutoriel-html]]
 +  * [[:tutoriel-php-mysql]]
 +  * [[:tutoriel-referencement-seo]]
 +
 +<nspages -h1 -exclude:subNs: -textPages="Autres liens rapides pouvant vous intéresser">
  • tutoriel-javascript/bootstrap/grille-bootstrap.1439042586.txt.gz
  • Dernière modification : 08/10/2019 16:41
  • (modification externe)