Bootstrap -Haltepunkte sind vordefinierte Bildschirmgr??en, die reaktionsschnelles Design auf den Ger?ten erm?glichen. Die 5 Breakpoints in Bootstrap 5 sind: 1. xs (extra klein,

Bootstrap -Haltepunkte sind vordefinierte Bildschirmgr??en, mit denen Sie steuern k?nnen, wie sich Ihr Layout und Ihr Inhalt auf verschiedene Ger?te anpassen. Sie sind die Grundlage für das Responsive -Design -System von Bootstrap, sodass Sie Layouts erstellen k?nnen, die automatisch Mobiltelefone, Tablets, Desktops und gr??ere Bildschirme einstellen.

Jeder Haltepunkt entspricht einer minimalen Ansichtsfensterbreite und sie werden in CSS -Klassen, SASS -Variablen und Versorgungsmischungen verwendet, um reaktionsschnelle Stile anzuwenden.

Die 5 Bootstrap Breakpoints (ab Bootstrap 5)

Bootstrap 5 verwendet fünf Hauptbrandbezirke mit jeweils eine bestimmte Namenskonvention und Bildschirmbreite:

• xs (extra klein) - Standard; Für Bildschirme weniger als 576px (kein Pr?fix erforderlich)
• sm (klein) - ≥576px
• MD (Medium) - ≥ 768px
• LG (gro?) - ≥992px
• xl (extra gro?) - ≥ 1200px
• xxl (extra gro?) - ≥1400px

Diese Haltepunkte werden in Klassennamen verwendet, um die Sichtbarkeit und das Verhalten der Rasterspalten zu kontrollieren. Zum Beispiel:

 <div class = "col-md-6 col-LG-4"> Inhalt </div>

Das heisst:

• Nehmen Sie auf mittleren Bildschirmen (≥768px) 6 von 12 Spalten (halbe Breite) ein
• Auf gro?en Bildschirmen (≥992px) und nach oben 4 Spalten (ein Drittel Breite) nehmen

H?ufige Verwendungen von Haltepunkten

• Gittersystem : Definieren Sie, wie viele Spalten ein Element in verschiedenen Bildschirmgr??en umfasst.
• Responsive Dienstprogramme : Inhalte anhand der Bildschirmgr??e anzeigen oder ausblenden:

   <p class = "d-none d-md-block"> nur auf mittleren und gr??eren Bildschirmen sichtbar </p>

• Benutzerdefinierte CSS : Verwenden Sie SASS- oder Medienfragen, um reaktionsschnelle Stile zu schreiben:

   @include Media-Breakpoint-up (LG) {
    .Custom-Klasse {
      Schriftgr??e: 20px;
    }
  }

  Schlüsseltipps

  • Breakpoints sind inklusive - md gilt auf Medium und alle gr??eren Bildschirme, es sei denn, sie überschrieben.
  • Mobile-First-Ansatz: Starten Sie mit dem Start für kleine Bildschirme und verwenden Sie dann Breakpoints, um gr??ere Anpassungen anzupassen.
  • Sie müssen sich nicht an genaue Pixelwerte erinnern - verwenden Sie einfach die Pr?fixe ( sm , md usw.) in Ihren Klassennamen.

  Im Grunde genommen machen Bootstrap -Breakpoints es einfach, flexible, reaktionsschnelle Designs zu erstellen, ohne komplexe Medienabfragen von Grund auf neu zu schreiben.

  Das obige ist der detaillierte Inhalt vonWas sind Bootstrap -Haltepunkte?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!