So implementieren Sie ein responsives Layout in Bootstrap

Responsives Layout-Konzept:

Responsives Web-Layout ist eine Methode, die Benutzern eine gute Sicht durch Browser unterschiedlicher Größe ermöglicht. Es ist derzeit eine beliebte Layoutmethode.

Bootstrap-Responsive-Layout-Implementierungsprinzip:

Durch CSS3-Medienabfragen (Medien-(Geräte-)Abfrage) ermöglichen Medienabfragen die Ausführung von Seiteninhalten in verschiedenen Medienumgebungen. Verschiedene Stile können angezeigt werden (selbstverständlich wird dieser Stil von uns geschrieben und vorgegeben).

@media ist ein in CSS3 angegebenes Attribut, mit dem unterschiedliche Stile für verschiedene Mediengeräte festgelegt werden können. Und selbst auf demselben Gerät wird die Seite beim Zurücksetzen der Browsergröße basierend auf der Breite und Höhe des Browsers neu gerendert.

Anwendung:

Bootstrap verwendet hauptsächlich Min-Width, Max-Width und eine Syntax, um verschiedene CSS-Stile bei unterschiedlichen Auflösungen festzulegen.

Die Syntax von @media

@media mediatype and|not|only (media feature) {
CSS-Code;
}

Der Medientyp umfasst Druck (Druckgerät), Bildschirm (für Computerbildschirme, Tablets, Smartphones usw.), Sprache (Anwendung). ) (für Bildschirmlesegeräte und andere Ton erzeugende Geräte); die Medienfunktion wird verwendet, um die maximale oder minimale Breite anzugeben.

Sehen wir uns ein Beispiel für einen Layout-Container in Bootstrap an:

Bootstrap benötigt einen .container-Container, um den Seiteninhalt und das Rastersystem zu umschließen.

Wie folgt

固定宽度布局
<div class="container">
...
</div>
或者 流式布局
<div class="container-fluid">
...
</div>

Im Bootstrap-CSS-Dokument das @media-Attribut

1591~1605行
 
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
……

Der obige Code erkennt, dass sich die Breite des Containers mit dem Browser ändert Breite ändert sich.

Empfohlen: Bootstrap-Einführungs-Tutorial

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein responsives Layout in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!