So erstellen Sie eine reaktionsschnelle Skala mit Bootstrap

Dieses Tutorial taucht tief in die Typografie -Handhabung von Bootstrap ein und zeigt, wie er seine SCSS modifiziert, um eine reaktionsschnelle Skala zu erstellen. Dies gewährleistet die Lesbarkeit über alle Bildschirmgrößen und verhindert übergroße Überschriften auf kleineren Geräten.

Schlüsselkonzepte:

• Anpassung: Die Typografie von Bootstrap ist anpassbar, indem die SCSS -Quelldateien direkt bearbeitet werden. Das html Element verwendet -webkit-text-size-adjust: 100%; und -ms-text-size-adjust: 100%;, um zu verhindern, dass mobile Browser automatisch Schriftgrößen skalieren.
• Reaktionstypskala: Erstellen einer Reaktionstypskala beinhaltet das Definieren einer Typ -Skala -Karte, eine Validierungsfunktion und Mischung, um die Schriftgrößen dynamisch anhand der Bildschirmgröße dynamisch anzupassen. Dies behält eine konsistente visuelle Hierarchie bei.
• Standardeinstellungen: Bootstrap -Standardeinstellungen zu einer 16px -Basis -Schriftgröße, 1,5 Zeilenhöhe und 'system-ui' Schriftfamilie. Diese können mithilfe einer benutzerdefinierten SASS -Variablen -Datei überschrieben werden.
• Lesbarkeit und Hierarchie: Eine reaktionsschnelle Skala verbessert die Lesbarkeit erheblich und legt eine klare visuelle Hierarchie fest, wodurch die Benutzererfahrung verbessert wird. Dies wird in Bootstrap unter Verwendung von Sass-Karten, Validierungsfunktionen und mischungseinstellungsgrößen Mixins erreicht.

Bootstraps Standard -Typografie:

Die Typografie von Bootstraps verstehen erfordert die Untersuchung der SCSS -Quelle. (Hinweis: Nicht-Typ-Typ-Stile werden aus Klarheit weggelassen.)

html Element:

Die Stile des html Elements (in _reboot.scss) konzentrieren

<code class="language-scss">html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}</code>

Element: body

Die Stile des

-Elements (in body) definieren die Basis Typografie: _reboot.scss

<code class="language-scss">body {
  font-family: $font-family-base;
  font-size: $font-size-base;
  font-weight: $font-weight-base;
  line-height: $line-height-base;
  color: $body-color;
  text-align: left;
}</code>

, p-h1 und h6-.display-1 Elemente: .display-4

Die Stile dieser Elemente (in

und _type.scss) verwenden Variablen zum Definieren von Schriftgrößen und erstellen eine Grundtypskala, die über alle Bildschirmgrößen festgelegt ist. Diese Variablen können in einer benutzerdefinierten SASS -Datei überschrieben werden. _variables.scss

Erstellen einer Reaktionstypskala:

Um eine wirklich reaktionsschnelle Skala zu erstellen, verwenden wir SASS, um Schriftgrößen dynamisch basierend auf der Bildschirmgröße zu generieren. Dieser Ansatz verwendet:

1. Eine Typ -Skala -Karte: definiert verschiedene Typskalen (z. B. basierend auf dem goldenen Verhältnis).
2. Eine Validierungsfunktion: stellt sicher, dass die gewählte Skala gültig ist.
3. Mixins: Schriftgrößen für Überschriften erzeugen und Klassen anzeigen.

Der Sass-Code würde eine Karte von Typsskalen, eine Funktion zur Validierung von Skalierungswerten und Mischungen enthalten, um Schriftgrößen für Überschriften (h1-h6) zu generieren und Klassen anzuzeigen (.display-1-.display-4) . Diese Mixins würden an verschiedenen Bootstrap -Breakpoints aufgerufen, um die Schriftgrößen reaktionsmäßig anzupassen. Die Root -Schriftgröße (html) könnte auch mithilfe von Medienabfragen eingestellt werden, um eine Fluid -Typ -Skala über verschiedene Bildschirmgrößen zu erstellen.

Beispiel (veranschaulichend - erfordert eine vollständige SASS -Implementierung):

<code class="language-scss">html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}</code>

Schlussfolgerung:

Durch die Nutzung von SASS und deren Funktionen können Sie in Ihrem Bootstrap -Projekt eine dynamische und anpassbare Typskala erstellen, um eine optimale Lesbarkeit und eine konsistente visuelle Hierarchie auf allen Geräten zu gewährleisten. Das bereitgestellte CodePen -Beispiel (Link im Originaltext enthalten) zeigt diese reaktionsschnelle Skala in Aktion. Denken Sie daran, die Skalierungswerte und Haltepunkte an Ihre spezifischen Entwurfsanforderungen anzupassen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine reaktionsschnelle Skala mit Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!