So sehen Sie Bootstraps reaktionsschnelles Design

Bootstrap Responsive Design passt automatisch den Anzeigeeffekt der Seite auf verschiedenen Bildschirmgrößen über CSS -Medienabfrage an. Es stellte eine Reihe von Haltepunkten unter verschiedenen Bildschirmgrößen vor und wandte sich dynamisch unterschiedliche Stile entsprechend der Bildschirmbreite an, um die Seitenanpassung zu erreichen.

Das Geheimnis von Bootstrap Responsive Design: Was Sie sehen und was es tatsächlich tut

Ermöglicht es Ihren Webseiten, auf Bildschirmen aller Größen wunderschön angezeigt zu werden, um es unverblümt auszudrücken, um es unverblümt auszudrücken. Aber wie wird das implementiert? Nach dem Lesen dieses Artikels können Sie seine Prinzipien nicht nur verstehen, sondern auch einige gemeinsame Fallstricke vermeiden.

Beeilen Sie sich nicht zuerst, den Code zu lesen. Überlegen Sie sich, wie Sie sich fühlen, wenn Sie Ihr Mobiltelefon verwenden, um die Webseite anzuzeigen. Der Bildschirm ist klein, der Inhalt wird gepresst und die Bilder werden reduziert, sonst können Sie sie nicht vollständig sehen. Was Bootstrap tut, ist, Ihnen automatisch mit diesen trivialen Dingen umzugehen. Es implementiert diese Magie durch CSS -Medienfragen. Medienabfrage ist wie ein intelligenter Switch, der verschiedene CSS -Stile automatisch entsprechend der Bildschirmgröße schaltet. Sie schreiben keinen komplexen JavaScript, aber es kann sich automatisch an verschiedene Geräte anpassen. Dies ist der Charme des reaktionsschnellen Designs.

Immerhin ist Medienabfrage ein CSS -Code, der Informationen wie Bildschirmbreite, Höhe, Auflösung usw. beurteilt und dann selektiv unterschiedliche Stile anwendet. Bootstrap nutzt diesen Mechanismus geschickt und hat einen Satz von Stilen unter verschiedenen Bildschirmgrößen vordefiniert.

Schauen Sie sich diesen Code an:

 <code class="css">@media (max-width: 768px) { .container { max-width: 720px; /* 调整容器宽度*/ } .my-image { width: 100%; /* 图片占满宽度*/ } }</code>

Die Bedeutung dieses Codes lautet: Wenn die Bildschirmbreite weniger als 768 Pixel beträgt, beträgt die maximale Breite des Containers 720 Pixel, und die Bildbreite wird automatisch auf 100%eingestellt, sodass das Bild vollständig auf einem kleineren Bildschirm angezeigt werden kann. Was Sie sehen, ist, dass die Seite automatisch angepasst wird, aber dahinter stellt Bootstrap dynamisch unterschiedliche Stile an, basierend auf den Ergebnissen von Medienabfragen.

Bootstrap stellt mehrere Breakpoints vor, wie xs , sm , md , lg und xl , was den unterschiedlichen Bildschirmbreite entspricht. Hinter diesen Haltepunkten befindet sich eine Reihe von Medienabfragen, die die Stile unter Bildschirmen unterschiedlicher Größen steuern. Die spezifischen Werte für diese Haltepunkte finden Sie in der Bootstrap -Dokumentation.

Natürlich ist das reaktionsschnelle Design von Bootstrap nicht perfekt. Manchmal müssen Sie möglicherweise den Standardstil von Bootstrap entsprechend der tatsächlichen Situation anpassen oder einige Medienabfragen selbst hinzufügen, um die Seite zu optimieren. Zum Beispiel müssen Sie möglicherweise einen speziellen Stil für ein bestimmtes Element an einem Haltepunkt festlegen, und Sie müssen selbst CSS schreiben.

Darüber hinaus kann eine übermäßige Abhängigkeit von Bootstraps Standardstil auch zu einem Mangel an Persönlichkeit auf der Seite führen. Es wird empfohlen, angemessene Änderungen und Anpassungen auf der Grundlage Ihrer eigenen Entwurfsanforderungen basierend auf dem Verständnis des Bootstrap -Mechanismus vorzunehmen.

Schließlich ein sehr wichtiger Punkt: Ignorieren Sie nicht die Lesbarkeit und Wartbarkeit des Codes. Beim Schreiben von CSS sollten Sie gute Namensgewohnheiten beibehalten und die erforderlichen Kommentare hinzufügen, um zukünftige Änderungen und Wartung zu erleichtern. Das ist keine Kleinigkeit. Eine chaotische CSS -Code -Basis wird Sie beim Debuggen und Ändern von Debuggen und Modifikation verrückt machen. Vertrauen Sie mir, ich verbrachte stundenlang damit, einen versteckten Fehler zu finden, weil ich nicht auf die Codespezifikation geachtet habe.

Um das reaktionsschnelle Design von Bootstrap zu verstehen, müssen Sie nicht nur wissen, wie man es benutzt, sondern auch seine Prinzipien verstehen, um es flexibel zu verwenden und nicht in einige gängige Fallstricke zu geraten. Denken Sie daran, es ist ein Werkzeug, kein Allheilmittel. Nur wenn man lernt, es zu kontrollieren, kann es wirklich seine Rolle spielen.

Das obige ist der detaillierte Inhalt vonSo sehen Sie Bootstraps reaktionsschnelles Design. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!