Bootstrap ist eines der beliebtesten Frameworks für die Entwicklung von Websites. Es bietet viele praktische Tools und Komponenten, die den Prozess der Erstellung von Webschnittstellen erheblich vereinfachen. In diesem Artikel zeigen wir Ihnen, wie Sie mit Bootstrap einen Avatar mit einem Namen erstellen können.
Ein Avatar ist ein Bild oder ein Symbol, das einen Benutzer im System darstellt. Sie kann zum Erstellen eines personalisierten Profils oder zum Anzeigen von Benutzerinformationen nützlich sein. Normalerweise besteht ein Avatar aus einem Bild und einem Benutzernamen.
Bootstrap bietet verschiedene Möglichkeiten, einen Avatar mit einem Namen zu erstellen. In diesem Artikel zeigen wir Ihnen die einfachste und effektivste Methode. Wir werden die Bootstrap-Komponenten verwenden, um ein rundes Bild zu erstellen und den Benutzernamen darunter zu platzieren.
Vorbereiten der Umgebung
Um einen Avatar mit einem Namen in Bootstrap zu erstellen, benötigen wir Folgendes:
- Laden Sie Bootstrap herunter und installieren Sie es auf Ihrem Computer oder verwenden Sie einen Link zu seinen Dateien vom Server;
- Bootstrap-Dateien mit einem Tag in ein HTML-Dokument einbinden ;
- Fügen Sie eine Stildatei hinzu, in der unsere Stile für den Avatar definiert werden;
- Einen Container erstellen, in dem ein Avatar mit dem Namen angezeigt wird;
- Ein Bild für den Avatar hinzufügen und ihm die Bootstrap-Klassen für das Styling zuweisen;
- Fügen Sie ein Element mit dem Benutzernamen hinzu und wenden Sie die gewünschten Stile auf den Text an;
Nach all diesen Schritten erhalten wir einen stilvollen und anpassungsfähigen Avatar mit dem Namen in Bootstrap.
Erstellen einer Komponente
Zuerst erstellen wir einen Container mit einer Klasse media, in dem wir ein Bild des Avatars platzieren:
Danach fügen wir ein Element hinzu media-body so zeigen Sie den Benutzernamen an:
Имя пользователя
Дополнительная информация о пользователе
Der Avatar mit dem Benutzernamen ist jetzt für die Verwendung in Ihrem Projekt bereit.
Sie können diese Komponente auch ändern, indem Sie zusätzliche Bootstrap-Klassen hinzufügen, um das Aussehen zu ändern (z. B., rounded zum Abrunden eines Avatars oder bg-primary um die Hintergrundfarbe zu ändern).
Stilisieren einer Komponente
Wenn Sie beispielsweise eine Namensüberschrift unter einem Avatar hinzufügen möchten, können Sie eine Klasse verwenden h5. Hier ist ein Beispielcode:
Имя пользователя
In diesem Beispiel wird die Klasse verwendet avatar um die gesamte Komponente zu umhüllen, Klasse rounded-circle zum Abrunden des Avatars, Klasse mt-3 um einen Einzug oben hinzuzufügen.
Sie können Klassen verwenden, um die Hintergrund- oder Textfarbe anzupassen, z. B. bg-primary, text-white und andere. Zum Beispiel:
Имя пользователя
Die Verwendung von CSS-Klassen in Bootstrap macht es daher einfach, das Aussehen der Avatar-Komponente mit dem Namen anzupassen.
Einen Benutzernamen hinzufügen
Um einem Avatar einen Benutzernamen hinzuzufügen, können Sie das Element verwenden und ihm die Klasse avatar-name zuweisen. Sie können den Benutzernamen mithilfe einer Variablen oder Daten aus der Datenbank in dieses Element einfügen.
Имя пользователяIn diesem Beispiel haben wir ein Element mit der avatar-name-Klasse hinzugefügt, das den Benutzernamen enthält. Fügen Sie dem Element die gewünschten Stile hinzu .avatar-name in Ihrem Stylesheet.
Jetzt haben Sie einen Avatar mit einem Benutzernamen!
