Nous reviendrons dans cette leçon et démontrerons le système de grille d'amorçage et le système de grille est probablement la raison numéro un que les gens utilisent bootstrap les nap heures formes.
Les boutons sont de beaux changements de style que nous pouvons faire avec bootstrap, mais le système de grille d'amorçage agira comme le squelette de notre application entière.
C'est un moyen très simple pour nous d'ajouter de la structure et de mettre en place à notre application.
Permettez-moi de vous montrer quelques exemples de ce que vous pouvez faire avec le système de grille.
J'ai quelques sites ouverts de Bootstrap ex-beau le premier ici est une page de produit pour un pichet d'eau et défilement vers le bas.
Remarquez la mise en page ici.
Nous avons trois éléments côte à côte et puis aussi remarquer comme ils changent de taille ici, ils réduisent l'échelle et puis quand j'ai touché la taille de comprimé qu'ils empilent les uns sur les autres.
C'est donc le système de grille d'amorçage au travail, comme c'est le cas ici où nous avons un autre effet similaire.
Ils s'échelonnent et puis ils s'empilent sur la tablette et la taille mobile.
Voici un autre exemple.
C'est le musicien islandais et Olafur Arnolds et ceci est scroll down sur ce site.
Nous avons un certain contenu qui est construit avec le système de grille ici que vous pouvez voir la disposition semblable mais ce n'est pas juste que ceci est construit avec un système de grille aussi bien.
Ceci ici ce contenu.
Ces dates de tournée ici.
Fondamentalement en utilisant le système de grille, nous pouvons dire que nous voulons un certain contenu pour prendre jusqu'à 100 pour cent de l'écran, nous pouvons également l'utiliser pour dire que nous voulons chacun de ceux-ci de prendre jusqu'à 25 pour cent de la largeur de l'écran jusqu'à ce que nous touchons Le côté mobile ou la taille de la tablette pour chaque prise de 50 maintenant et puis quand nous avons touché Mobile ils prennent chacun 100 pour cent.
Même chose ici.
Il nous permet de diviser cela avec l'écran en morceaux et de choisir combien de morceaux nous voulons.
Chacun de nos éléments à prendre et voici le dernier que nous avons déjà vu.
Il est appelé créatif Tim désert défiler ici contenu similaire.
Voici le système de grille et ici aussi.
Donc, tout cela est fait avec le système de grille.
Tout cela est vraiment très important.
Il nous aide à poser les choses si facilement par rapport à ce que nous aurions à faire sans bootstrap.
Nous allons donc utiliser le système de grille bootstraps et à peu près toutes les applications que nous faisons en utilisant bootstrap.
Et laissez-moi vous montrer l'un d'eux.
Il s'agit de notre application yo camp et avis que nous avons une grille de terrains de camping à travers.
Et comme je redimensionne l'écran avis qu'ils échelle et puis nous allons à deux à travers et puis vers le bas à Mobile.
Nous allons à un à travers et c'est un très agréable facile à utiliser la disposition mobile.
Ce n'est donc qu'un endroit où nous utiliserons un système de grille.
Maintenant, commençons à écrire un code en utilisant le système de grille pour plein écran cette fenêtre et revenir en arrière pour obtenir dotcom bootstrap sous l'onglet évalué.
Vous pouvez cliquer sur le système de grille.
Il y a un peu du système de grille, mais je vais commencer par signaler un seul chiffre ici 12.
C'est vraiment important pour la façon dont fonctionne le système de grille.
Donc, chaque conteneur et bootstrap peut être divisé en 12 colonnes différentes et ensuite en utilisant le système de grille, nous pouvons choisir combien de ces 12 unités de chaque élément devrait prendre.
Donc, dans ce cas, il semble qu'ils ont quelque chose de prendre environ 10 sur 12 unités.
Et puis ici, deux des 12 unités ou peut-être neuf et 3, mais ils ont un ratio où ils ont plus de ces 12 sur le côté gauche et puis une petite fraction sur les 12 sur le côté droit.
Donc, si nous retournons au camp ici, c'est notre conteneur ici.
Et chacun de ces sur 12 unités chacune prend trois unités.
Donc nous finissons avec quatre colonnes égales et puis nous le rétrécit ici.
Maintenant, ils prennent chacun six unités sur 12.
Encore une fois, le chiffre 12 est très important.
Maintenant, allons à droite.
Notre première grille.
Donc, j'ai un fichier fait grille h t m l il est vide à l'exception des bootstraps le fichier SS et pour commencer, nous devons définir un conteneur.
Chaque fois que nous utilisons une grille Boucek, il doit être à l'intérieur d'un conteneur.
Donc la classe égale le conteneur.
Et la première chose que nous devons faire est de trouver un autre div avec la classe égale à la ligne au lieu de chaque ligne.
Nous avons 12 unités à choisir.
Donc, ce que nous allons commencer par faire est juste faire une division de 50 50 nous aurons 1 div qui prend 6 sur 12 et puis un autre div qui occupe 6 sur 12.
Alors, faisons-le maintenant.
Nous allons ajouter un div et puis je vais également ajouter ma deuxième division et en ce moment, il est juste deux appareils sont vides.
Vous n'allez pas travailler.
Mais ce que je vais faire est d'ajouter une classe à la première et cela va regarder une colonne peu étrange Un grand six et nous ferons la même chose ici.
La classe est égale à la colonne six.
Ensuite, nous ajouterons du contenu ici.
Ils diront seulement six grands colonnes.
Même chose ici.
Et comme je fais que nous allons sauver et nous ne verrons pas vraiment beaucoup, nous ne voyons pas la grille elle-même.
Donc, pour rendre plus clair, je vais définir une classe ici au lieu d'une balise de style.
Ce que je vais faire, c'est définir une classe.
Je vais juste appeler rose et je vais appliquer cette classe ou deux divs afin que nous puissions les voir.
Donc en ce moment ils sont juste blancs.
Pas de frontière.
Juste un peu de texte.
Mais si nous ajoutons cela.
Si rose.
Et puis nous voulons que l'arrière-plan soit rose et nous ferons une bordure pourpre un pixel pourpre solide et ensuite nous appliquerons la classe rose à ces deux divs.
Chacun prend six unités.
Maintenant nous revenons et nous rafraîchissons.
Voilà.
Vous pouvez voir que nous avons deux divs qui occupent exactement la moitié du conteneur.
Le conteneur commence ici et ici.
Et nous avons divisé en deux.
Alors maintenant, nous pouvons revenir en arrière et jouer un peu plus et essayons d'ajouter dans une troisième colonne.
Et cette fois fera la colonne du milieu huit unités, puis la gauche et la droite sera de deux.
Alors finissez et je vais changer ces chiffres ici.
Voilà.
Nous allons finir avec une belle colonne centrée au milieu, puis deux petites colonnes à gauche et à droite que nous pourrions utiliser pour une barre latérale ou quelque chose.
C'est donc un concept très fondamental qui sous-tend tout le système de grille d'amorçage.
Nous avons 12 unités qui traversent n'importe quel conteneur dans lequel nous travaillons et nous pouvons désigner ces 12 unités de la façon que nous voulons.
Donc, nous pouvions faire 12 colonnes individuelles de chaque colonne, une grande et nous pourrions faire 12 fois comme ça.
Assurez-vous que je ne perds pas de compte.
Voilà.
Et puis nous allons nous débarrasser de ces deux pour l'instant.
Et si j'étais frais, vous verrez dans une rangée que nous avons 12 colonnes de même taille.
Chacun prend une unité et ensuite je vais vous montrer que nous pouvons ajouter d'autres lignes.
Donc, faisons que maintenant div classe égale ligne et il va juste au-dessous de cette première ligne que nous avons.
Donc à l'intérieur de celui-ci nous allons faire div.
La classe égale la colonne Dasch grande et faisons quatre.
Nous allons donc le diviser en trois unités de même taille.
Alors la colonne arge pour son aller juste comme ça.
Et allons jeter un coup d'oeil maintenant et vous pouvez voir que nous n'avons pas appliqué la classe rose, mais nous avons trois colonnes de même taille qui tombent en dessous des 12 colonnes de taille égale ont été créés.
Donc nous pourrions ajouter dans la classe rose juste pour le rendre plus facile de voir ce qui se passe.
Et voilà.
Donc ce n'est qu'un exemple simple.
Vous n'auriez pas ces boîtes roses très probablement sur notre site.
Mais comme vous pouvez le voir ici, nous avons une grille où nous avons des lignes et chaque ligne a quatre colonnes à travers.
Chacun est de trois unités de large ou ici sur ce site créatif Tim.
Nous avons trois colonnes qui traversent chacune est de quatre unités de large.
Même chose ici.
Trois colonnes traversent ici.
Nous avons quatre colonnes.
Chacun a trois unités de large.
Donc, c'est très très fondamental de la grille dans la prochaine vidéo.
Nous allons parler de la façon de rendre la grille réactive et ont des mises en page différentes à différentes tailles.
En ce moment nous avons travaillé avec la colonne grand.
J'ai expliqué avec un grand moyen et il ya trois autres tailles et nous allons voir ceux de la prochaine vidéo et nous allons aussi voir comment nous pouvons écrire des grilles imbriquées où nous pouvons ajouter une autre ligne à l'intérieur de l'une de ces colonnes et diviser En 12 morceaux supplémentaires.