Bootstrap-Basisanleitung

Bootstrap-Plugins

Bootstrap Grid System Example: Medium and Large Devices

Bootstrap-Grid-System-Beispiel: Mobiltelefon, Tablet-PC, Schreibtisch-PC

Wir haben bereits gesehen Mittel- und große Geräte ．Jetzt sehen wir uns ein anderes Beispiel an, das ebenfalls für kleine Handys geeignet sein soll. Wir teilen die Spalten des Tablets in 25%/75%，dann fügen wir die folgenden Optionen hinzu:

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

Jetzt bietet es uns 3 Es gibt verschiedene Spaltenlayout, die für drei verschiedene Geräte geeignet sind. Auf dem Handy wird es links 25% rechts 75% des Layouts. Auf Tablets wird es 50%/50% des Layouts. Auf großen Bildschirmen wird es 33%/66% der Layout. Bitte überprüfen Sie die folgenden Beispiele zur Bestätigung. (Hier wurde für jede Spalte eine Stil definiert, was Sie vermeiden können.)

Online-Beispiel

Beispiel

!DOCTYPE　html>
<html>
<head>
　　　<title>Bootstrap　Beispiel　-　Mobiltelefon, Tablet-PC, Schreibtisch-PC</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>Hallo, Welt!</h1>
　　　<div class="row">
　　　　　　<div class="col-sm-3　col-md-6　col-lg-8"　　
　　　　　　　　　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 natus 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-sm-9　col-md-6　col-lg-4"　
　　　　　　　　　style="Hintergrund-Farbe: #dedef8;
　　　　　　　　　Box-Schatten: inset　1px　-1px　1px #444,　
　　　　　　　　　inset　-1px　1px　1px #444">
　　　　　　　　　Sed ut perspiciatis unde omnis iste natus error sit voluptatem　
　　　　　　　　　　　　accusantium doloremque laudantium.
　　　　　　　　　</p>
　　　　　　　　　Niemand ist, der Leid, das er selbst als Leid empfindet, fürchten kann,　
　　　　　　　　　　　　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: Medium and Large Devices