Überblick

Vor kurzem mache ich eine Front mit Bootstrap. Hier ist eine Zusammenfassung der Klassen, die ich bisher als Memorandum für mich selbst verwendet habe.

Referenz Bootstrap (ver. 4.5) : https://getbootstrap.jp/

Haltepunkt

sm : 576px
md : 768px
lg : 992px
xl : 1200px

Layout

container

Container mit fester Breite
Die maximale Breite ändert sich für jeden Haltepunkt

row

Faktoren, die die Zeilen des Rastersystems bestimmen
Demonstrieren Sie den wahren Wert, indem Sie col im Kind haben

col

Faktoren, die die Spalten des Rastersystems bestimmen
Wird als untergeordnetes Element der Zeile verwendet
col-sm-3
sm: Vertikal weniger als 576px
3: (3/12 = 25% Breite)

Taste

btn

Machen Sie eine Schaltfläche

btn-primary

Machen Sie eine blau-basierte Schaltfläche
Gefahr: rote Basis
sekundär: graue Basis

padding, margin p, m

p : padding
m : margin

Richtung

t : top
b : bottom
l : left
r : right
x: links und rechts (Richtung der x-Achse)
y: oben und unten (y-Richtung)
(leer): 4 Richtungen
Beispiel): pt- ○: padding-top: ○;

Größe

Bestimmt durch das Verhältnis zu $ spacer. Standardmäßig 1rem = 16px
0 : $spacer * 0 (=0)
1 : $spacer * 0.25 (=4px)
2 : $spacer * 0.50 (=8px)
3 : $spacer * 0.75 (=12px)
4 : $spacer * 1.00 (=16px)
5 : $spacer * 1.25 (=20px)
auto : margin: auto;
Beispiel): pt-1: Polsterung oben: 4px;

Die folgenden typischen Beispiele finden Sie in Offizielle Bootstrap-Referenz .

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Wenn Sie **! Wichtig hinzufügen, können Sie den Stil übrigens unabhängig von der Lesereihenfolge der CSS-Dateien ** anwenden.

Farbe

primär: blau
sekundär: hellgrau
Erfolg: grün
Gefahr: rot
Warnung: gelb
info: Hellblau
hell: ziemlich hellgrau
dunkel: dunkelgrau

[RAILS] [Bootstrap] Grundlegende Klassenzusammenfassung