Was bedeutet das Bootstrap-Grid-System?-Bootstrap-Tutorial-php.cn

Heim

Web-Frontend

Bootstrap-Tutorial

Was bedeutet das Bootstrap-Grid-System?

尚

Jul 19, 2019 pm 02:06 PM

Was bedeutet das Bootstrap-Grid-System?

Was ist das Rastersystem?

Das Rastersystem bezieht sich auf die Aufteilung des Seitenlayouts in Spalten gleicher Breite und die anschließende Weitergabe Die Anzahl der Spalten wird definiert, um das Seitenlayout zu modularisieren. Das Rastersystem von Bootstrap verwendet ein 1-12-Spalten-Muster und verwendet proportionale Berechnungen, um die von Ihnen definierten Spaltenbreiten festzulegen. Wenn Sie für diese Zeile beispielsweise einen zweispaltigen Layoutmodus verwenden möchten, beträgt die Breite jeder Spalte 50 % des äußeren Containers. Unabhängig davon, welches Gerät Sie zum Durchsuchen verwenden, wird sie in diesem angezeigt Anteil. Wenn die Gerätebreite jedoch kleiner als die von Ihnen festgelegte Mindestbreite ist, werden die beiden Spalten zu einer Spalte nebeneinander.

Das Rastersystem von Bootstrap

Die Verwendung des Rastersystems in Bootstrap ist sehr einfach und bequem. Führen Sie einfach die bereits definierten Klassen in Ihre Divs ein.

Werfen wir zunächst einen Blick auf mehrere Rasterklassen, die in Bootstrap verwendet werden können:

1 .col-xs-* Dies ist eine ultrakleine Bildschirmklasse (

2. .col-sm-* Dies ist eine Geräteklasse mit kleinem Bildschirm (≥768px und

3. .col-md-* Dies ist die mittlere Geräteklasse (≥992px und

4. .col-lg-* Dies ist eine große Geräteklasse (≥1200px).

So verwenden Sie das Bootstrap-Rastersystem

Sie können den Layoutstil, den Sie auf verschiedenen Geräten anwenden möchten, mithilfe der diesen Geräten entsprechenden Rasterklassen festlegen. Zum Beispiel:

> ; Das Ergebnis dieser Codierung ist, dass die beiden Divs auf dem PC als zwei Zeilen angezeigt werden (jede Zeile belegt 12 Spalten des Rasters), im mobilen Browser jedoch als eine Zeile und zwei Spalten (jede Spalte belegt 6 Spalten des Rasters). Netz). . In diesem Formular können Sie das Rastersystem ganz einfach verwenden, um Ihr eigenes Anwendungslayout anzupassen.

Weitere Informationen

Zusätzlich zu den oben genannten Verwendungsmethoden können Sie auch die „Spaltenoffset-Klasse“ verwenden, um Ihr eigenes Raster schnell zu positionieren. Die Verwendungsmethode ähnelt

Gemäß dieser Schreibmethode wird dieses Div auf der PC-Seite um 3 Spalten nach rechts versetzt.

Weitere technische Artikel zu Bootstrap finden Sie in der Spalte

Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonWas bedeutet das Bootstrap-Grid-System?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

Integration von Bootstrap -Stilen in React: Methoden und TechnikenApr 17, 2025 am 12:04 AM

Das Integrieren von Bootstrap in React -Projekte kann auf zwei Arten durchgeführt werden: 1) Einführung mit CDN, geeignet für kleine Projekte oder schnelle Prototypen; 2) Installation mit dem NPM -Paketmanager, geeignet für Szenarien, die eine tiefe Anpassung erfordern. Mit diesen Methoden können Sie schnell schöne und reaktionsschnelle Benutzeroberflächen in React erstellen.

Bootstrap in React: Vorteile und Best PracticesApr 16, 2025 am 12:17 AM

Zu den Vorteilen der Integration von Bootstrap in React -Projekte gehören: 1) schnelle Entwicklung, 2) Konsistenz und Wartbarkeit und 3) reaktionsschnelles Design. Durch direkte Einführung von CSS-Dateien oder die Verwendung der React-Bootstrap-Bibliothek können Sie die Komponenten und Stile von Bootstrap in Ihrem React-Projekt effizient verwenden.

Bootstrap: Eine kurze Anleitung zu Web -FrameworksApr 15, 2025 am 12:10 AM

Bootstrap ist ein von Twitter entwickelter Framework, um schnell reaktionsschnelle, mobile Websites und Anwendungen aufzubauen. 1. Einfache Gebrauchsbilanz und reichhaltige Komponentenbibliotheken machen die Entwicklung schneller. 2. Die riesige Gemeinschaft bietet Unterstützung und Lösungen. 3. Einführen und verwenden Sie Klassennamen, um Stile über CDN zu steuern, z. B. das Erstellen von reaktionsschnellen Gittern. 4.. Anpassbare Stile und Erweiterungskomponenten. 5. Vorteile umfassen eine schnelle Entwicklung und reaktionsschnelles Design, während Nachteile Stilkonsistenz und Lernkurve sind.

Bootstrap abbrechen: Was es ist und warum es wichtig istApr 14, 2025 am 12:05 AM

Bootstrapisafree, Open-SourcecsSframeworkThatSimplifiesresponSiveandMobile-FirstwebsitedE-Entwicklung.itofferspre-stylyledComponentsandagridsystem, Strophenhektrierung der Verleumdung und -Anteilung und Funktionalwebdesigns.

Bootstrap: Das Webdesign erleichtert einfacherApr 13, 2025 am 12:10 AM

Was das Webdesign erleichtert, ist Bootstrap? Seine voreingestellten Komponenten, reaktionsschnelles Design und reichhaltiger Community -Unterstützung. 1) Voreingestellte Komponentenbibliotheken und -stile ermöglichen es Entwicklern, einen komplexen CSS -Code zu vermeiden. 2) Das integrierte Gittersystem vereinfacht die Erstellung von Reaktionslayouts. 3) Die Unterstützung der Community bietet reichhaltige Ressourcen und Lösungen.

Die Auswirkungen von Bootstrap: Beschleunigung der WebentwicklungApr 12, 2025 am 12:05 AM

Bootstrap beschleunigt die Webentwicklung und durch Bereitstellung vordefinierter Stile und Komponenten können Entwickler schnell reaktionsschnelle Websites erstellen. 1) Es verkürzt die Entwicklungszeit, z. B. das Abschluss des Grundlayouts innerhalb weniger Tage im Projekt. 2) Durch SASS -Variablen und Mixins können benutzerdefinierte Stile spezifische Anforderungen entsprechen. 3) Verwenden der CDN -Version kann die Leistung optimieren und die Ladegeschwindigkeit verbessern.

Bootstrap verstehen: Kernkonzepte und MerkmaleApr 11, 2025 am 12:01 AM

Bootstrap ist ein Front-End-Frontwork von Open Source, und seine Hauptfunktion besteht darin, Entwicklern dabei zu helfen, reaktionsschnelle Websites schnell aufzubauen. 1) Es bietet vordefinierte CSS-Klassen und JavaScript-Plug-Ins, um die Implementierung komplexer UI-Effekte zu erleichtern. 2) Das Arbeitsprinzip von Bootstrap beruht auf seinen CSS- und JavaScript -Komponenten, um reaktionsschnelles Design durch Medienabfragen zu realisieren. 3) Beispiele für die Nutzung sind die grundlegende Nutzung wie das Erstellen von Schaltflächen und die erweiterte Nutzung, wie z. B. benutzerdefinierte Stile. 4) Zu den häufigen Fehlern gehört das Fehlschreiben von Klassennamen und fälschlicherweise Einführung von Dateien. Es wird empfohlen, Browser -Entwickler -Tools zum Debuggen zu verwenden. 5) Die Leistungsoptimierung kann durch benutzerdefinierte Build -Tools erreicht werden. Best Practices umfassen vordefinierte mit semantischen HTML und Bootstrap vordefiniert

Bootstrap Deep Dive: Responsive Design & Advanced Layout -TechnikenApr 10, 2025 am 09:35 AM

Bootstrap implementiert reaktionsschnelles Design durch Grid -Systeme und Medienabfragen, wodurch die Website an verschiedene Geräte angepasst wird. 1. Verwenden Sie eine vordefinierte Klasse (z. B. Col-SM-6), um die Säulenbreite zu definieren. 2. Das Gittersystem basiert auf 12 Spalten, und es ist erforderlich zu beachten, dass die Summe 12. 3 nicht überschreitet. Verwenden Sie Breakpoints (wie SM, MD, LG), um das Layout unter verschiedenen Bildschirmgrößen zu definieren.

See all articles