Bootstrap 3 : le système de grille et les requêtes média

Nous connaissons tous Bootstrap, car c'est le framework web en open source le plus populaire. Mark Otto et Jacob Thorton ont réussi à créer l'un des frameworks CSS les plus puissants des jamais conçus.

Lorsque Bootstrap 3 a été publié, le changement le plus intéressant était la différence dans les systèmes de grille. Bootstrap 2 répondait à deux tailles de navigateur différentes (ordinateur de bureau puis mobile). Avec Bootstrap 3, vous construisez d'abord avec le mobile en tête, et le système de grille vous permet de créer différentes grilles en fonction de la taille du navigateur.Une tendance similaire est observée dans la version la plus récente du cadre - Alpha Release of the Bootstrap 4.

Exemple de colonnes avec Bootstrap 3

Cela peut être un peu difficile à saisir au début, voici un exemple. Disons que vous voulez un site qui a :

• 1 colonne sur les appareils extra-petits
• 2 colonnes sur les appareils petits ET moyens
• 4 colonnes sur de gros appareils

Puisque le système de grille se déconnecte maintenant des appareils mobiles, voici à quoi ressemblera ce code.

Nous n'avons pas besoin de définir quoi que ce soit pour les petits périphériques, car la valeur par défaut est une colonne. Nous devons définir une taille de grille pour les petits appareils, mais pas pour les appareils de taille moyenne. C'est parce que la grille cascade. Donc, si vous définissez une taille à sm, alors ce sera la taille de la grille pour sm, md et lg. Nous allons expliquer les différentes tailles de grille et comment vous les créez, puis montrer des exemples.

Les tailles de la grille

C'est la meilleure partie du nouveau système de grille. Vous pouvez réellement afficher votre grille sur 4 tailles de navigateur différentes. Voici la répartition des différentes tailles.

.col-xs-$	Extra Small	Téléphones moins de 768px
.col-sm-$	Small Devices	Tablettes de  768px et plus
.col-md-$	Medium Devices	Ordinateurs de bureau de 992px et plus
.col-lg-$	Large Devices	Grands ordinateurs de bureau de 1200px et plus

Les documents officiels Bootstrap donnent une compréhension beaucoup plus complète du fonctionnement de la grille. Jetez y un coup d'œil pour avoir une meilleure vue d'ensemble des tailles de colonnes, des tailles de gouttières, des tailles de colonnes maximales et de la largeur maximale de votre site global en fonction de la taille du navigateur.

Tailles par défaut pour la grille Bootstrap

Parfois, vous devrez utiliser des requêtes média pour que votre site fonctionne comme vous le souhaitez. Connaître les tailles de grille par défaut est essentiel pour étendre la grille Bootstrap. Nous avons rédigé un petit conseil pour vous montrer les tailles par défaut, alors jetez un œil si vous avez besoin des requêtes média et des points d'arrêt Bootstrap.

Points d'arrêt de requête de média de Bootstrap 3

Bootstrap 3 est un framework front-end et mobile-first. J'ai inclus l'ordre correct pour les requêtes média ci-dessous, mais j'ai également inclus en bas les premiers points d'arrêt non mobiles dans le cas où certaines personnes ne sont pas habituées à la méthodologie mobile-first puisque techniquement les deux fonctionneront. Min-Width: Fait référence à tout ce qui est supérieur ou égal au montant donné. Max-Width: Fait référence à tout ce qui est inférieur ou égal au montant donné.

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/
 
 
 
 
	/*==========  Mobile First Method  ==========*/
 
	/* Custom, iPhone Retina */
	@media only screen and (min-width : 320px){
 
	}
 
	/* Extra Small Devices, Phones */
	@media only screen and (min-width : 480px){
 
	}
 
	/* Small Devices, Tablets */
	@media only screen and (min-width : 768px){
 
	}
 
	/* Medium Devices, Desktops */
	@media only screen and (min-width : 992px){
 
	}
 
	/* Large Devices, Wide Screens */
	@media only screen and (min-width : 1200px){
 
	}
 
 
 
	/*==========  Non-Mobile First Method  ==========*/
 
	/* Large Devices, Wide Screens */
	@media only screen and (max-width : 1200px){
 
	}
 
	/* Medium Devices, Desktops */
	@media only screen and (max-width : 992px){
 
	}
 
	/* Small Devices, Tablets */
	@media only screen and (max-width : 768px){
 
	}
 
	/* Extra Small Devices, Phones */
	@media only screen and (max-width : 480px){
 
	}
 
	/* Custom, iPhone Retina */
	@media only screen and (max-width : 320px){
 
	}

Points d'arrêt de requête de média de Bootstrap 2.3.2

/*=====================================================
=            Bootstrap 2.3.2 Media Queries            =
=====================================================*/
@media only screen and (max-width : 1200px){
 
}
 
@media only screen and (max-width : 979px){
 
}
 
@media only screen and (max-width : 767px){
 
}
 
@media only screen and (max-width : 480px){
 
}
 
@media only screen and (max-width : 320px){
 
}

Utilitaires Responsive

Tout comme Bootstrap 2, Bootstrap 3 fournit des utilitaires responsive pour cacher et afficher les éléments en fonction de la taille du navigateur. Cela nous aidera également à définir notre système de grille.

.visible-xs
.visible-sm
.visible-md
.visible-lg
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg

Cela aide parce que nous sommes en mesure de montrer certains éléments en fonction de la taille. Dans nos exemples d'aujourd'hui, nous allons montrer une barre latérale supplémentaire sur les grands ordinateurs de bureau.

Exemples

Voici quelques exemples de grilles que vous pouvez créer. Nous allons passer en revue quelques sites de base que certaines personnes pourraient vouloir et montrer à quel point il est facile de construire un site avec la grille Bootstrap 3.

Simple: Grand écran d'ordinateur de bureau vs écran mobile

Imaginons que vous vouliez qu'un site contienne 1 colonne sur les périphériques extra-petits (téléphone) et petits (tablettes), 2 colonnes sur les périphériques de taille moyenne (de bureau moyen) et 4 colonnes sur les périphériques de grande taille (de bureau).

Voici le code pour cet exemple :

Intermédiaire : Afficher la colonne supplémentaire sur les grands ordinateurs de bureau

Ceci est un exemple intéressant et excellent que la nouvelle grille excelle. Disons que vous avez un site qui a une barre latérale et une section de contenu principal. Pour les périphériques très petits, vous voulez une colonne, le contenu principal avec la barre latérale empilée en dessous. Pour les appareils de petite et moyenne taille, nous souhaitons que la barre latérale et le contenu principal soient côte à côte. Maintenant, pour les gros appareils, nous voulons utiliser l'espace sur des appareils plus gros. Nous voulons ajouter une barre latérale supplémentaire pour afficher plus de contenu. Nous changeons la taille du contenu principal pour couvrir 6 colonnes sur les grands appareils pour faire de la place pour notre deuxième barre latérale. C'est un excellent moyen d'utiliser l'espace sur des bureaux plus grands. Et voici le code pour cet exemple.

Avancé : Grille différente pour chaque taille

Ce sera un exemple plus complexe. Disons qu'à aucun moment dans notre système de grille, nous ne voulons que toutes nos colonnes soient empilées. Pour les très petits appareils, nous voulons 2 colonnes. Pour les petits appareils, nous voulons 3 colonnes. Pour les appareils de taille moyenne, nous voulons 4 colonnes. Pour les grands appareils, nous voulons 6 colonnes (une qui s'affiche que sur les gros appareils).

Vous obtenez l'exercice maintenant. Disons simplement dans l'exemple et le code.

Vous pouvez voir que lorsque la taille du navigateur diminue, les colonnes commencent à se former. En outre, le contenu à l'intérieur de chacun va commencer à empiler.

C'est grillestique !

Vous pouvez voir à quel point il est facile de construire des sites complexes et dynamiques avec la grille Bootstrap 3. Depuis les sites de colonnes mobiles 2 jusqu'à la dissimulation complexe et l'affichage d'éléments sur de grands bureaux, vous pouvez créer n'importe quel type de site. J'espère que ces exemples vous donneront une idée de la flexibilité du nouveau système de grille et de toutes les grandes choses que vous pouvez créer.

Si vous avez déjà un site Web HTML avec un panneau d'administration existant, vous pouvez consulter nos MODÈLES BOOTSTRAP POUR PANNEAUX D'ADMINISTRATION. Ces  thèmes bootstrap vous montreront la pleine puissance de Bootstrap 3 !