Teilen Sie detaillierte Kenntnisse über Bootstrap

1. Machen Sie Bilder mobil responsiv

Verwenden Sie: Passen Sie Bilder an die Breite Ihrer Seite an.

Vorgang: Fügen Sie dem Bild das Klassenattribut .img-responsive hinzu.

<img src="/images/cat.jpg" class="img-responsive">

2. Text mit Bootstrap zentrieren

Verwendung: Zentrieren Sie den Text .

Vorgang: Fügen Sie dem Text das Klassenattribut center-text hinzu.

<p class="text-center">Hi, I'm Yamei.</p>

Ergänzung: .text-right, .text-left, .text-primary (der Textinhalt hat ein Primärelement class), .text-success, .text-muted (geschwächt), .text-info, .text-warning, .text-danger

3. Erstellen Sie einen Bootstrap-Button

Verwendung: Erstellen Sie eine Schaltfläche im Bootstrap-Stil.

Vorgang: Fügen Sie dem Text das Klassenattribut btn hinzu.

<button class="btn">Like</button>

Der Effekt ist wie folgt:

4 Element-Bootstrap-Schaltfläche

Verwendung: Schaltfläche auf Blockebene (auf 100 % der Breite des übergeordneten Elements gestreckt). Erstellen Sie eine Schaltfläche auf Blockebene. Die Schaltfläche wird so ausgedehnt, dass sie die Seite ausfüllt, und alle Elemente nach dem Block werden automatisch in die nächste Zeile verschoben (Umbruch).

Das Prinzip ist wie folgt (Bild von fcc):

Vorgang: Behalten Sie die .btn bei Klassenattribut, Join .btn-block.

<button class="btn btn-block">Like</button>

Der Effekt ist wie folgt:

5. Probieren Sie den Bootstrap Schaltflächenfarbe Regenbogen

Verwendung: Fügen Sie eine originale (blaue) Schaltfläche mit der Klasse .btn-primary hinzu.

Vorgang: Behalte .btn .btn-block Klassenattribut, .btn-primary hinzufügen.

<button class="btn btn-block btn-primary">Like</button>

Die Wirkung ist wie folgt:

Ergänzung: .btn-danger, .btn-warning (Schaltfläche zum vorsichtigen Bedienen), .btn-info (Schaltfläche zum Anzeigen von Informationen), .btn-default, .btn-link (gestalten Sie die Schaltfläche wie folgt). einen Link, behalten aber weiterhin das Schaltflächenverhalten bei), .btn-success

.btn-lg, .btn-sm, .btn-xs, jeweils groß, klein und extra klein

.disabled Schaltfläche deaktivieren

.active Zeigt die Schaltfläche an, während darauf geklickt wird

(.active-Rendering)

*Das sind die Notizen, die ich während meiner FCC-Studie zusammengestellt habe. Wenn es Fehler gibt, hinterlassen Sie bitte eine Nachricht~

[Ähnliche Videoempfehlungen: Bootstrap-Tutorial】

Das obige ist der detaillierte Inhalt vonTeilen Sie detaillierte Kenntnisse über Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!