Unterstützt Bootstrap Mobiltelefone?

bootstrap unterstützt Mobiltelefone; das responsive CSS von Bootstrap kann an Desktops, Tablets und Mobiltelefone angepasst werden, und seit Bootstrap 3 umfasst das Framework in der gesamten Bibliothek Mobile-First-Stile.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Bootstrap2.3.2-Version, Dell G3-Computer.

Responsives Bootstrap-Layout

Bootstrap bietet ein reaktionsfähiges, mobiles, flüssiges Rastersystem, das automatisch in bis zu 12 Spalten unterteilt wird, wenn die Bildschirm- oder Ansichtsfenstergröße zunimmt. Es enthält benutzerfreundliche vordefinierte Klassen sowie leistungsstarke Mixins zum Generieren semantischerer Layouts.

Zunächst wird das Rastersystem verwendet, um das Seitenlayout durch eine Reihe von Kombinationen von Zeilen und Spalten zu erstellen. Bootstrap wählt je nach Bildschirmgröße unterschiedliche Rasteroptionen aus. Es gibt vier Rasteroptionen: ultrakleiner Bildschirm (Mobiltelefon), kleiner Bildschirm (Tablet), mittlerer Bildschirm (Desktop) und großer Bildschirm (extra großer Desktop). Das Rastersystem ist in 12 Spalten unterteilt, d. h. jede Zeile kann bis zu 12 Spalten aufnehmen. Wenn die Anzahl der in einer Zeile enthaltenen Spalten größer als 12 ist (d. h. die Rasterzellen in einer Zeile überschreiten 12 Zellen), wird sie automatisch gesetzt. Kurz gesagt, eine Zeile kann nur maximal 12 Spalten enthalten Die detaillierte Analyse später.

Prinzip:

Durch CSS3-Medienabfragen (Medien-(Geräte-)Abfrage) ermöglichen Medienabfragen, dass der Seiteninhalt unterschiedliche Stile anzeigt, wenn er in verschiedenen Medienumgebungen ausgeführt wird (dieser Stil wird natürlich von uns geschrieben und spezifiziert).

@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-Breite, Max-Breite und 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 (wird für Computerbildschirme, Tablets, Smartphones usw. verwendet), Sprache (wird auf Bildschirmlesegeräte und andere Ton erzeugende Geräte angewendet); wird verwendet, um beispielsweise die maximale Breite oder die 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

Layout mit fester Breite

<div class="container">
...
</div>

oder flüssiges Layout

<div class="container-fluid">
...
</div>

Im Bootstrap-CSS-Dokument @media-Attribut

1591~1605 Zeilen

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

Der obige Code implementiert den Container, der sich mit der Breite von ändert Im Browser ändert sich auch die Breite.

Empfohlen: „Bootstrap-Video-Tutorial“ „CSS-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonUnterstützt Bootstrap Mobiltelefone?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!