Bootstrap 5-Grundlagen
- Vorherige Seite BS5-Tutorial
- Nächste Seite BS5-Container
Was ist Bootstrap?
- Bootstrap ist ein kostenloser Frontend-Framework, das für schnelleres und einfacheres Web-Entwicklung entwickelt wurde
- Bootstrap enthält Designvorlagen basierend auf HTML und CSS, die für die Formatierung, Formulare, Buttons, Tabellen, Navigation, Modale, Bildergalerien und mehr verwendet werden
- Bootstrap bietet eine Vielzahl von JavaScript-Plugins
- Bootstrap ermöglicht es Ihnen, Responsive Designs leicht zu erstellen
Was ist Responsive Webdesign?
Responsive Webdesign zielt darauf ab, Websites zu erstellen, die sich automatisch anpassen, um die Benutzererfahrung auf allen Geräten zu verbessern, egal ob auf Smartphones oder großen Desktop-Computern.
Bootstrap 5 Beispiel
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>Meine erste Bootstrap-Seite</h1>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>列 1：春日</h3>
<p>胜日寻芳泗水滨，无边光景一时新。</p>
<p>等闲识得东风面，万紫千红总是春。</p>
</div>
<div class="col-sm-4">
<h3>列 2：初夏绝句</h3>
<p>纷纷红紫已成尘，布谷声中夏令新。</p>
<p>夹路桑麻行不尽，始知身是太平人。</p>
</div>
<div class="col-sm-4">
<h3>列 3：山行</h3>
<p>远上寒山石径斜，白云生处有人家。</p>
<p>停车坐爱枫林晚，霜叶红于二月花。</p>
</div>
</div>
</div>
Bootstrap 版本
Bootstrap 5（2021 年发布）是 Bootstrap 的最新版本（2013 年发布）；使用新组件、更快的样式表，提供更快的响应能力。
Bootstrap 5 支持所有主要浏览器和平台的最新的稳定版本。但是，不支持 Internet Explorer 11 及更早的版本。
Bootstrap 5 和 Bootstrap 3 & 4 的主要区别在于 Bootstrap 5 已经切换到 Vanilla JavaScript 而不是 jQuery。
注释：其团队仍然支持 Bootstrap 3 和 Bootstrap 4 的关键错误修复和文档更改，继续使用它们是完全安全的。但是不会向其中添加任何新特性。
为什么要使用 Bootstrap？
Bootstrap 的优点：
- 易于使用：任何对 HTML 和 CSS 有基本了解的人都可以马上开始使用 Bootstrap
- 响应式特性：Bootstrap 的响应式 CSS 可针对手机、平板电脑和台式机进行调整
- 移动优先的方法：在 Bootstrap 中，移动优先样式是其核心框架的一部分
- 浏览器兼容性：Bootstrap 5 与所有现代浏览器兼容（Chrome、Firefox、Edge、Safari 和 Opera）。
注意：如果您需要支持 IE11 及以下版本，则必须使用 BS4 或 BS3。
从哪里获得 Bootstrap 5？
有两种方法可以在您自己的网站上使用 Bootstrap 5。
您可以：
- enthält Bootstrap 5 von CDN
- Bootstrap 5 von getbootstrap.com herunterladen
Bootstrap 5 CDN
Wenn Sie Bootstrap 5 nicht selbst herunterladen und hosten möchten, können Sie es von einem CDN (Content Delivery Network) referenzieren.
CodeW3C.com bietet CDN-Unterstützung für das CSS und JavaScript von Bootstrap an:
MaxCDN:
<!-- Neueste kompilierte und komprimierte CSS --> <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet"> <!-- Neueste kompilierte JavaScript --> <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
Eines der Vorteile der Verwendung von Bootstrap 5 CDN:
Viele Benutzer haben Bootstrap 5 bereits von jsDelivr heruntergeladen, als sie eine andere Website besucht haben. Daher wird es von Ihrem Cache geladen, was die Ladezeit verkürzt. Außerdem stellen die meisten CDN sicher, dass eine Datei, die von einem Benutzer angefordert wird, von einem Server bereitgestellt wird, der am nächsten liegt, was ebenfalls eine schnellere Ladezeit verursacht.
JavaScript?
Bootstrap 5 verwendet JavaScript für verschiedene Komponenten (wie Modale, Tooltips, Pop-ups usw.). Wenn Sie jedoch nur den CSS-Teil von Bootstrap verwenden, benötigen Sie sie nicht.
Bootstrap 5 herunterladen
Wenn Sie Bootstrap 5 selbst herunterladen und hosten möchten, besuchen Sie https://getbootstrap.com/und dann befolgen Sie die Anweisungen dort.
Erstellen Sie Ihre erste Webseite mit Bootstrap 5
1. Fügen Sie den HTML5 Dokumenttyp hinzu
Bootstrap 5 verwendet HTML-Elemente und CSS-Attribute, die das HTML5 Document Type benötigen.
Fügen Sie immer das HTML5 Document Type im Anfang der Seite sowie das lang-Attribut und die korrekte Überschrift und Zeichensatz hinzu:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Beispiel</title>
<meta charset="utf-8">
</head>
</html>
2. Mobile First in Bootstrap 5
Das Designziel von Bootstrap 5 ist die Anpassung an mobile Geräte. Mobile First-Styles sind ein integraler Bestandteil des Frameworks.
Um eine korrekte Wiedergabe und Zoomsteuerung zu gewährleisten, geben Sie in <head> Fügen Sie im Element Folgendes hinzu <meta> Schlüsselwort:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width Setzt die Breite der Seite, um die Breite des Bildschirms des Geräts zu folgen (was von Gerät zu Gerät unterschiedlich sein kann).
initial-scale=1 Setzt die Initialskalierung für das erste Laden der Seite durch den Browser.
3. Container
Bootstrap 5 benötigt ein Element zum Umwickeln des Seiteninhalts.
Es gibt zwei Container-Klassen zur Auswahl:
.containerDie Klasse bietet einen responsiven festen Breitencontainer.container-fluidDie Klasse bietet einen Breitencontainer, der die gesamte Breite des Ansichtsfensters überspannt
Zwei grundlegende Bootstrap 5-Seiten
Container Beispiel
Nachfolgend wird der Code für eine grundlegende Bootstrap 5-Seite (mit responsivem festem Breitencontainer) gezeigt:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap-Beispiel</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet"> <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script> </head> <body> <div class="container"> <h1>Meine erste Bootstrap-Seite</h1> <p>Dieser Abschnitt befindet sich in der .container-Klasse.</p> <p>.container-Klasse bietet einen responsiven festen Breitencontainer.</p> </div> </body> </html>
Container Fluid Beispiel
Nachfolgend wird der Code für eine grundlegende Bootstrap 5-Seite (mit Breitencontainer) gezeigt:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap-Beispiel</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet"> <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script> </head> <body> <div class="container-fluid"> <h1>Meine erste Bootstrap-Seite</h1> <p>Dieser Abschnitt befindet sich in der .container-fluid-Klasse.</p> <p>.container-fluid-Klasse bietet einen Breitencontainer, der die gesamte Breite des Ansichtsfensters überspannt.</p> </div> </body> </html>
- Vorherige Seite BS5-Tutorial
- Nächste Seite BS5-Container
