[RAILS] [Bootstrap] Verwendung von "Grid System" für responsives Webdesign
Bootstrap-Grid-System
-
Bootstrap bereitet die Medienabfrage vor
-
Responsive Design durch Hinzufügen einer Klasse zum HTML-Tag
-
Es gibt einen festen Weg, es zu schreiben
Diesmal ist es ein rudimentäres Element, also habe ich eine Struktur wie das folgende GIF erstellt. Ich werde es erklären.
Umgebung
-
macOS Catalina 10.15.6
-
Bootstrap 4.3.1
-
Rails 6.0.3.4
Dieser Code
Zunächst wird der diesmal implementierte Code angezeigt. Es ist schwierig, wenn Sie nicht damit vertraut sind, aber bitte seien Sie versichert, dass wir es einzeln erklären werden.
erb:index.html.erb
<%#Auszug nur der notwendigen Teile%>
<div class="container">
<h2><Vertikal ausgerichtet bei 576px</h2>
<h2>≧ 576px und halbe Breite</h2>
<div class="row">
<div class="col-sm-6">col-sm-6</div>
<div class="col-sm-6">col-sm-6</div>
</div>
<h2><Vertikal ausgerichtet bei 768px</h2>
<h2>≧ 768px und Breitenverhältnis 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>
Grundlagen des Schreibens
1. Tabellenbewusste verschachtelte Struktur
Das Rastersystem hat die Struktur "** eine Tabelle, die sich abhängig von der Größe der Breite ** ändert".
Grundsätzlich wird es mit HTML so ausgedrückt.
index.html
<div class="container"> #Tischaußenrahmen
<div class="row"> #Tischreihe
<div class="col"> #Tabellenspalte
</div>
</div>
</div>
Es ist eine verschachtelte Struktur von container> row> col. Wenn Sie mehr Zeilen wollen ...
index.html
<div class="container"> #Tischaußenrahmen
<div class="row"> #Tischreihe: 1
<div class="col"> #Tabellenspalte: 1-1
</div>
</div>
<div class="row"> #Tischreihe: 2
<div class="col"> #Tabellenspalte: 2-1
</div>
</div>
</div>
Wenn Sie weitere Spalten hinzufügen möchten ...
inde.html
<div class="container"> #Tischaußenrahmen
<div class="row"> #Tischreihe: 1
<div class="col"> #Tabellenspalte: 1-1
</div>
<div class="col"> #Tabellenspalte: 1-2
</div>
<div class="col"> #Tabellenspalte: 1-3
</div>
</div>
<div class="row"> #Tischreihe: 2
<div class="col"> #Tabellenspalte: 2-1
</div>
<div class="col"> #Tabellenspalte: 2-2
</div>
</div>
</div>
Schreiben Sie so.
2. Antwortspalten
Nun, von hier aus werden wir reagieren. Es ist jedoch einfach zu tun.
Dieses Mal werden wir " horizontale Anordnung bis zu einer bestimmten Breite ausdrücken. Vertikale Anordnung </ b>, wenn sie kleiner als diese wird."
Die grundlegende Syntax lautet in diesem Fall wie folgt.
col- [width condition] - (wie viele 12 Minuten)
Schauen wir uns jeden an.
Breitenbedingung
Dies entspricht einem Haltepunkt. Offizielle Bootstrap-Website fasst wie folgt zusammen.
- sm : 576px, smartphone
- md : 768px, medium
- lg : 992px, large
- xl : 1200px, Extra Large
Wenn beispielsweise ** col-sm ** hinzugefügt wird, bedeutet dies "vertikale Ausrichtung mit weniger als ** 576px **".
Wie viele 12 Minuten
Als nächstes wird die Breite jedes Elements eingestellt. Dies wird durch die folgenden Regeln bestimmt.
- Stellen Sie die Zeilenbreite auf 12 ein
- Geben Sie das Verhältnis zu 12 in Spalte an
Wenn beispielsweise ** col-sm-6 ** hinzugefügt wird, bedeutet dies "** vertikal unter 576px. Die halbe Breite des übergeordneten Elements ** über 576px".
Das Obige sind die Grundlagen des Rastersystems. Schauen wir uns vor diesem Hintergrund den ersten Code an.
Entwirre den ersten Code
Diesmal habe ich so einen Code geschrieben.
erb:index.html.erb
<%#Auszug nur der notwendigen Teile%>
<div class="container">
<h2><Vertikal ausgerichtet bei 576px</h2>
<h2>≧ 576px und halbe Breite</h2>
<div class="row">
<div class="col-sm-6">col-sm-6</div>
<div class="col-sm-6">col-sm-6</div>
</div>
<h2><Vertikal ausgerichtet bei 768px</h2>
<h2>≧ 768px und Breitenverhältnis 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>
Ich habe die Bedeutung jedes div-Elements im h2-Element beschrieben, aber ich denke, Sie verstehen die Bedeutung. Mit dieser Codierung wurde das folgende Design fertiggestellt.
Zusammenfassung
-
Responsive Support ist mithilfe der von Bootstrap erstellten Medienabfrage möglich.
-
Wenn dem Spaltenelement sm hinzugefügt wird, ändert sich das Layout um die Breite von 576 Pixel.
-
Bestimmen Sie die Breite des Spaltenelements bis zum Haltepunkt mit der Breite des Zeilenelements als 12.
Um ehrlich zu sein, es war ein Rastersystem, das ich vermieden hatte, um es schwierig zu machen, aber die Grundlagen waren äußerst einfach.
Lassen Sie es uns in die ursprüngliche App integrieren!
Bonus
Ein Teil des Codes wurde im Text weggelassen. Ich werde den Rohcode hier anhängen. Als Referenz (unten ein wenig erklärt).
erb:index.html.erb
<div class="container" style="height: calc(100vh - 56px - 56px); background-color: lightskyblue;">
<h2><Vertikal ausgerichtet bei 576px</h2>
<h2>≧ 576px und halbe Breite</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><Vertikal ausgerichtet bei 768px</h2>
<h2>≧ 768px und Breitenverhältnis 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
【Taste】
- btn: Knöpfen
- btn-primary: Blau-basierte Schaltflächen
- BTN-sekundär: Graubasierte Tasten
- BTN-Gefahr: Rot-basierte Tasten