So sehen Sie Bootstrap -Ergebnisse auf verschiedenen Geräten

Das Responsive -Design von Bootstrap verwendet Medienabfragen, um das Seitenlayout gemäß der Bildschirmgröße des Geräts anzupassen, damit Webseiten unter verschiedenen Größen elegant angezeigt werden können. Benutzer können durch benutzerdefinierte Medienabfragen mehr granuläre Steuerung durchführen, z. B. die Verwendung verschiedener Layouts unter verschiedenen Bildschirmgrößen. Der Code muss getestet werden, auf verschiedenen Geräten involviert und ständig für eine optimale Darstellung angepasst werden.

Bootstrap -Rendering auf verschiedenen Geräten: Was Sie sehen und was Sie sehen möchten, kann anders sein

Viele Anfänger werden über ein Problem verwirrt, wenn Sie Bootstrap lernen: Der Code, den ich geschrieben habe, sieht auf dem Computer gut aus, aber warum werden sie am Telefon durcheinander? In diesem Artikel wird über dieses Problem sprechen, das die Menschen kahl macht und Ihnen einige Tipps mitteilt, um zu vermeiden, dass sie stecken bleiben. Nach dem Lesen dieses Artikels werden Sie die Kernideen des reaktionsschnellen Designs verstehen und Ihre Bootstrap -Projekte auf verschiedenen Geräten kompetent testen.

Der Kern von Bootstrap ist reaktionsschnelles Design, das CSS -Medienabfragen verwendet, um das Seitenlayout entsprechend der Bildschirmgröße verschiedener Geräte anzupassen. Um es unverblümt auszudrücken, dürfte Ihre Webseite unter verschiedenen Bildschirmgrößen anmutig angezeigt werden. Aber "Eleganz" wird nicht automatisch generiert, Sie müssen seinen Mechanismus verstehen, um es wirklich zu kontrollieren.

Lassen Sie uns zuerst die Grundlagen überprüfen. Bootstrap verwendet ein Gittersystem, um die Anordnung von Seitenelementen über container , row , col . Diese Klassen ändern ihre Breite gemäß den Änderungen der Bildschirmgröße und ermöglichen ein reaktionsschnelles Layout. Sie müssen verstehen col-md-4 ein Viertel der Breite auf einem mittleren Bildschirm einnimmt, aber auf einem kleinen Bildschirm kann es die gesamte Reihe belegen. Der Schlüssel ist die Medienabfrage, die wie eine bedingte Anweisung aussieht und verschiedene CSS -Stile entsprechend der Bildschirmgröße auswählt.

Schauen wir uns ein einfaches Beispiel an und erleben wir die reaktionsschnelle Magie von Bootstrap:

 <code class="html"><div class="container"> <div class="row"> <div class="col-md-4">Column 1</div> <div class="col-md-4">Column 2</div> <div class="col-md-4">Column 3</div> </div> </div></code>

Dieser Code zeigt drei Spalten auf mittleren und großen Bildschirmen an, aber auf kleinen Bildschirmen werden diese drei Spalten vertikal angezeigt, wobei jeweils die gesamte Zeile besetzt. Dies ist das Standardverhalten von Bootstrap, das sich automatisch an verschiedene Bildschirmgrößen anpasst.

Dies ist jedoch nur die grundlegendste Verwendung. In der Praxis benötigen Sie möglicherweise mehr körnige Kontrolle. Zum Beispiel möchten Sie möglicherweise verschiedene Layouts für verschiedene Bildschirmgrößen verwenden oder einem bestimmten Gerät einige zusätzliche Stile hinzufügen. Zu diesem Zeitpunkt müssen Sie ein tiefes Verständnis für den Medienquerymechanismus von Bootstrap erlangen und lernen, Medienabfrage anzupassen.

Angenommen, Sie möchten vier Spalten auf einem super großen Bildschirm, drei Spalten auf einem großen Bildschirm, zwei Spalten auf einem mittleren Bildschirm und einer Spalte auf einem kleinen Bildschirm anzeigen:

 <code class="html"><div class="container"> <div class="row"> <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-12">Column 1</div> <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-12">Column 2</div> <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-12">Column 3</div> <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-12">Column 4</div> </div> </div></code>

Dieser Code nutzt die Spaltenklassen verschiedener Größen, die von Bootstrap bereitgestellt werden, die flexiblere Layout -Steuerung.

Natürlich reicht das Schreiben von Code nicht aus. Sie müssen Ihren Code auf verschiedenen Geräten testen. Am einfachsten ist es, das Fenster im Browser zu ändern, um verschiedene Bildschirmgrößen zu simulieren. Die Entwicklertools von Chrome bieten sehr leistungsstarke Gerätesimulationsfunktionen, mit denen Bildschirmgrößen, Pixeldichte und sogar Netzwerkbedingungen verschiedener Geräte simulieren können. Darüber hinaus können Sie auch Echtzeit-Tests verwenden, die den Anzeigeeffekt Ihrer Webseite auf verschiedenen Geräten realistischer widerspiegeln können.

Denken Sie daran, dass das reaktionsschnelle Design nicht über Nacht erreicht wird und ständige Tests und Anpassungen erfordert. Haben Sie keine Angst, es zu versuchen. Nur wenn Sie es mehr üben, können Sie die Essenz von Bootstrap wirklich beherrschen und Ihre Webseite auf jedem Gerät perfekt präsentieren. Vergessen Sie schließlich nicht, sich auf die Lesbarkeit und Wartbarkeit Ihres Codes zu konzentrieren, was bei großen Projekten von entscheidender Bedeutung ist. Eine klare und leicht verständliche Codestruktur ermöglicht es Ihnen, das doppelte Ergebnis mit der Hälfte des Aufwands während des Debuggens und der Wartung zu erzielen.

Das obige ist der detaillierte Inhalt vonSo sehen Sie Bootstrap -Ergebnisse auf verschiedenen Geräten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!