Bootstrap4 Grund教程

Bootstrap4 Anleitung

Bootstrap ist die weltweit beliebteste Bibliothek für Frontend-Komponenten und wird zur Entwicklung von responsiven Layouts und mobilen Web-Projekten bevorzugt verwendet.

Bootstrap4 Dies ist die neueste Version von Bootstrap， eine Sammlung von Open-Source-Werkzeugen für die Entwicklung von HTML、CSS und JS. Mit den von uns bereitgestellten Sass-Variablen, einer großen Anzahl von Mixins, einem responsiven Rastersystem, erweiterbaren vorgefertigten Komponenten und einem leistungsstarken Plugin-System basierend auf jQuery können Sie schnell Prototypen entwickeln oder entire Apps aufbauen.

谁适合阅读本教程？

Wenn Sie die Grundkenntnisse von HTML und CSS haben， können Sie dieses Tutorial lesen und Ihre eigene Website entwickeln. Nachdem Sie dieses Tutorial beendet haben， können Sie ein mittleres Niveau erreichen, um mit Bootstrap Web-Projekte zu entwickeln.

在阅读本教程前，您需要了解的知识：

Bevor Sie mit diesem教程 beginnen， müssen Sie die Grundkenntnisse von HTML、CSS und JavaScript haben. Wenn Sie diese Konzepte noch nicht verstehen， empfehlen wir Ihnen, zuerst unsere folgenden Tutorials zu lesen:

Bootstrap4 示例

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap4　实例/title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
　　<h1>Meine erste Bootstrap-Seite</h1>
　　<p>Vergrößern Sie den Browser, um die Wirkung zu sehen!</p>/p>　
</div>
　
<div class="container">
　　<div class="row">
　　　　<div class="col-sm-4">
　　　　　　<h3>Erste Spalte</h3>
　　　　　　<p>基础教程</p>/p>
　　　　　　<p>学好基础，才能走得更高！！！</p>/p>
　　　　</div>
　　　　<div class="col-sm-4">
　　　　　　<h3>Zweite Spalte</h3>
　　　　　　<p>基础教程...</p>/p>
　　　　　　<p>学好基础，才能走得更高！！！</p>/p>
　　　　</div>
　　　　<div class="col-sm-4">
　　　　　　<h3>Dritter Spalte</h3>　
　　　　　　<p>基础教程...</p>/p>
　　　　　　<p>学好基础，才能走得更高！！！</p>/p>
　　　　</div>
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Bootstrap4 　und Bootstrap3

Bootstrap4 ist die neueste Version von Bootstrap, die mit Bootstrap3 im Vergleich zu mehr spezifischen Klassen und einige Teile in relevante Komponenten umgewandelt. Gleichzeitig wurde der Umfang von Bootstrap.min.css reduziert4über 0%.

Bootstrap4 hat das Unterstützung für IE8 und iOS 6 unterstützt, unterstützt jetzt nur IE9 und iOS 7 die obigen Browser-Versionen. Wenn Sie frühere Browser verwenden müssen, dann verwenden Sie Bootstrap3.

Hinweis: Standardmäßig, Bootstrap 4wird die mobile-first Methode zur Reaktion verwenden. Bootstrap 4.3ist die neueste und stabilste Version von Bootstrap. Alle主要的 modernen Browser unterstützen Bootstrap 4z.B. Google Chrome, Firefox, Safari, Internet Explorer 10und höheren Versionen etc.