[RAILS] Zusammenfassung der einfachen Funktionen von Bootstrap für Anfänger
Einführung
Dies ist der erste Beitrag. Ich erstelle ein Portfolio mit dem "Bootstrap", den ich im Rails-Tutorial gelernt habe, möchte aber die von mir verwendeten Funktionen notieren. Ich hoffe, es wird für Anfänger so nützlich wie möglich sein.
1. 1. Vorteile der Verwendung von Bootstrap
Bootstrap ist ein von Twitter erstelltes Framework für die Webproduktion. Sie können ganz einfach eine vollwertige Website erstellen, die verschiedene Browser und Bildschirmgrößen unterstützt.
verdienen
- Auch wenn Ihnen Designkenntnisse und -fähigkeiten fehlen, können Sie modernes Design einführen
- Einfache Einführung von Responsive
- Sie können die Codemenge reduzieren
Fehler
- Sie müssen Ihren eigenen Schreibstil und Ihre eigenen Regeln lernen
- Es ist in der Regel ein ähnliches Design
- Mehr Aufwand beim Anpassen von
2. Bootstrap-Installation
Verwenden Sie für Rails bei Verwendung von Bootstrap Bootstrap-Sass Gem, um es in Ihrer Rails-Anwendung bereitzustellen.
Gemfile
gem 'bootstrap-sass', '3.4.1'
Bootstrap aktualisieren.
python
bundle install
Erstellen Sie eine benutzerdefinierte CSS-Datei und laden Sie Bootstrap (und die zugehörigen Kettenräder) mit "@ import".
app/assets/stylesheets/custom.scss
@import "bootstrap-sprockets";
@import "bootstrap";
3. 3. Geben Sie die Schriftfarbe an
Sie können ganz einfach Textfarben hinzufügen, indem Sie im Attribut class des HTML-Tags Folgendes angeben.
index.html
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
Wenn Sie die Zeichen ausrichten möchten, fügen Sie das Klassenattribut wie unten gezeigt hinzu.
index.html
<p class="text-center text-primary">Zentriert</p>
<p class="text-right text-secondary">Richtig gerechtfertigt</p>
<p class="text-left text-success">Links gerechtfertigt</p>
Vier. Geben Sie die Hintergrundfarbe an
Sie können die Hintergrundfarbe angeben, indem Sie .bg- angeben, wie unten im Attribut class des HTML-Tags gezeigt.
index.html
<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary text-white">.bg-secondary</div>
<div class="bg-success text-white">.bg-success</div>
<div class="bg-danger text-white">.bg-danger</div>
<div class="bg-warning text-dark">.bg-warning</div>
<div class="bg-info text-white">.bg-info</div>
<div class="bg-light text-dark">.bg-light</div>
<div class="bg-dark text-white">.bg-dark</div>
<div class="bg-white text-dark">.bg-white</div>
<div class="bg-transparent text-dark">.bg-transparent</div>
Fünf. Befestigen Sie eine Schaltfläche
Sie können eine Schaltfläche erstellen, indem Sie "btn" in "class" wie folgt angeben. Um die Hintergrundfarbe der Schaltfläche zu ändern, geben Sie die Farbe nach "btn-" an.
index.html
<button type="submit" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
6. Schalten Sie die Navigation ein
Die Navigationsleiste wird mit nav als Klasse verwendet.
index.html
<nav class="nav">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>
Referenzseite
Recommended Posts