Ich bin neu im Bootstrap und habe Beispiele für die Verwendung von Karten und Containern gefunden, die andere Elemente enthalten. Könnte jemand bitte den Unterschied erklären und wann er sie benutzen?Bootstrap - Karte gegen Container
Zwei sehr unterschiedliche Dinge von allen Aspekten.
1) Container, verweise ich es vor allem auf die „Container“ auf der Seite, so wie jede Seite beginnen Erstellen Sie so etwas wie dieses
<html>
<head></head>
<body>
<div class="container"></div>
</body>
</html>
2), während Karten: nice Komponente , verwendet, um einige vordefinierte Layouts/Struktur haben und vor allem als Miniaturbild, Akkordeons, Registerkarten, Benachrichtigungen, Informationsbox, Galerien und ich auch
<html>
<head></head>
<body>
<div class="container">
<div class="cards">
<!-- card header -->
<!-- card body -->
</div>
</div>
</body>
</html>
Eine Karte ist ein flexibler und erweiterbarer Inhaltscontainer. Es enthält Optionen für Kopf- und Fußzeilen, eine große Auswahl an Inhalten, kontextabhängige Hintergrundfarben und leistungsstarke Anzeigeoptionen. zum Beispiel:
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
prüfen Here für weitere Informationen.
Während für Container, Bootstrap erfordert ein containing-Element, um Website-Inhalte und Haus unser Grid-System zu umhüllen. Sie können einen von zwei Containern für Ihre Projekte auswählen. Beachten Sie, dass aufgrund von Auffüllung und mehr kein Container verschachtelt werden kann. Verwenden Sie .container für einen reaktionsfähigen Behälter mit fester Breite.
<div class="container">
...
</div>
Verwenden .container-fluid für einen Container voller Breite, die gesamte Breite des Ansichtsfensters hinweg.
<div class="container-fluid">
...
</div>
Überprüfen Sie here für weitere Informationen. Hoffe, dass dies hilfreich ist
Meine Antwort für Boxen verwendet, in sagen kann, wird erklären der Unterschied zwischen Karten und Behältern.
Container
Container sind eine der wichtigsten und grundlegenden Bootstrap-Komponenten. Sie verwenden Container mit ihren Gegenstücken, Zeilen, um grundlegende oder komplexe Inhaltsausrichtungen in Gittern zu erstellen. Container sind für ein Website-Layout. Documentation.
<div class='container'>
Karten
Karten, hinzugefügt in Bootstrap v4, definieren einen Weg, um Inhalte anzuzeigen. Versuchen Sie, Container als Inhaltsausrichtung und Karten als Inhaltsstruktur und Design zu visualisieren. Documentation.
<div class='card'>
Obwohl Karten im Grunde genommen Container sind, mit etwas mehr Stil, haben beide völlig unterschiedliche Absichten.