Bootstrap ist eines der beliebtesten Frameworks für die Webentwicklung, mit dem Sie moderne und ansprechende Websites erstellen können. Es bietet eine Vielzahl von Werkzeugen und Komponenten, die das Layout und das Hinzufügen von Funktionen erheblich vereinfachen.
Eine solche Komponente ist die Galerie. Eine Galerie ist ein Block, in dem Sie mehrere Fotos oder Bilder platzieren, sie als Miniaturansichten anzeigen und in voller Größe anzeigen können.
In diesem Artikel werden wir uns ansehen, wie Sie eine Galerie mit Bootstrap erstellen. Wir werden lernen, Bilder hinzuzufügen, Miniaturansichten zu erstellen und die Vorschau in voller Größe anzupassen. Lesen Sie weiter, um detaillierte Anweisungen zu erhalten.
Arbeitsvorbereitung
Bevor Sie mit dem Erstellen einer Galerie mit Bootstrap beginnen, müssen Sie einige Schritte ausführen, um sich auf die Arbeit vorzubereiten:
1. Bootstrap-Verbindung:
Laden Sie die Bootstrap-Dateien herunter und verbinden Sie sie mit Ihrem Projekt. Sie können zwischen dem Herunterladen von Dateien von der offiziellen Bootstrap-Website oder der Verwendung von Links zum CDN (Content Delivery Network) wählen.
Fügen Sie den folgenden Code vor dem schließenden Tag ein :
Und auch der folgende Code vor dem schließenden Tag :
Ersetzen Sie "Dateipfad zu_bootstrap" durch "Dateipfad zu_bootstrap".css" und "Pfad der datei_bootstrap.js" auf dem tatsächlichen Pfad zu Ihren Bootstrap-Dateien.
2. Erstellen einer HTML-Struktur:
Legen Sie fest, wo sich die Galerie befinden soll, und erstellen Sie eine entsprechende HTML-Struktur.
Erstellen Sie einen Container, indem Sie ihn mit der Klasse "container" oder "container-fluid" bezeichnen. Erstellen Sie innerhalb des Containers Elemente, um die Bilder in der Galerie anzuzeigen.
3. Vorbereiten von Bildern:
Wählen Sie die Bilder aus, die Sie in der Galerie anzeigen möchten. Dies ist normalerweise eine Gruppe von Bildern mit einem gemeinsamen Thema oder verwandten Bildern.
Speichern Sie alle Bilder in einem Ordner oder Verzeichnis auf Ihrem Server. Stellen Sie sicher, dass die Bildpfade in der HTML-Struktur Ihrer Galerie korrekt angegeben sind.
Bei Bedarf können Sie die Bilder mit Bildbearbeitungsprogrammen bearbeiten, damit sie in der Galerie am besten aussehen.
Laden der Bootstrap-Bibliothek
Um eine stilvolle und adaptive Galerie zu erstellen, verwenden wir die Bootstrap-Bibliothek. Um loszulegen, müssen Sie diese Bibliothek herunterladen und mit Ihrem Projekt verbinden.
Es gibt mehrere Möglichkeiten, Bootstrap zu laden:
| Art | Die Beschreibung |
|---|---|
| Download von der offiziellen Website | Besuchen Sie die offizielle Bootstrap-Website (https://getbootstrap.com /), suchen Sie den Abschnitt "Bootstrap CDN" und kopieren Sie den Link zur gewünschten Version. Fügen Sie diesen Link in das Tag Ihrer HTML-Seite ein. |
| Aus einer lokalen Datei herunterladen | Laden Sie das Bootstrap-Archiv von der offiziellen Website herunter. Entpacken Sie es und kopieren Sie die Bootstrap-Dateien.min.css und Bootstrap.min.js in Ihr Projekt. Dann fügen Sie diese Dateien in Tags und entsprechend ein. |
| Verwenden des Paketmanagers | Wenn Sie einen Batch-Manager wie npm oder yarn verwenden, können Sie Bootstrap installieren, indem Sie den entsprechenden Befehl ausführen. Zum Beispiel: npm install bootstrap . Danach können Sie Bootstrap verbinden, indem Sie den Pfad zum installierten Paket im Tag oder angeben. |
Nachdem Sie die Bootstrap-Bibliothek erfolgreich heruntergeladen haben, können Sie mit dem Erstellen einer Galerie mit Bootstrap beginnen.
HTML-Markup erstellen
Bevor wir mit dem Erstellen einer Galerie mit Bootstrap beginnen, benötigen wir einen grundlegenden HTML-Code, um die grafischen Elemente zu platzieren. Hier ist ein Beispiel für einfaches HTML-Markup für eine Galerie:
Описание изображения 1
Краткое описание или дополнительная информация о изображении 1
Описание изображения 2
Краткое описание или дополнительная информация о изображении 2
Описание изображения 3
Краткое описание или дополнительная информация о изображении 3
In diesem Beispiel verwenden wir einen Bootstrap-Container mit den Standardklassen "container" und "row", um sicherzustellen, dass unsere Bilder in der Galerie gleichmäßig platziert sind. Wir verwenden dann die Klassen "col-md-4", um jedes Bild in einer separaten Spalte mit einer Breite von einem Drittel der gesamten Breite des Containers auf Geräten mit einer Breite von mindestens 768 Pixeln (wie Tablets und Desktops) zu positionieren. Wir fügen jedem Bild auch eine Klasse "img-thumbnail" hinzu, damit sie wie Miniaturansichten mit einem Rahmen aussehen.
Für jedes Bild fügen wir außerdem einen Absatz mit dem Tag "p" und der Klasse "strong" für den Titel mit der Beschreibung des Bildes und der Klasse "em" für weitere Informationen hinzu. Sie können den Text innerhalb dieser Tags bearbeiten, um für jedes Bild eigene Titel und Beschreibungen anzugeben.
Seitenstruktur
Um eine Galerie mit Bootstrap zu erstellen, müssen Sie die Seitenstruktur korrekt organisieren. Im Folgenden finden Sie die grundlegende Struktur, die Sie verwenden möchten:
| Name des Fotos | Name des Fotos | Name des Fotos |
| Name des Fotos | Name des Fotos | Name des Fotos |
| Name des Fotos | Name des Fotos | Name des Fotos |
Wenn Sie weitere Fotos hinzufügen möchten, fügen Sie einfach der Tabelle Zeilen und Spalten hinzu. Jede Zelle in der Tabelle enthält den Namen des Fotos.
Der nächste Schritt besteht darin, Bilder hinzuzufügen und ihr Aussehen mit Bootstrap anzupassen.
Hinzufügen von Bildern zur Galerie
Befolgen Sie einige Schritte, um der Galerie Bilder hinzuzufügen:
- Erstellen Sie einen Ordner auf dem Server, in dem die Bilder für die Galerie gespeichert werden.
- Kopieren Sie alle Bilder, die Sie der Galerie hinzufügen möchten, in diesen Ordner.
- Öffnen Sie die HTML-Datei Ihrer Galerie mit einem Texteditor.
- Suchen Sie nach dem Tag, das die Liste der Bilder enthält. Dies ist normalerweise ein Tag
- .
- Innerhalb des Tags
- tags hinzufügen
- für jedes Bild.
- Innerhalb des Tags
- fügen Sie Code hinzu, um das Bild anzuzeigen. Verwenden Sie beispielsweise ein Tag und geben Sie den Pfad zum Bild im src-Attribut an.
- Wiederholen Sie die Schritte 5 und 6 für jedes Bild, das Sie der Galerie hinzufügen möchten.
Nachdem Sie diese Schritte abgeschlossen haben, sollten alle hinzugefügten Bilder in Ihrer Galerie angezeigt werden. Sie können auch zusätzliche Stile oder Effekte hinzufügen, um das Erscheinungsbild der Galerie mit Bootstrap zu verbessern.
