Accentsconagua

Mobile First avec Bootstrap 3

Code
Share

Il y a quelques semaines, Mark Otto et les autres responsables du développement et de la maintenance de Bootstrap ont annoncé la sortie officielle de la troisième version du framework, et ce, sous stéroïdes. Voyons ce que nous obtenons.

Quoi de neuf?

Tout d’abord, les modifications les plus importantes que vous allez trouver dans la nouvelle version de Bootstrap concernent la prise en charge des sites Web réactifs. En fait, le module responsive a été supprimé. Maintenant, à partir de son noyau, Bootstrap est responsive, plus que cela, cette nouvelle version intègre l'approche de "Mobile First", ce qui signifie que presque tout a été repensé pour une taille d'écran plus petite et une mise à l'échelle plus grande (plus à ce sujet dans un peu).

Presque tout a été repensé et reconstruit pour commencer à partir de vos appareils de poche et évoluer.

En apparence, vous constaterez également de nombreux changements, notamment le fait que tout le style soit plat et qu'il existe un thème optionnel pour un look 2.0-er. De plus, les icônes sont passées d'images en polices, ce qui est très pratique lorsque vous avez besoin de tailles et de couleurs différentes..

Système de grille

Commençons par parler du système de grille, oh la grille, en fait, il y a quatre systèmes de grille dans cette nouvelle version de Bootstrap, chacun fonctionnant exactement de la même manière, se différenciant par la largeur de la taille de l'écran à laquelle ils fonctionnent.

Activer la grille

Pour que le système de grille fonctionne correctement et pour assurer un rendu correct et un zoom tactile, ajoutez la balise méta de la fenêtre d'affichage à votre document:

Grilles de différentes largeurs

Il y a quatre systèmes de grille dans cette nouvelle version du framework, la largeur de la fenêtre d'affichage étant le paramètre qui les différencie. Les largeurs qui définissent les frontières entre elles sont les suivantes:

  • Extra petits appareils ~ Téléphones (< 768px)
  • Petits appareils ~ Comprimés (> = 768px)
  • Appareils de taille moyenne ~ Ordinateurs de bureau (> = 992px)
  • Gros appareils ~ Ordinateurs de bureau (> = 1200px)

Et chacune des différentes fenêtres prises en charge a une classe particulière pour l'adresser, comme suit:

  • col-xs- ~ Extra petits appareils
  • col-sm- ~ Petits appareils
  • col-md- ~ Medium devices
  • col-lg- ~ Gros appareils

Pour utiliser le système de grille, vous avez besoin d’un élément conteneur, avec une classe. "récipient", et à l'intérieur d'un deuxième conteneur avec une classe "rangée". Remarquez comment, dans les deux cas, le suffixe "fluid" a disparu, contrairement à Bootstrap 2. Et à l'intérieur du second conteneur, placez vos colonnes..

 
 
col-xs-6
 
col-xs-6

Comme je l’ai mentionné plus tôt, cette nouvelle version de Bootstrap propose une approche Mobile First, c’est-à-dire que les colonnes avec une classe suffixée avec un "xs" sont toujours va être flotté horizontalement, peu importe la taille de la fenêtre. Si vous deviez dire, utilisez des colonnes préfixées par un "Maryland" et la fenêtre d'affichage avait une largeur inférieure à 992 pixels (voire 991 pixels), ces colonnes s'empileraient les unes en dessous des autres avec une largeur de 100%, comme dans l'exemple suivant.

 
 
col-md-4
 
col-md-4
 
col-md-4

Lorsque cette page est affichée dans une fenêtre d'affichage égale ou supérieure à 992 pixels, elle ressemble à ceci:


Si vous voyez ce document dans une fenêtre d'affichage égale ou inférieure à 991 pixels, il se présentera comme suit:


Vous pouvez également combiner des classes pour adresser vos éléments à une taille de fenêtre d'affichage donnée. Par exemple, si, dans l'exemple suivant, vous avez besoin des deux premières colonnes flottant côte à côte dans de petits périphériques (sm) et empilés sur les téléphones, vous pouvez ajouter le col-sm-6 en plus de col-md-4 classe.

 
 
col-sm-6 col-md-4
 
col-sm-6 col-md-4
 
col-sm-6 col-md-4

Dans ce cas, en ouvrant la page dans une fenêtre de plus de 991 pixels, vous verriez trois colonnes égales, l'une à côté de l'autre, comme dans le dernier exemple. Toutefois, si vous le voyez dans une fenêtre dont la largeur est comprise entre 768 pixels et 991 pixels, vous obtiendrez le résultat suivant:


Comme dans l'exemple ci-dessus, vous pouvez combiner et imbriquer des colonnes dans un grand nombre de combinaisons différentes pour créer des présentations très complexes. Le système de grille de Bootstrap contient bien plus d’informations, mais il faudrait un certain temps pour en détailler tous les aspects. C’est pourquoi je vous suggérerais vivement de consulter la documentation.

CSS d'amorçage

La plupart des classes de la partie CSS de base de Bootstrap sont restées les mêmes. Cependant, nous devons garder à l’esprit certaines modifications lors de l’utilisation de cette nouvelle version..

Le code dans son ensemble a été réécrit et les noms de variables ont changé. Si vous examinez les fichiers .less, vous constaterez que toutes les variables du cadre ont basculé de affaire de chameau d'utiliser des tirets pour séparer les mots, et chaque nom de variable a été normalisé dans un "élément-état-pseudo-état"approche. Cela signifie que les styles spécifiques à l'élément tels que:

    …

Maintenant, sont préfixés avec l'élément auquel ils sont appliqués, donc dans cette nouvelle version de Bootstrap la liste précédente deviendrait.

    …

Il en va de même pour les listes avec un "en ligne"style qui leur est appliqué. Certains autres changements dans les noms de variables reflétant dans les classes que nous avons connues au début sont ceux liés à la taille, par exemple avec des boutons, dans la version 2. * vous auriez:

Les suffixes de taille ont été modifiés pour correspondre à la convention de dénomination générale et sont identiques à ceux du système de grille. La déclaration précédente des boutons de la version trois est la suivante:

Il en va de même pour les tailles d’entrée et les déclarations de visibilité..

Tables réactives

La syntaxe et la disposition générales des tableaux restent les mêmes dans cette version du framework, mais, fidèles au paradigme "Mobile First" dans son ensemble, nous avons maintenant tables sensibles dans cette itération de Bootstrap. Pour en tirer parti, enveloppez simplement la table entière dans un conteneur avec une classe de "responsive-table", ce qui va faire est de faire défiler les tables horizontalement dans de petits appareils (< 768px).

 … 
Et la table résultante:

Formes
Dans le département CSS, c'est dans les formulaires que vous voyez les différences majeures. Pour commencer, chaque entrée d'un formulaire dans Bootstrap trois est maintenant affichée en tant qu'élément "bloc" avec une largeur de 100%. Les attributs "size" que vous pouvez modifier avec une classe dans les contrôles de formulaire concernent le remplissage et la taille de la police de l'élément, et non la largeur, afin de contrôler que vous auriez besoin de le placer dans un conteneur de la largeur souhaitée..
Le balisage des formulaires a également changé, dans sa forme la plus élémentaire, dans la version 2. * Un formulaire ressemblerait à quelque chose comme ceci.
 
 …    
 
Le balisage pour le même formulaire dans la nouvelle version ajoute un élément supplémentaire et une classe à l'entrée elle-même, et se déroule comme suit.
 
 …  
   
 
 
Bootstrap a été créé avec pour objectif l’accessibilité; c’est la raison de l’ajout de l’attribut "role"; notez également que le combo étiquette / entrée est placé dans un emballage avec une classe de "groupe de forme", et comme tout le reste, cela a à voir avec la nature réactive du cadre.
Le formulaire de recherche est supprimé dans cette version et, comme toutes les entrées et toutes les zones de texte ont une largeur de 100% par défaut, une attention particulière doit être prise avec les formulaires en ligne. Toutefois, le balisage correspondant est presque identique à celui du formulaire précédent..
 
   
 
   
 
  
  

Notez l'ajout de la classe "formulaire en ligne"à l'élément de formulaire, et celui de"sr seulement"Pour l'étiquette, cette dernière classe concerne la partie Accessibilité du cadre. L'utilisation d'une étiquette est facultative avec les formulaires en ligne, mais elle est fortement encouragée et ne nuit à personne. Et, au fait, le"sr seulement"représente Lecteur d'écran seulement. Les lecteurs d'écran trouveront donc l'étiquette et la "diront" à l'utilisateur.
Enfin, pour créer une forme horizontale, il vous suffit de définir la largeur de l'étiquette en définissant "col-md-" ou "_sm"ou quoi et le correspondant"étiquette de contrôle"class, comme avec la version deux., puis encapsule l'entrée dans un conteneur avec sa propre largeur de colonne spécifiée.
 
  
  
 
 
Et la forme résultante.

D'autres changements ont été apportés en ce qui concerne les formulaires, tels que "input-prepend" et "input-append"classes, en faveur de"groupe d'entrée" et "input-group-addon". Cependant, il y a encore beaucoup à couvrir, donc pour plus de détails à ce sujet, référez-vous à la documentation.
Glyphiques
Les icônes du cadre constituent un autre domaine dans lequel vous constaterez des changements majeurs. La bibliothèque d'icônes comprend 40 nouveaux glyphes, et non seulement cela, ils ont abandonné l'utilisation des images pour les polices, donc maintenant, au lieu d'ajouter les deux "images de glyphicons- *" à votre "img"dossier, vous devrez ajouter les quatre polices" glyphicons "à votre"les polices"répertoire, et oui, Quatre d'entre eux. Cela a à voir avec la compatibilité du navigateur.
Pour des raisons de performances, chaque icône nécessite une classe de base et une classe spécifique. Alors maintenant, pour ajouter une icône d'utilisateur que vous utiliseriez:
Le passage des images aux polices, permet de contrôler la couleur et le dimensionnement des icônes et vous permet également de remplacer les icônes par défaut par des icônes personnalisées à votre convenance. Si vous vous demandez où trouver de telles icônes de police, Fontello est une excellente ressource..
Composants JavaScript
Bien que repensés et recréés, les composants JavaScript de Bootstrap 3.0 conservent les mêmes noms et utilisations. Avec quelques différences légères.
Modaux
L'un des plugins les plus utilisés dans Bootstrap est Modals. Vous constaterez qu'il est assez similaire, les différences étant que les conteneurs "modal-header", "modal-body" et "modal-footer" ne sont pas enveloppés dans un "modal-content" à l'intérieur d'un "modal-dialog" récipient. Alors qu'est-ce qui était:
 
 
 
 
Changements à:
 
 
 
 
 
 
 
 
Oui, c'est un peu plus de balisage, mais cela améliore la réactivité du composant et lui permet également de faire défiler la fenêtre entière au lieu d'avoir un paramètre "hauteur maximale".
Pour les déclencher via JavaScript, vous utiliseriez la même méthode qu'auparavant.
$ ('# my-modal') .modal ('show');
Le reste des plugins reste essentiellement le même. Sur une note spéciale, l'accordéon est parti en faveur des panneaux démontables, ils fonctionnent à peu près les mêmes et ont une syntaxe très similaire. Avec certaines classes qui changent un peu, elles nécessitent toujours le plugin transitions et ne nécessitent aucun conteneur supplémentaire.
En outre, le plugin Typeahead a disparu de Bootstrap au profit du plugin Typeahead de Twitter.
Événements
Les événements JavaScript sont maintenant des espaces de noms, mais qu'est-ce que cela signifie pour vous? Eh bien, dans Bootstrap deux, pour écouter le moment où une alerte sur votre site a été "Fermer", vous ajouteriez:
$ ('# mon-alerte') .bind ('fermer', fonction () );
Maintenant dans cette troisième version, le nom de l'événement a changé, il est namespaced dans le framework, donc le fragment précédent serait:
$ ('# mon-alerte') .bind ('close.bs.alert', function () );
Allez-y et regardez le reste des composants JavaScript que Bootstrap a à offrir (qui dépendent toujours de jQuery).
Nouveaux composants
Il y a quelques nouveaux composants dans la partie CSS du framework, groupes de liste et panneaux.
Liste des groupes
Liste des groupes, à partir de la documentation officielle.
 
… Sont un composant flexible et puissant pour afficher non seulement de simples listes d'éléments, mais aussi des composants complexes avec un contenu personnalisé.
 
Pour créer un groupe de listes, créez simplement une liste non ordonnée avec un "groupe de liste"classe, et ajoute le"élément de groupe de liste"à chaque élément de la liste.
     
  • Lorem ipsum… 
    •  
  • Dolor assis… 
    •  

Vous pouvez ajouter le "actif"classe à n’importe quel élément de la liste pour le surligner, même si vous placez un badge à l’intérieur, il sera centré verticalement et alignez-le à droite, à l'intérieur de l'élément. Allez-y et essayez-le..
Panneaux
Les panneaux sont un moyen de Boîte dans du contenu de votre site ou de votre application, mettez-le en surbrillance et donnez-lui un sens d'unité. Le balisage du panneau est assez simple et son contenu peut être combiné avec différents éléments pour obtenir un aspect et une convivialité uniques..
Les panneaux peuvent avoir des en-têtes et des pieds de page et obtenir une signification particulière avec le bien connu "succès","Erreur","Attention", etc. classes. Par exemple.
 
Titre du panneau
 
Un peu de contenu ici
 
     
  • Lorem ipsum… 
    •  
  • Dolor assis… 
    •  
 

Comme vous pouvez le constater, les panneaux fonctionnent bien avec les groupes de listes, ainsi qu'avec les tables non bordées..
Personnaliseur
Autre nouveauté dans cette version: le personnaliseur dans lequel, non seulement l'apparence a changé, elle est beaucoup mieux organisée et vous permet de contrôler des éléments tels que la largeur de la fenêtre d'affichage à laquelle un certain système de grille prend le contrôle..
Comme toujours, vous pouvez définir tous les styles et les couleurs de vos polices. C'est un sujet très important en lui-même, alors je vous encourage à y aller seul et à vous tromper..

Prise en charge du navigateur
Internet Explorer a longtemps fait souffrir toutes les souffrances que nous avons connues. La version six était un véritable cauchemar et ses prédécesseurs avaient encore beaucoup de retard à se rattraper. Dans la version 2. * L'équipe de Bootstrap supportait toujours la version sept du navigateur de Microsoft. Dans cette nouvelle itération du cadre, la prise en charge de IE seven est disparue, de même que pour Mozilla Firefox 3.6 et versions ultérieures..
Plus précisément, Bootstrap prend en charge la dernière version de tous les principaux navigateurs (Safari, Opera, Chrome, Firefox et IE), à la fois sous Windows et Mac, lorsqu'il existe les deux..
Pour IE, il prend en charge les versions huit et suivantes, et bien que le navigateur ne rende pas certaines propriétés, telles que "rayon de la frontière", la structure n’est entièrement fonctionnelle qu’avec quelques différences mineures d’apparence. En outre, IE huit requiert respond.js pour la prise en charge des requêtes multimédia..
Pour obtenir une liste détaillée des solutions de contournement et des pièges pour les différents navigateurs (la toux Internet Explorer la toux) regardez la documentation officielle.
Conclusion
Depuis ses débuts, Bootstrap est un excellent outil pour le prototypage rapide et la création de sites et d’applications Web de qualité. Cette troisième version n’est pas différente. Si vous avez besoin d'une seule raison pour l'utiliser, je choisirais certainement le système de grille, avec la croissance de la navigation mobile et la taille toujours croissante des fenêtres de visualisation, la réactivité est un impératif maintenant, plus que jamais. Et dans cette dernière version, c'est le domaine où Bootstrap brille le plus. 
Si vous avez besoin d'aide pour commencer, essayez l'un des modèles Bootstrap faciles à utiliser disponibles sur Envato Market..

	
	
			
	   
	



Code


	


			

							×