Bootstrap Grund教程

Bootstrap Plugins

Bootstrap Grid System Example: Mobile, Tablet, Desktop Bootstrap Grid System Example: Stacked Horizontal

Bootstrap Gitterstrukturbeispiel: Mittel- und Großgeräte

in Beispiel: gestapelt horizontale In diesem Abschnitt haben wir die grundlegende Gitterstruktur betrachtet. Hier verwenden wir 2 div und positionieren Sie sie in der Mitte der Ansichtsbreite 50%/50%　Teilung:

<div>....</div>
<div>....</div>

Aber auf großen Geräten sollten Sie letztendlich 33%/66%。Also müssen wir sicherstellen, dass wir die Breite der Spalten an den Brüchen ändern:

<div>....</div>
<div>....</div>

jetzt Bootstrap in mittleren Geräten sucht nach Klassen mit md der Klasse und verwenden Sie sie. In großen Geräten wird nach Klassen mit lg der Klasse und verwenden Sie sie. In diesem Beispiel verwenden wir 2 div werden von 50%/50%　Teilung in 33%/66%。Bitte schauen Sie sich die folgenden Beispiele an, um zu überprüfen. (Hier wurde für jede Spalte separately ein Stil definiert, was Sie vermeiden könnten.)

Online-Beispiel

Beispiel

!DOCTYPE　html>
<html>
<head>
　　　<title>Bootstrap　Beispiel　-　Mittel- und Großgeräte</title>
　　　<link　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"　rel="stylesheet">
　　　<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>Hello, world!</h1>
　　　<div class="row">
　　　　　　<div class="col-md-6　col-lg-4" style="Hintergrund-Farbe: #dedef8;　
　　　　　　　　　box-Schatten: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
　　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do　
　　　　　　　　　　　　eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut　
　　　　　　　　　　　　enim ad minim veniam, quis nostrud exercitation ullamco laboris　
　　　　　　　　　　　　nisi ut aliquip ex ea commodo consequat.　
　　　　　　　　　</p>
　　　　　　　　　Sed ut perspiciatis unde omnis iste error sit voluptatem　
　　　　　　　　　　　　accusantium doloremque laudantium, totam rem aperiam, eaque ipsa　
　　　　　　　　　　　　quae ab illo inventore veritatis et quasi architecto beatae vitae　
　　　　　　　　　　　　dicta sunt explicabo.　
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="col-md-6　col-lg-8" style="Hintergrund-Farbe: #dedef8;Box-Schatten: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444">
　　　　　　　　　Sed ut perspiciatis unde omnis iste error sit voluptatem　
　　　　　　　　　　　　accusantium doloremque laudantium.
　　　　　　　　　</p>
　　　　　　　　　Niemand ist, der Leid für Leid selbst liebt, um Schmerz zu sein,　
　　　　　　　　　　　　consectetur, adipisci velit, sed quia non numquam eius Modi　
　　　　　　　　　　　　tempora incidunt ut labore et dolore magnam aliquam quaerat　
　　　　　　　　　　　　voluptatem.　
　　　　　　　　　</p>
　　　	</div>
　　</div>
</div>
</body>
</html>

Test It Out ‹/›

The results are as follows:

Bootstrap Grid System Example: Mobile, Tablet, Desktop Bootstrap Grid System Example: Stacked Horizontal