Bootstrap Rastersystem
Kurze Einführung
In diesem Tutorial erfahren Sie, wie Bootstrap Grid-System (Grid System) zu schaffen.
in der grafischen Gestaltung, wie Sie wissen kann, ist die Grid-System, eine zweidimensionale Struktur, durch die horizontalen und vertikalen Achsen regionalen Komponenten für den Aufbau Inhalt schneiden. Es ist weit verbreitet, um die Design-Layout und inhaltliche Struktur von Grafik-Design angewendet. In Web-Design ist es eine schnelle und effiziente Möglichkeit, ein konsistentes Layout sehr effektive Art und Weise zu erstellen, indem Sie HTML und CSS. So hat das Gittersystem ein wichtiger Bestandteil / Modulrahmen oder Web-Design-Workflow werden.
Einfach gesagt, Web-Design, verwenden wir HTML und CSS Zeilen und Spalten zu erstellen ein Raster zu erreichen. Und die Spalte enthält den eigentlichen Inhalt.
Ab Version 2.3.2 ab, bietet Bootstrap zwei Arten von Mesh. Die Standard-Grid-System ist 940px breit und 12. Sie können Responsive Sheet hinzufügen, wie es das Ansichtsfenster präsentiert die Breite von 724px und 1170px einzustellen.
Es ist auch ein Strömungsgittersystem, das auf einem Prozentsatz basiert, eher als pixelbasierten. Und es kann reagiert, als Standard-Festnetz zu derselben verlängert werden. In diesem Tutorial werden wir die Standard-Raster durch einige Beispiele, Flussgittersystem diskutieren werden in einem separaten Tutorial erklärt.
Bitte laden Sie die neueste Version von Bootstrap-Dateien von "http://twitter.github.io/bootstrap/assets/bootstrap.zip" auf. Sie können in unserem Einführungstutorial die entsprechende Dateistruktur zu verstehen.
Raus aus dem Standardraster
Beginnen wir mit einem einfachen HTML beginnen, um zu sehen, wie das obige Anwendung Standardraster.
<! DOCTYPE html>
<Html>
<Head>
<Title> mit Bootstrap festes Layout Beispiele </ title>
<Meta name = "Ansichtsfenster" content = "width = device-width, initial-scale = 1.0"?>
<! - Bootstrap ->
<Link href = "Bootstrap / css / bootstrap.min.css" rel = "stylesheet" media = "screen">
<Script src = "http://code.jquery.com/jquery.js"> </ script>
<Script src = "Bootstrap / js / bootstrap.min.js"> </ script>
</ Head>
<Body>
</ Body>
</ Html>
Bootstrap mit der CSS-Klasse "Zeile" zu horizontalen Linien der CSS-Klasse "spanx" erstellen (der Wert von x von 1 bis 12) eine vertikale Säule zu schaffen. Durch diese beiden ein Drei-Säulen-Raster erstellen (jede Spalte enthält einen Text), HTML wie folgt
<! DOCTYPE html> <Html> <Head> <Title> mit Bootstrap festes Layout Beispiele </ title> <Meta name = "Ansichtsfenster" content = "width = device-width, initial-scale = 1.0"?> <! - Bootstrap -> <Link href = "Bootstrap / css / bootstrap.min.css" rel = "stylesheet" media = "screen"> <Script src = "http://code.jquery.com/jquery.js"> </ script> <Script src = "Bootstrap / js / bootstrap.min.js"> </ script> </ Head> <Body> <Div class = "container"> <Div class = "Zeile"> <Div class = "MS4"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum an, laoreet mattis, massa. Sed eleifend nonummy Durchm. Nullam mauris ante, elementum et, bibendum an, sitzen posuere amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. aliquam vehicula mi bei mauris. Maecenas placerat, nisl bei consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis Lacus. Morbi magna magna, tincidunt a, mattis nicht, imperdiet vitae, tellus. Sed odio est auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. < / p> </ div> <Div class = "MS4"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum an, laoreet mattis, massa. Sed eleifend nonummy Durchm. Nullam mauris ante, elementum et, bibendum an, sitzen posuere amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. aliquam vehicula mi bei mauris. Maecenas placerat, nisl bei consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis Lacus. Morbi magna magna, tincidunt a, mattis nicht, imperdiet vitae, tellus. Sed odio est auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. < / p> </ div> <Div class = "MS4"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum an, laoreet mattis, massa. Sed eleifend nonummy Durchm. Nullam mauris ante, elementum et, bibendum an, sitzen posuere amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. aliquam vehicula mi bei mauris. Maecenas placerat, nisl bei consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis Lacus. Morbi magna magna, tincidunt a, mattis nicht, imperdiet vitae, tellus. Sed odio est auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. < / p> </ div> </ Div> </ Div> </ Body> </ Html>
Im Folgenden ist eine grafische Darstellung des Gittersystems
Auf diese Weise können wir die "MS4" Klasse für jede Spalte durch Verwendung erstellt einen Dreistützenraster. "Container" Klasse wird verwendet, um die gesamte Struktur zu halten. Hier können Sie die Online - Instanz anzeigen . Daraus können wir den angegebenen CSS-Klasse verwendet ableiten die Spaltennummer der allgemeinen Syntax zu erstellen.
Erstellen Sie Raster allgemeine Syntax:
<Div class = & quot; Zeile & quot;> <Div class = & quot; spanx & quot;> Inline-Elemente wie Span, Block-Level-Elemente wie p, div. </ Div> Wiederholung <div class = & quot; spanx & quot;> y mal.
Wo y ist die Anzahl der Spalten, die Sie erstellen möchten, und x gleich 12 (das ist die maximale Anzahl von Spalten ist, die Sie erstellen können) kombiniert. x eine positive ganze Zahl sein, und der Wert von 1-12 sein.
Zum Beispiel, wenn Sie drei gleich breite Spalten, wobei jede Spalte ist ein class = "MS4", aber wenn man die erste Spalte größer als die beiden anderen wollen, kann die erste Spalte class = "span6" verwenden Die anderen beiden Spalten mit class = "span3".
Wie eine Zeile in einem festen Raster zu erstellen
Dann, bevor wir auf andere Beispiele bewegen, lassen Sie uns in einem festen Raster einen Blick Zeilen und Spalten von CSS-Regeln zu erstellen.
Zeilenklasse wie folgt
.row {
margin-left: -20px;
* Zoom: 1;
}
Einstellen des linken Rand zu einem negativen 20px, und setzen Sie "* Zoom: 1;". Hier "*" zeigt die Zoom-Attribut alle Elemente auf 1 gesetzt sind, zu beheben IE6 / 7 des Fehlers. Stellen Sie den Zoom-Eigenschaft auf 1, die eine interne Eigenschaft namens hasLayout zur Reparatur IE6 / 7 Viele Zoom / Rendering-Probleme einrichten.
.row: vor,
.row: nach {
display: table;
line-height: 0;
Inhalt: "";
}
Bootstrap den vorherigen CSS-Code mit der Zeile zu erstellen. Es verwendet ": vor" und ": Nach" CSS-Eigenschaft. Diese beiden Pseudo-Elemente. ": Vor" wird vor dem Zielelement in etwas verwendet ": Nach" verwendet wird, einige Inhalte nach dem Zielelement einzufügen. "Display: table," so dass die Elemente in tabellarischer Form dargestellt. Durch die Einstellung der "line-height: 0;", um sicherzustellen, dass jede Zeile Sie die Zeilenhöhe nicht besitzen, indem Sie den "Inhalt:" "", um sicherzustellen, dass der Inhalt nicht in die vorderen und hinteren Elemente eingeführt wird.
Dann nutzen Sie die folgenden Regeln für die linke und rechte Seite eines Elements, um sicherzustellen, ist nicht Element schwimmt.
.row: nach {
clear: both;
}
Wie eine Spalte in einem festen Raster zu erstellen
[Klasse * = "span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
Dies ist eine CSS-Regel zu verwenden. '[Klasse * = "span"]', um die Klasse Attributwerte für alle Elemente in der "Spanne" wählen begann. Verwenden Sie nun "float: left;" jede Spalte zu finden, die nebeneinander. Verwenden Sie "min-height: 1px" zu machen, werden alle Spalten haben eine Mindesthöhe von 1px, verwenden Sie die "margin-left: 20px;" stellen Sie den linken Rand auf 20px.
Verwenden Sie eine separate CSS-Regel die Spaltenbreite einzustellen. Genauer gesagt, wie unten in der Tabelle gezeigt
| CSS 代码 | 解释 |
|---|---|
.span12 {
width: 940px;
}
|
如果该行有一个单一的列，列宽为 940px。 |
.span11 {
width: 860px;
}
|
如果该行有一个由 11 列合并的列，列宽为 860px。 |
.span10 {
width: 780px;
}
|
如果该行有一个由 10 列合并的列，列宽为 780px。 |
.span9 {
width: 700px;
}
|
如果该行有一个由 9 列合并的列，列宽为 700px。 |
.span8 {
width: 620px;
}
|
如果该行有一个由 8 列合并的列，列宽为 620px。 |
.span7 {
width: 540px;
}
|
如果该行有一个由 7 列合并的列，列宽为 540px。 |
.span6 {
width: 460px;
}
|
如果该行有一个由 6 列合并的列，列宽为 460px。 |
.span5 {
width: 380px;
}
|
如果该行有一个由 5 列合并的列，列宽为 380px。 |
.span4 {
width: 300px;
}
|
如果该行有一个由 4 列合并的列，列宽为 300px。 |
.span3 {
width: 220px;
}
|
如果该行有一个由 3 列合并的列，列宽为 220px。 |
.span2 {
width: 140px;
}
|
如果该行有一个由 2 列合并的列，列宽为 140px。 |
.span1 {
width: 60px;
}
|
单个列宽为 60px。 |
Bootstrap Standard Grid-Instanz
Dieses Beispiel zeigt, wie eine Säule, zwei Spalten zu erstellen, sechs Spalten, 12 Spalten und vier Spalten (in dieser Reihenfolge).
Beachten Sie auch, dass alle Spalten, die durch "Container" Klasse sind umgeben geschaffen, "Container" ist ein festes Layout mit Bootstrap zu erstellen.
Beispiele
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> Bootstrap Rastersystem Beispiel - w3cschool Bootstrap Tutorial </ title>
<Meta name = "description" content = "Erstellen eines 16 Spalten Grid mit Bootstrap. Mit Beispielen lernen, ein Grid-System in Bootstrap zu schaffen.">
<Link href = "Bootstrap / css / bootstrap.min.css" rel = "stylesheet" media = "screen">
<Script src = "http://code.jquery.com/jquery.js"> </ script>
<Script src = "Bootstrap / js / bootstrap.min.js"> </ script>
<Style>
.span12 h1 {color: # FE6E4C; font-weight: bold; padding: 5px;}
h3 {margin: 10px 0 10px 0;}
</ Style>
</ Head>
<Body>
<Div class = "container">
<Div class = "Zeile">
<Div class = "span12">
<H1> w3cschool.cc ist ein Web-Design und Entwicklung Tutorial. </ H1>
</ Div>
</ Div>
<Div class = "Zeile">
<Div class = "span12">
<P> w3cschool bietet Web-Entwicklung Tutorials. Wir in Open Source glauben. Liebe-Standards. Und Einfachheit und Lesbarkeit zu priorisieren, während Inhalte dienen. Mit 3000+ einzigartigen Content-Seiten und Tausende von Beispielen, wir sind umfassend. Wir Online-Praxis-Redakteure haben um zu spielen mit den Beispiel-Codes. </ p>
</ Div>
</ Div>
<Div class = "Zeile">
<Div class = "span12">
<H3> Einige der Themen und mehr ...: </ h3>
</ Div>
<Div class = "Messspanne2">
<P> <img src = "images / html5_logo.png" width = "140" height = "86" alt = "html5 logo" /> </ p>
</ Div>
<Div class = "Messspanne2">
<P> <img src = "images / javascript-logo.png" width = "140" height = "86" alt = "javascript logo" /> </ p>
</ Div>
<Div class = "Messspanne2">
<P> <img src = "images / json.gif" width = "140" height = "86" alt = "JSON logo" /> </ p>
</ Div>
<Div class = "Messspanne2">
<P> <img src = "images / php.png" width = "140" height = "86" alt = "PHP logo" /> </ p>
</ Div>
<Div class = "Messspanne2">
<P> <img src = "images / mysql-logo.png" width = "140" height = "86" alt = "MySQL-Logo" /> </ p>
</ Div>
<Div class = "Messspanne2">
<P> <img src = "images / Browser-statistics.png" width = "140" height = "86" alt = "Browser Statistik logo" /> </ p>
</ Div>
</ Div>
<Div class = "Zeile">
<Div class = "span12">
<H3> Social-Networking-Sites zu teilen: </ h3>
</ Div>
</ Div>
<Div class = "Zeile">
<Div class = "MS1">
<P> <img src = "images / gplus.png" width = "50" height = "49" alt = "GPlus logo" /> </ p>
</ Div>
<Div class = "MS1">
<P> <img src = "images / twitter.png" width = "50" height = "38" alt = "Twitter-Logo" /> </ p>
</ Div>
<Div class = "MS1">
<P> <img src = "images / orkut.png" width = "50" height = "55" alt = "Orkut logo" /> </ p>
</ Div>
<Div class = "MS1">
<P> <img src = "images / ipad.png" width = "50" height = "53" alt = "iPad logo" /> </ p>
</ Div>
<Div class = "MS1">
<P> <img src = "images / digo.png" width = "50" height = "54" alt = "Digo logo" /> </ p>
</ Div>
<Div class = "MS1">
<P> <img src = "images / zapface.png" width = "51" height = "53" alt = "Zapface logo" /> </ p>
</ Div>
<Div class = "MS1">
<P> <img src = "images / facebook.png" width = "48" height = "53" alt = "facebook logo" /> </ p>
</ Div>
<Div class = "MS1">
<P> <img src = "images / netvibes.png" width = "51" height = "53" alt = "Netvibes logo" /> </ p>
</ Div>
<Div class = "MS1">
<P> <img src = "images / linkedin.png" width = "49" height = "54" alt = "LinkedIn logo" /> </ p>
</ Div>
<Div class = "MS1">
<P> <img src = "images / newsvine.png" width = "48" height = "53" alt = "Newsvine logo" /> </ p>
</ Div>
<Div class = "MS1">
<P> <img src = "images / blogger.png" width = "51" height = "53" alt = "Blogger-Logo" /> </ p>
</ Div>
<Div class = "MS1">
<P> <img src = "images / reditt.png" width = "48" height = "57" alt = "Reddit logo" /> </ p>
</ Div>
</ Div>
<Div class = "Zeile">
<Div class = "span3">
<H3> Fontend Entwicklung: </ h3>
<P> HTML4.0, XHTML1.0, CSS2.1, HTML5, CSS3, JavaScript </ p>
</ Div>
<Div class = "span3">
<H3> Backend developemt: </ h3>
<P> PHP, Ruby, Python, Java, ASP.NET, SCALA </ p>
</ Div>
<Div class = "span3">
<H3> Datenbankverwaltung: </ h3>
<P> SQL, MySQL PostgreSQL, NoSQL, MongoDB </ p>
</ Div>
<Div class = "span3">
<H3> APIs, Tools und Tipps: </ h3>
<P> Google Plus API, Twitter Bootstrap, JSON, Firebug, WebPNG </ p>
</ Div>
</ Div>
</ Div>
</ Body>
</ Html>
Hier ist, was Sie erstellen
View Online
Siehe Beispiel oben in einem anderen Browserfenster.
Bitte hier klicken , um alle der oben genannten Beispiele von HTML, CSS, JS und Bilddateien zum Download bereit .
In Reaktion auf die Standard-Raster
Wenn Sie möchten, auf die Standardraster Bootstrap-Reaktionsleistung, erst nach dem nativen CSS HTML-Datei hinzufügen hinzufügen
<meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
Um den Standard - Raster mit reaktions anzuzeigen, klicken Sie hier um die Online - Demo zu sehen . Klicken Sie hier , um den Code zu downloaden .
Standard Grid-System spielt die Antwort gibt es zwei Bedingungen. Wenn das Ansichtsfenster (Mesh-Rendering von freiem Speicherplatz) größer ist als 1200px [via @ media (min-width: 1200px) erhalten], wenn das Ansichtsfenster größer als 768px, aber weniger als 979px [via @ media (min-width: 768px) und ( max-width: 979px) Einstellungen].
Offset Spalten: Standardraster
Durch die Verwendung der Offset kann die rechte Seite der Säule in seine ursprüngliche Position zu bewegen. Dies wird durch das Hinzufügen einer Spalte zu der linken Rand getan zu erzielen. Durch Bootstrap, können Sie die "OffsetX" verwenden (wobei der Wert von x ist eine positive ganze Zahl) Klasse und der Klasse "spany" (wobei der Wert von y eine positive ganze Zahl ist). Hängt 'offestx' 'x' ist der Wert der zugehörigen mobilen Spalte 'x' Spaltenbreite nach rechts.
Die Breite des Versatzes wird in dem Bootstrap CSS definiert. Offset12 oben linken Rand ist 980px, der minimale Abstand gelassen wird offset1 100px.
Da das System Standard-Raster auf dem Pixel-basiert, wenn die Anwendung verschoben wird, müssen Sie wissen, dass Sie ein Offset-Pixel und Pixelspalten verwenden wollen, verwendet werden. Sowohl die Anzahl der Pixel addiert müssen nicht Ihr Niveau Ansichtsfenster nicht überschreiten.
In dem folgenden Beispiel wird eine zweispaltige grid erstellen. Unter ihnen, bewegen wir uns nach rechts, so dass die linke Spalte vier Spalten. HTML-Code wie folgt:
Beispiele
<Div class = "Zeile">
<Div class = "MS4 OFFSET4">
<P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum an, laoreet mattis, massa. Sed eleifend nonummy Durchm. Nullam mauris ante, elementum et, bibendum an, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. aliquam vehicula mi bei mauris. Maecenas placerat, nisl bei consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus . Morbi magna magna, ein tincidunt, mattis nicht, imperdiet vitae, tellus. Sed odio est auctor ac, sollicitudin vitae in, consequat, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. </ p>
</ Div>
<Div class = "span3">
<P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum an, laoreet mattis, massa. Sed eleifend nonummy Durchm. Nullam mauris ante, elementum et, bibendum an, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. aliquam vehicula mi bei mauris. Maecenas placerat, nisl bei consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus . Morbi magna magna, ein tincidunt, mattis nicht, imperdiet vitae, tellus. Sed odio est auctor ac, sollicitudin vitae in, consequat, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. </ p>
</ Div>
</ Div>
</ Div>
Klicken Sie hier , um die Online - Demo zu sehen Klicken Sie hier , um den Code zu downloaden .
Sie können in der ursprünglichen CSS ansprechbar CSS hinzufügen, können Sie auch durch die Verwendung einer Spalte versetzt werden, um die Standardantwort Raster hinzuzufügen.
Verschachtelte Spalten: Standardraster
Bootstrap mit dem Standardraster kann die Spalte geschachtelt werden. Sie müssen lediglich eine Zeile in der Spalte zu erstellen, und die Anzahl der Spalten wollen Sie verschachtelte Zeile zu erstellen. Zur gleichen Zeit, müssen Sie daran denken, dass die Gesamtzahl der Spalten für verschachtelte Spalte andere Spalten, um sicherzustellen, dass nicht mehr als die Anzahl der Spalten, wenn Sie eine übergeordnete Spalte erwähnt erstellen.
Das folgende Beispiel zeigt, wie Bootstrap in den Standardspalten im Raster Nest.
Beispiele
<Div class = "Zeile">
<Div class = "span7">
<Div class = "Zeile">
<Div class = "MS4">
<P> Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor Cursus, neque mi consectetuer mi, ein ultricies massa est sed nisl. Klasse aptent Taciti sociosqu ad litora torquent pro conubia nostra, pro inceptos hymenaeos. Proin nulla arcu, nonummy luctus, Diktum eget, fermentum et, lorem. Nunc porta convallis pede. </ p>
</ Div>
<Div class = "span3">
<P> Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor Cursus, neque mi consectetuer mi, ein ultricies massa est sed nisl. Klasse aptent Taciti sociosqu ad litora torquent pro conubia nostra, pro inceptos hymenaeos. Proin nulla arcu, nonummy luctus, Diktum eget, fermentum et, lorem. Nunc porta convallis pede. </ p>
</ Div>
</ Div>
</ Div>
<Div class = "span5">
<P> Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor Cursus, neque mi consectetuer mi, ein ultricies massa est sed nisl. Klasse aptent Taciti sociosqu ad litora torquent pro conubia nostra, pro inceptos hymenaeos. Proin nulla arcu, nonummy luctus, Diktum eget, fermentum et, lorem. Nunc porta convallis pede. </ p>
</ Div>
</ Div>
</ Div>
Klicken Sie hier , um die Online - Demo zu sehen Klicken Sie hier , um den Code zu downloaden .
In dem obigen Beispiel hat die Linie im Container zwei Spalten als "class =" span7 "" und "class =" span5 " 'definiert wurden. Einen insgesamt 12 Spalten. Nun fügen wir eine Zeile in der linken Spalte, dann zwei Spalten zu erstellen, die als "class =" MS4 " 'definiert sind und" class = "span3"'. Daher ihren Bestimmungen Mutterkolonne (3 + 4 = 7) die Gesamtzahl der Spalten in dem zu entsprechen.
Sie können auch hier die Reaktionsleistung hinzuzufügen.
Schlussfolgerung
In diesem Tutorial haben wir die Standard-Bootstrap Grid-System diskutiert. Dieses Tutorial basiert auf Bootstrap V2.3.2. Im Folgenden ist eine Zusammenfassung der wichtigsten Punkte zu diesem Tutorial im Zusammenhang mit:
- Bootstrap Grid-System Standard ist 940px breit und mit 12 Spalten.
- Im Raster Reihe von "class =" Zeile " 'Erstellen Sie eine Spalte von" class = "spanx"' erstellen, wobei x eine positive ganze Zahl ist. X Summe aller Spalten darf nicht 12 nicht überschreiten.
- Durch das Hinzufügen der Responsive CSS Bootstrap, können Sie eine Antwort auf die Standard-Raster hinzuzufügen.
- Offset verwenden, um zusätzlichen Platz zu den Spalten erstellen. Durch die Verwendung der "class =" OffsetX " ', wobei x eine positive ganze Zahl ist. Wenn Sie einen Offset, die Gesamtzahl der Spalten verwenden, enthält die Nummer ein für Offset nicht mehr als 11.
- Spalten können verschachtelt werden. Wenn Sie eine verschachtelte Spalte, wenn die Gesamtzahl der Rechengitter (Container Linie) in einer Spalte verschachtelt Spalte enthalten sein sollten.
- Sie können auch verschachtelte Spalte Offset verwenden.