[RAILS] [Bootstrap] Comment utiliser le "système de grille" qui prend en charge la conception Web réactive
Système de grille Bootstrap
-
Bootstrap prépare la requête multimédia
-
Conception réactive simplement en ajoutant une classe à la balise HTML
-
Il existe une manière fixe de l'écrire
Cette fois, c'est un élémentaire rudimentaire, j'ai donc créé une structure comme le GIF suivant. Je vais l'expliquer.
environnement
-
macOS Catalina 10.15.6
-
Bootstrap 4.3.1
-
Rails 6.0.3.4
Ce code
Tout d'abord, le code implémenté cette fois est affiché. C'est difficile si vous ne le connaissez pas, mais soyez assuré que nous vous l'expliquerons un par un.
erb:index.html.erb
<%#Extrait des seules pièces nécessaires%>
<div class="container">
<h2><Aligné verticalement à 576px</h2>
<h2>≧ 576px et demi-largeur</h2>
<div class="row">
<div class="col-sm-6">col-sm-6</div>
<div class="col-sm-6">col-sm-6</div>
</div>
<h2><Aligné verticalement à 768px</h2>
<h2>≧ 768px et rapport de largeur 1:3:2</h2>
<div class="row">
<div class="col-md-2">col-sm-2</div>
<div class="col-md-6">col-sm-6</div>
<div class="col-md-4">col-sm-4</div>
</div>
</div>
Bases de l'écriture
1. Structure imbriquée prenant en charge les tables
Le système de grille a une structure de "** un tableau qui change en fonction de la taille de la largeur **".
Fondamentalement, il est exprimé ainsi en utilisant HTML.
index.html
<div class="container"> #Cadre extérieur de table
<div class="row"> #Ligne de tableau
<div class="col"> #Colonne de table
</div>
</div>
</div>
C'est une structure imbriquée de container> row> col. Si vous voulez plus de lignes ...
index.html
<div class="container"> #Cadre extérieur de table
<div class="row"> #Ligne de tableau: 1
<div class="col"> #Colonne de table: 1-1
</div>
</div>
<div class="row"> #Ligne de tableau: 2
<div class="col"> #Colonne de table: 2-1
</div>
</div>
</div>
Si vous souhaitez ajouter plus de colonnes ...
inde.html
<div class="container"> #Cadre extérieur de table
<div class="row"> #Ligne de tableau: 1
<div class="col"> #Colonne de table: 1-1
</div>
<div class="col"> #Colonne de table: 1-2
</div>
<div class="col"> #Colonne de table: 1-3
</div>
</div>
<div class="row"> #Ligne de tableau: 2
<div class="col"> #Colonne de table: 2-1
</div>
<div class="col"> #Colonne de table: 2-2
</div>
</div>
</div>
Écrivez comme ça.
2. Colonnes réactives
Eh bien, à partir de là, nous deviendrons réactifs. C'est facile à faire, cependant.
Cette fois, nous allons exprimer " disposition horizontale jusqu'à une certaine largeur. Disposition verticale </ b> quand elle devient plus petite que cela."
La syntaxe de base dans ce cas est la suivante.
col- [condition de largeur] - (combien de 12 minutes)
Regardons chacun d'eux.
Condition de largeur
Cela correspond à un point d'arrêt. Le site Web officiel de Bootstrap se résume comme suit.
- sm : 576px, smartphone
- md : 768px, medium
- lg : 992px, large
- xl : 1200px, Extra Large
Par conséquent, par exemple, si ** col-sm est ajouté **, cela signifie "alignement vertical avec moins de ** 576px **".
Combien de 12 minutes
Vient ensuite le réglage de la largeur de chaque élément. Ceci est déterminé par les règles suivantes.
- Réglez la largeur de la ligne sur 12
- Précisez le ratio à 12 en col
Par conséquent, par exemple, si ** col-sm-6 est ajouté , cela signifie " Verticalement en dessous de 576px. La moitié de la largeur de l'élément parent ** au-dessus de 576px".
Ce qui précède est les bases du système de grille. Dans cet esprit, jetons un coup d'œil au premier code.
Démêler le premier code
Cette fois, j'ai écrit un code comme celui-ci.
erb:index.html.erb
<%#Extrait des seules pièces nécessaires%>
<div class="container">
<h2><Aligné verticalement à 576px</h2>
<h2>≧ 576px et demi-largeur</h2>
<div class="row">
<div class="col-sm-6">col-sm-6</div>
<div class="col-sm-6">col-sm-6</div>
</div>
<h2><Aligné verticalement à 768px</h2>
<h2>≧ 768px et rapport de largeur 1:3:2</h2>
<div class="row">
<div class="col-md-2">col-sm-2</div>
<div class="col-md-6">col-sm-6</div>
<div class="col-md-4">col-sm-4</div>
</div>
</div>
J'ai décrit la signification de chaque élément div dans l'élément h2, mais je pense que vous comprenez la signification. Avec ce codage, la conception suivante a été achevée.
Sommaire
-
Un support réactif est possible en utilisant la requête multimédia préparée par Bootstrap.
-
Si sm est ajouté à l'élément de colonne, la mise en page changera autour de 576 px de largeur.
-
Déterminez la largeur de l'élément de colonne jusqu'au point d'arrêt avec la largeur de l'élément de ligne 12.
Pour être honnête, c'était un système de grille que j'avais évité d'essayer de rendre difficile, mais les bases étaient extrêmement simples.
Incorporons-le dans l'application originale!
prime
Une partie du code a été omise dans le texte. Je vais attacher le code brut ici. Pour votre référence (un peu expliqué ci-dessous).
erb:index.html.erb
<div class="container" style="height: calc(100vh - 56px - 56px); background-color: lightskyblue;">
<h2><Aligné verticalement à 576px</h2>
<h2>≧ 576px et demi-largeur</h2>
<div class="row pb-5">
<div class="col-sm-6 btn btn-danger">col-sm-6</div>
<div class="col-sm-6 btn btn-secondary">col-sm-6</div>
</div>
<h2><Aligné verticalement à 768px</h2>
<h2>≧ 768px et rapport de largeur 1:3:2</h2>
<div class="row pb-5">
<div class="col-md-2 btn btn-danger">col-sm-2</div>
<div class="col-md-6 btn btn-secondary">col-sm-6</div>
<div class="col-md-4 btn btn-primary">col-sm-4</div>
</div>
</div>
【padding】
- pb-○ : padding-bottom
【bouton】
- btn: Boutonnage
- btn-primary: Boutonnage basé sur le bleu
- btn-secondaire: boutonnage à base de gris
- btn-danger: boutonnage à base rouge
Recommended Posts