✅ Apprendre à utiliser la grille Bootstrap

Table des matières

Colonne a
Colonne B
Colonne C
Colonne a
Colonne B
Colonne C

Amorcer gère une structure en grille ou également connue sous le nom de Grille, qui n'est rien de plus qu'une disposition sur l'écran qui nous aide à organiser nos éléments, c'est comme si nous divisions l'écran en lignes et en colonnes et le traitions comme un grand tableau.
Ce type de manipulation nous amène à penser les designs d'une manière "unique" et au moment où nous avons un peu plus d'expérience en utilisant Amorcer Nous commencerons à tout voir de cette manière et ainsi nous gagnerons en cohérence et en rapidité dans notre façon de travailler.
La première chose à savoir est que cette conception du Grille nous permet de travailler de manière à pouvoir implémenter des vues mobiles nativement, ceci bien sûr à partir de la version 3 de Amorcer, grâce au fait que cette version a été conçue en pensant au design mobile.
Dans les versions précédentes du framework, les classes devaient être spécifiées directement afin que notre conception ait la capacité de s'adapter aux résolutions des appareils mobiles, maintenant les différentes classes du Grille ils le font automatiquement.
Pour tirer parti de cette fonctionnalité, nous devons penser de petit à grand, c'est-à-dire que les classes que nous appliquons doivent toujours être considérées comme les plus petites, puis elles s'adapteront à d'autres résolutions, c'est-à-dire si nous définissons un classe sm (petit ou petit), automatiquement Amorcer il suppose qu'il s'agit de l'expression minimale et qu'il peut ensuite être mis à l'échelle pour Maryland (médiane) ou à lg (grand).
Avant de passer à des exemples plus pratiques, nous devons comprendre quelles sont les classes que nous pouvons utiliser dans les colonnes d'un Grille Et nous devons également savoir pour quel cas chacun s'applique, de cette façon lorsque nous concevons notre site, nous pouvons prendre en compte le plus petit appareil que nous voulons atteindre.
Avec cette approche, nous pouvons construire des sites Adapté aux mobiles, à quel point ils deviennent aujourd'hui importants pour les moteurs de recherche et leurs résultats, nous aidant ainsi en plus de faire de bons sites à gagner quelques points dans notre réputation Référencement, avec le même travail bien sûr.
Écrans de téléphoneC'est le plus petit appareil qui en théorie peut naviguer dans notre conception, bien que les résolutions des téléphones aient été progressivement converties en Full HD, c'est généralement pour le haut de gamme, tandis que le milieu de gamme et la gamme basse qui en théorie est la plupart maintiennent des résolutions bien inférieures. La classe de Grille qui s'applique à ce cas est : col-xs- et s'applique aux solutions plus petites que la largeur 768 pixels.
Écrans de tabletteIls sont en théorie le deuxième plus petit appareil, grâce à sa plus grande proportion de taille, la tablette offre une plus grande surface de navigation, nous pouvons donc utiliser un peu plus de contenu qu'avec un écran de téléphone, en plus du fait que la navigation sur les tablettes se fait généralement horizontalement. La classe qui s'applique à cet appareil est col-sm- et s'applique aux résolutions avec des largeurs supérieures à 768 pixels et sous 992 pixels.
Équipement petit écranCe sont généralement ceux qui appartiennent aux gammes basses des ordinateurs de bureau et portables, il peut s'agir d'équipements avec des écrans inférieurs à 15 pouces, ou qui ont plus de 10 ans de durée de vie, ce sont aussi les portables qui sont destinés aux étudiants et au secteur à faible pouvoir d'achat, c'est le secteur majoritaire. La classe qui s'applique dans ce cas est col-md- et les résolutions limites pour la largeur sont supérieures à 992 pixels et moins de 1200 pixels.
Équipement grand écranIci, on peut cataloguer les équipements les plus modernes, et aussi les écrans de plus de 15 pouces, dans cette catégorie font leur entrée dans les nouveaux équipements tels que l'ultra-portable, la résolution 4K, ou QHD également là où nous voyons des surfaces supérieures à 1080p. En écartant les largeurs que nous traiterons ici sont celles supérieures à 1200 pixels, alors que la prochaine version de Amorcer Probablement.
Puisque nous connaissons la théorie derrière le système Grille de Amorcer, Il est bon de commencer à faire son application pratique, mais avant de voir le code, nous devons comprendre quelques concepts supplémentaires, nous devons toujours par convention et les meilleures pratiques utiliser un élément avec la classe récipient, puisque cela va créer le conteneur comme son nom l'indique pour conserver nos différentes colonnes. L'autre concept que nous devons connaître est qu'il y aura toujours 12 colonnes, donc les différentes combinaisons que nous faisons doivent tenir compte de ce nombre.
Dans l'exemple suivant nous allons créer un code pour une mise en page de 3 grandes colonnes, nous allons utiliser la classe col-md- et puisque nous voulons 3 colonnes égales en divisant 12 par 3, nous obtenons le nombre 4 donc ce sera la taille de chacune de nos colonnes résultantes.
Regardons le code sans plus tarder :

Grille d'amorçage

Exemple d'utilisation des colonnes dans le bootstrap

Colonne a

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilite mon in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.

Colonne B

Colonne C

La structure est très simple, nous avons créé un div avec la classe récipient, et à l'intérieur d'un div avec la classe ligne enfin au sein de ce dernier nous avons créé 3 divs avec la classe col-md-4 C'est la classe des petits écrans pour ordinateurs non portables, et nous voyons comment nous forgeons le nombre 4, ce qui indique que chaque div de ceux-ci équivaut à 4 colonnes du Grille. Voyons à quoi cela ressemble, lorsque nous exécutons dans notre navigateur :

AGRANDIR

Si nous remarquons, alors nous avons 3 grandes colonnes, mais que se passe-t-il lorsque nous réduisons la taille à une résolution inférieure au minimum de la classe appliquée, puisque les colonnes vont simplement être empilées les unes sur les autres comme nous le voyons dans l'image suivante :

AGRANDIR

Bien que ce ne soit pas une mauvaise chose, ce n'est parfois pas le comportement que nous voulons que notre conception adopte, pour cela nous pouvons inclure les comportements directement avec les classes pour les différentes résolutions, voyons dans le code suivant comment nous modifions les classes du différentes colonnes pour obtenir un résultat différent :

Grille d'amorçage

Exemple d'utilisation des colonnes dans le bootstrap

Colonne a

Colonne B

Colonne C

Maintenant, si nous remarquons dans notre code tout reste le même sauf pour nos classes, où pour les colonnes A et B nous avons ajouté la classe col-sm-6 et pour la colonne C la classe col-sm-12, cela signifie que lorsque la résolution est réduite, les classes sm prévaudront, comme nous le voyons dans l'image suivante :

AGRANDIR

Nous voyons que dans la même taille du premier exemple, au lieu d'être empilées, les colonnes A et B deviennent dans la même région et la colonne C prend une seule ligne pour elle-même. On voit ici la grande utilité de Grille en particulier avec des conceptions axées sur la réactivité et la mobilité.
Avec cela, nous terminons ce tutoriel, où nous avons appris comment le système de Grille de AmorcerBien sûr, ce n'est que la pointe de l'iceberg, il y a beaucoup plus de contenu que nous pouvons explorer dans d'autres tutoriels, mais avec ces connaissances de base, nous pouvons commencer à voir comment mailler nos conceptions de manière plus logique et avec moins d'effort grâce à le cadre.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif