Wie macht man Brotkrumen ansprechend?

Sie müssen das selbst programmieren. Ohne Ihren spezifischen Code wird niemand in der Lage sein, Ihnen spezifische Antworten zu geben. Davon abgesehen, hier ist, wie ich eingerichtet werden würde, um benutzerdefinierten Code zu meiner Bootstrap-Website hinzuzufügen.

Weniger verwenden

Erstellen Sie zuerst eine neue .less Datei - diese Datei wird Ihr neues primäres Stylesheet sein. Importieren Sie in dieser Datei die Datei bootstrap.less. Kompilieren Sie diese Datei und verknüpfen Sie sie in Ihren HTML-Dateien. Sie sollten jetzt eine genaue Kopie des Standard-Bootstrap-CSS mit Zugriff auf alle Bootstrap-Variablen haben.

Um Ergänzungen hinzuzufügen, fügen Sie sie zu dieser Datei unterhalb der import-Anweisung hinzu. In Ihrem Fall würde ich also die Variablen für die Medienabfragen und Breadcrumbs (in variables.less) finden und den Stil der Breadcrumbs auf kleineren Bildschirmen anpassen.

Beachten Sie, dass Bootstrap zuerst mobil ist, was bedeutet, dass die Standardstile auf dem kleineren Bildschirm angewendet werden und Sie den Wert für größere überschreiben.

Nicht weniger verwenden

Wenn Sie sich nicht wohl fühlen, weniger zu verwenden, würde ich sagen, dass dies eine großartige Gelegenheit ist, um zu beginnen. Wenn Sie dies auf althergebrachte Weise tun möchten, erstellen Sie einfach ein zweites Stylesheet, das Sie verknüpfen, fügen es unterhalb des Bootstrap-Arbeitsblatts hinzu und programmieren es weg.

Ich habe ein Snippet auf bootsnipp erstellt, das Ihren Anforderungen entspricht.

Ссылка

Sie können diesen Breadcrumb zu

• zeigt nur die letzten n Elemente an. Ellipsen werden am Anfang der Liste hinzugefügt, wenn Elemente ausgeblendet sind.
• legt eine maximale Größe für jedes Element fest. Nach der Beschriftung werden Ellipsen hinzugefügt, wenn sie zu lang sind.

Durch Setzen von Haltepunkten können Sie die Anzahl der anzuzeigenden Elemente und deren maximale Größe für verschiedene Bildschirmgrößen festlegen und somit sicherstellen, dass kein Überlauf auftritt.