Heim > Artikel > Web-Frontend > Über das Grid-System-Prinzip von Bootstrap3.0

Über das Grid-System-Prinzip von Bootstrap3.0

不言Original: 2018-06-20 13:47:031840Durchsuche

Dieser Artikel stellt hauptsächlich die Prinzipien des Grid-Systems von Bootstrap3.0 vor. Jetzt kann ich ihn mit Ihnen teilen.

Bootstrap verfügt über eine integrierte Funktion Satz von responsive , ein mobiles, flüssiges Rastersystem, das sich automatisch in bis zu 12 Spalten aufteilt, wenn das Bildschirmgerät oder die Größe des Ansichtsfensters zunimmt. Hier nenne ich das Rastersystem in Bootstrap das Layout

Rastersystem (Layout)

Bootstrap verfügt über ein integriertes, reaktionsfähiges, mobiles Gerät-First-Fluid-Rastersystem als Bildschirmgerät oder Ansichtsfenstergröße Wenn der Wert zunimmt, teilt das System ihn automatisch in bis zu 12 Spalten auf.

Ich nenne das Rastersystem in Bootstrap hier ein Layout. Durch eine Reihe von Kombinationen von Zeilen und Spalten wird ein Seitenlayout erstellt. Anschließend können Ihre Inhalte in dem von Ihnen erstellten Layout platziert werden. Hier ist eine kurze Einführung in die Funktionsweise des Bootstrap-Rastersystems:

Zeilen müssen im .container enthalten sein, um ihnen die richtige Ausrichtung und Polsterung zu verleihen. Erstellen Sie mithilfe von Zeilen horizontal eine Reihe von Spalten (cpumn). Ihr Inhalt sollte in einer Spalte (cpumn) platziert werden, und nur eine Spalte (cpumn) kann ein direktes untergeordnetes Element einer Zeile (row) sein. Vordefinierte Rasterklassen wie .row und .cp-xs-4 können zum schnellen Erstellen von Rasterlayouts verwendet werden. Im Bootstrap-Quellcode definierte Mixins können auch zum Erstellen semantischer Layouts verwendet werden. Erstellen Sie Lücken (Gutter) zwischen Spalten (cpumn), indem Sie den Abstand festlegen. Gleichen Sie dann den Effekt des Auffüllens aus, indem Sie negative Werte für das erste und letzte margin festlegen. Spalten in einem Rastersystem stellen den Bereich dar, den sie umfassen, indem sie Werte von 1 bis 12 angeben. Beispielsweise können mit drei .cp-xs-4s drei Spalten gleicher Breite erstellt werden.

DW6-Kodierungsimplementierung

Okay, fangen wir an, den Code zu schreiben. Schauen Sie sich zunächst den Editor an, den ich im letzten Bild verwende. Ich habe viele Tools verwendet, als ich in der Schule HTML + CSS gelernt habe.

Erstellen Sie dann ein neues HTML-Dokument und wählen Sie den Typ HTML5 aus.

Speichern Sie es nach der Erstellung unter demselben Namen der vorherige Abschnitt Im selben Verzeichnis der js- und css-Ordner in der Erklärung.

layout.html ist die Datei, die ich gerade erstellt habe. Bootstrap.html ist auch die erste HTML-Seite, die im vorherigen Abschnitt erstellt wurde.

Jetzt können Sie den gesamten Code in Bootstrap.html auf die Seite „layout.html“ kopieren.

Dann fügen Sie den folgenden Code unter dem Body-Tag hinzu

<h1>Hello, world!</h1>
<h2class="page-header">区域一</h2>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
<h2class="page-header">区域二</h2>
<p>IfyouworkwithBootstrap&#39;suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter&#39;sCSShinterbasedonless.js.</p>
<h2class="page-header">区域三</h2>
<p>Withinthedownloadyou&#39;llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>

Jeder sollte diese Tags verstehen können, sie sind die grundlegendsten und einfachsten.

Nach dem Hinzufügen aller Codes der Seite „layout.html“ sieht es wie folgt aus:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<!--Bootstrap-->
<linkhref="css/bootstrap.min.css"rel="stylesheet"media="screen"></p>
<p><!--HTML5ShimandRespond.jsIE8supportofHTML5elementsandmediaqueries-->
<!--WARNING:Respond.jsdoesn&#39;tworkifyouviewthepageviafile://-->
<!--[ifltIE9]>
<scriptsrc="<a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script</a>>
<scriptsrc="<a href="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script">https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script</a>>
<![endif]-->
</head>
<body>
<h1>Hello,world!</h1>
<h2class="page-header">区域一</h2>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
<h2class="page-header">区域二</h2>
<p>IfyouworkwithBootstrap&#39;suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter&#39;sCSShinterbasedonless.js.</p>
<h2class="page-header">区域三</h2>
<p>Withinthedownloadyou&#39;llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>
<scriptsrc="js/jquery-2.0.3.min.js"></script>
<scriptsrc="js/bootstrap.min.js"></script>
</body>
</html>

Natürlich ist der Effekt sehr einfach, ich habe immer noch den Screenshot zum Vergleich eingefügt.

Optimierung 1: Sie können feststellen, dass der Seiteneffekt im obigen Bild den gesamten Bildschirm einnimmt, und wir können den obigen Inhalt über die Bootstrap-Stilklasse zentrieren .

<p class="container">
 .........之前上面添加在body标签下的代码
</p>

Der Effekt ist wie folgt

Sie können feststellen, dass die Containerklasse die Breite festlegt und die Anzeige des Inhalts in der Mitte ermöglicht der Seite.

Optimierung 2: Zeigen Sie die drei Bereiche in derselben Zeile an und teilen Sie sie gleichmäßig in drei Spalten auf.

Fügen Sie zuerst einen Container für die drei Bereiche hinzu, Sie können p verwenden, und fügen Sie eine Klasse für p e88f4217a654973b612675b9cc7cb93e hinzu.

Dann fügen wir a hinzu Container für jeden Fügen Sie außerdem einen Container p zum kleinen Bereich hinzu und fügen Sie eine Klasse für p hinzu 1356d366468de702eb7d5063f78f1f8e

Der einfache Code lautet wie folgt

<p class="container">
<h1>Hello,world!</h1>
<pclass="row">
<pclass="col-xs-4">
<h2class="page-header">区域一</h2>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
</p>
<pclass="col-xs-4">
<h2class="page-header">区域二</h2>
<p>IfyouworkwithBootstrap&#39;suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter&#39;sCSShinterbasedonless.js.</p>
</p>
<pclass="col-xs-4">
<h2class="page-header">区域三</h2>
<p>Withinthedownloadyou&#39;llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>
</p>
</p>
</p>

Der Effekt Wie unten gezeigt, wird

tatsächlich in einer Zeile angeordnet und dann in drei Spalten unterteilt. Lassen Sie uns die 6 Prinzipien des oben genannten Rastersystems kombinieren. Verstehst du ein bisschen? Wie auch immer, ich verstehe viel. Auf die gleiche Weise können komplexere Rasterlayoutseiten erstellt werden. Fügen Sie einfach die entsprechende Rasterlayoutklasse zum vom Layout verwendeten Container hinzu. Wenn der Inhalt beispielsweise 6 Raster belegt, fügen Sie eine cp-xs-6-Klasse hinzu. Wenn er vier Raster belegt, fügen Sie eine cp-xs-4-Klasse hinzu und verwenden Sie dann die Zeilenklasse um denselben Zeilencontainer.

Zusammenfassung

In diesem Abschnitt wird hauptsächlich das Layout (Rastersystem) untersucht und sein Funktionsprinzip anhand einfacher Beispiele verstanden.

Die verwendeten Klassen sind:

1..container: Verwenden Sie .container, um den Inhalt auf der Seite umzubrechen, um eine zentrierte Ausrichtung zu erreichen. max-width wird für den Container in verschiedenen Medienabfragen oder Wertebereichen entsprechend dem Rastersystem festgelegt.

2..cp-xs-4: Diese Klasse ist durch „-“ in drei Teile unterteilt. Die Zahl im dritten Teil dient als allgemeine Referenz und ihr Bereich liegt zwischen 1 und 12. Das heißt, ein Bereich kann in 12 Spalten unterteilt werden. Dies muss in Verbindung mit der Zeilenklasse verwendet werden.

Tatsächlich ist dieses Layout dem Tabellenlayout in HTML mit TR-Zeilen und TD-Spalten sehr ähnlich.

Das war's für den Moment. Kopieren Sie einfach den Code und fügen Sie ihn ein, um den Effekt zu sehen. Natürlich müssen Sie zuerst die CSS- und JS-Dateien vorbereiten.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie CSS, um das Seitenverhältnis des Seiteninhalts beizubehalten

Das obige ist der detaillierte Inhalt vonÜber das Grid-System-Prinzip von Bootstrap3.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php html5 css bootstrap html class copy JS margin padding viewport column table td tr

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

Vorheriger Artikel：Teilen Sie mit, wie Sie den Hintergrund mit CSS steuern könnenNächster Artikel：Teilen Sie mit, wie Sie den Hintergrund mit CSS steuern können

In Verbindung stehende Artikel

Mehr sehen