Was sind die drei Kerne von Bootstrap?

Bootstrap macht die Frontend-Entwicklung schneller und einfacher. Alle Entwickler können schnell loslegen, alle Geräte können angepasst werden und alle Projekte sind anwendbar.

Obwohl Sie das von Bootstrap bereitgestellte CSS-Stylesheet direkt verwenden können, vergessen Sie nicht, dass der Quellcode von Bootstrap auf der Grundlage der beliebtesten CSS-Vorverarbeitungsskripte entwickelt wurde – Less und Sass. Sie können vorkompilierte CSS-Dateien verwenden, um schnell zu entwickeln, oder Sie können die benötigten Stile aus dem Quellcode anpassen. (Empfohlenes Lernen: Bootstrap-Video-Tutorial)

Mit Hilfe von Bootstrap können sich Ihre Website und Ihre Anwendung schnell und effektiv über denselben Code an Mobiltelefone, Tablets und PC-Geräte anpassen davon sind Es ist das Ergebnis der CSS-Medienabfrage.

Bootstrap bietet eine umfassende und schöne Dokumentation. Hier finden Sie die gesamte ausführliche Dokumentation zu HTML-Elementen, HTML- und CSS-Komponenten sowie jQuery-Plugins.

Drei Kernkomponenten von Bootstrap

Grundlegendes CSS: Legen Sie globale CSS-Stile fest, grundlegende HTML-Elemente können durch Klassen gestaltet werden und erhalten erweiterte Effekte; 🎜>

Komponenten: unzählige wiederverwendbare Komponenten, einschließlich Schriftartensymbole, Dropdown-Menüs, Navigation, Warnleisten, Popup-Boxen und mehr

JS-Plugin: Bootstrap Es wird mit 13 jQuery-Plugins geliefert -ins, die Komponenten in Bootstrap „Leben“ verleihen.

Mobile-first

Mobile-first ist die bedeutendste Änderung in Bootstrap 3.

In früheren Bootstrap-Versionen (bis 2.x) mussten Sie manuell auf ein anderes CSS verweisen, um das gesamte Projekt mobilfreundlich zu machen.

Jetzt ist es anders, das Standard-CSS von Bootstrap 3 selbst ist mobilfreundlich.

Bootstrap 3 ist so konzipiert, dass zuerst das Mobilgerät und dann der Desktop im Vordergrund steht. Dies ist tatsächlich ein sehr zeitgemäßer Wandel, da immer mehr Benutzer mobile Geräte verwenden.

Um eine mit Bootstrap entwickelte Website für Mobilgeräte geeignet zu machen und eine ordnungsgemäße Darstellung und Skalierung des Touchscreens sicherzustellen, muss das Viewport-Meta-Tag im Kopf der Webseite hinzugefügt werden.

lautet wie folgt:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Das width-Attribut steuert die Breite des Geräts. Unter der Annahme, dass Ihre Website von Geräten mit unterschiedlichen Bildschirmauflösungen angezeigt wird, stellt die Einstellung auf Gerätebreite sicher, dass sie auf verschiedenen Geräten korrekt gerendert wird.

initial-scale=1.0 stellt sicher, dass die Webseite beim Laden im Verhältnis 1:1 ohne Skalierung gerendert wird.

In mobilen Browsern können Sie die Zoomfunktion deaktivieren, indem Sie user-scalable=no zum Viewport-Meta-Tag hinzufügen.

Weitere technische Artikel zu Bootstrap finden Sie unter

Lernen Sie im Bootstrap Tutorial Spalte!

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