Wir haben gerade eine Diskussion über die Wichtigkeit der Navigation auf Ihrer Website abgeschlossen.
Wir haben auch verschiedene Möglichkeiten untersucht, wie wir Navigation auf einer Website bieten können.
Es ist jetzt Zeit für uns, Bootstrap zu betrachten und Komponenten zu betrachten
, die Bootstrap bietet, die es uns ermöglichen, Navigation zu unseren Websites hinzuzufügen.
Zwei wichtige Komponenten von Bootstrap sind die Navbar und Breadcrumbs.
Wir werden beide in dieser Übung untersuchen.
Lassen Sie uns beginnen, indem Sie oben auf unserer Webseite eine Navigationsleiste hinzufügen.
Wir können dies mit der Navbar-Komponente tun, die Teil von Bootstrap ist.
Also, wie fangen wir an?
Wir gehen zum Hauptteil unserer HTML-Seite.
Also hier habe ich index.HTML geöffnet.
Und oben
werde ich ein Element hinzufügen, das dieses nav HTML-Tag verwendet.
Jetzt ist das nav HTML-Tag für die Bereitstellung von Navigation vorgesehen.
Also, nehmen wir den Vorteil dieses Tags und bauen unsere Navigationsleiste mit dem nav Tag.
Also, an der Spitze,
werde ich dieses Tag hinzufügen, das Navi
setzen und die Navigationsleiste um dieses Navigations-Tag konstruieren.
Also, sobald wir dieses nav Tag in index.HTML hinzufügen,
dann können wir voran gehen und dann die bootstraps Klassen auf dieses nav Tag anwenden.
Also, ich wende die Klasse navbar an.
Die navbar-Klasse in Bootstrap ermöglicht es mir, eine Navigationsleiste zu erstellen.
Es gibt viele verschiedene Möglichkeiten, die Navigationsleiste anzupassen,
die wir als zusätzliche Klassen betrachten, die zu diesem nav Tag hinzufügen.
Zusammen mit der navbar
fügen wir auch in der nächsten Klasse hinzu, die navbar-dark ist.
Jetzt möchte ich, dass meine Navigationsleiste dunkel ist und
einen dunkleren Hintergrund hat.
Denn das geht sehr gut mit der Website, die ich gerade entworfen habe.
Wir können navbar-Licht haben,
die eine hellere Farbe Navigationsleiste ist.
Also, Sie können wählen, eine von ihnen in Ihrer Webseite zu verwenden.
Die nächste Klasse, die ich verwenden werde, ist navbar-expand-sm Klasse.
Jetzt und auch, werde ich die Bildschirmgröße angeben
, unter der das umschaltbare Verhalten auftritt.
Nun, wenn ich navbar-expand-sm sage,
bedeutet das, dass für kleine und extra kleine Bildschirme
diese Navbars zu einer umschaltbaren Navbar werden.
Das bedeutet, dass es in diesen Bildschirmgrößen zusammengeklappt wird.
Sie werden ziemlich bald erfahren, wie das funktioniert,
wenn wir uns ansehen, wie wir
das Collapse-Plugin zur Navbar hinzufügen können, um diese Art von Verhalten zu aktivieren.
Also zusammen mit einem navbar umschaltbaren sm,
werde ich zunächst eine Hintergrundfarbe auf die navbar anwenden,
die bg-primary wäre.
Jetzt ist bg-primary die Primärfarbe, die in Ihrem Bootstrap definiert ist.
Standardmäßig ist dies eine Version der blauen Farbe, die von Bootstraps verwendet wird.
Also werde ich damit beginnen, als meine Primärfarbe.
Später werde ich die Farbe meiner navbar mit einigen CSS-Klassen anpassen.
Darüber hinaus werde ich auch
eine andere Klasse namens Fixed-Top auf diese Navigationsleiste anwenden.
Was fixed-top tut, ist es fixiert die Navigationsleiste oben
im Browserfenster, wo diese Webseite gerendert wird.
Selbst wenn Sie Ihre nasse Seite scrollen,
war die Navigationsleiste bis oben auf der Seite bleiben.
Sie können einfach feste Unterseite verwenden, um
die Navigationsleiste am unteren Rand Ihres Browserfensters zu fixieren, oder Sie können sagen, statisch oben.
Und auch, Sie können diese Klasse einfach nicht verwenden.
Wenn Sie das nicht verwenden,
wird Ihre Navigationsleiste auch scrollen, wenn Ihre Webseite nach oben gescrollt wird.
Auf meiner Website wähle ich, dass die Navigationsleiste oben auf der Seite fixiert bleibt.
Es gibt viele weitere Optionen,
die Sie in der Bootstraps-Dokumentation finden können.
Dies ist also ein Beispiel für die Verwendung der Navigationsleiste.
Außerdem
werde ich in der Navigationsleiste den Inhalt einschließen, der
in der Navigationsleiste in einem Container verwendet wird.
Hier werde ich hier ein div-Element verwenden
und die Container-Klasse auf dieses div-Element anwenden.
Also, was auch immer darin eingeschlossen ist,
wird auf die gleiche Breite wie der Rest meiner Webseite beschränkt sein.
Wie Sie sich erinnern, habe ich die Container-Klasse verwendet
, um die Breite des Inhalts auf meiner Webseite
zu definieren. Daher werde ich dasselbe auch auf meine Navigationsleiste anwenden,
so dass meine Navigationsleisteninformationen
innerhalb der gleichen Breite wie der Rest meiner Webseite angezeigt werden.
Sie können die Container-Klasse nicht in der Navigationsleiste verwenden. In diesem Fall
wird der Inhalt der Navigationsleiste über die gesamte Breite des Bildschirms verteilt.
In der Navigationsleiste
werde ich hier eine Klasse zu einem Tag hinzufügen.
Diese Klasse, die ich als Navbar-Marke nenne,
erlaubt mir, einige Informationen als Branding Information in meiner Navigationsleiste anzuzeigen.
Wenn Sie beispielsweise ein Unternehmen haben,
können Sie den Namen Ihres Unternehmens oder
das Logo Ihres Unternehmens mit der navbar-Marke anzeigen
, so dass in Ihrer Navigationsleiste prominent angezeigt wird.
Wenn Sie viele Websites besuchen,
werden Sie offensichtlich sehen, dass der Name des Unternehmens irgendwo in
der Navigationsleiste dieser Website sichtbar ist.
Also, lassen Sie mich diese Navbar-Marke hinzufügen.
Dies kann auch auf die Homepage Ihrer Website verlinkt werden.
Also, ich werde das da lassen.
Auf den verbleibenden Seiten auf meiner Website
werde ich nur die href hinzufügen, um mich auf die Seite index.HTML zurückzubringen,
die die Homepage ist.
Und hier drinnen werde ich im Namen meines Restaurants hinzufügen.
Lassen Sie uns die Änderungen speichern und gehen und
einen kurzen Blick auf den aktuellen Zustand meiner Navigationsleiste werfen. Wenn Sie
auf die Webseite im Browser gehen,
können Sie nun sehen, wo die Navigationsleiste auf meiner Webseite im Browser sichtbar ist.
Die Navigationsleiste befindet sich jetzt oben auf der Seite und Sie
können sehen, dass, wenn ich meine Seite scrollen,
die Navigationsleiste immer noch an der Spitze bleibt, weil ich zu festen Spitzenklasse verwendet.
Sie können auch
die Navbar-Marke sehen, die mir erlaubt, den Namen des Restaurants dort anzuzeigen.
Später werde ich das durch das Logo für dieses Restaurant ersetzen.
Sie bemerken, dass die Navigationsleiste teilweise im Jumbotron abgedeckt ist.
Sie werden das ein wenig später mit einer CSS-Anpassung beheben.
Das nächste, was ich tun werde, ist, ein paar Links zu meiner Navigationsleiste hinzuzufügen,
so dass diese Links mich zu den anderen Seiten auf meiner Website führen.
Also, wie machen wir das?
Wenn
ich zurück zu index.HTML gehe, werde ich hier eine ul hinzufügen
, in
der ich alle verschiedenen Links deklarieren werde, die in meiner Navigationsbox angezeigt werden.
Also diese ul, auf die ich die Klasse als navbar-nav anwenden werde.
Dies ist also die Klasse, die mir hilft,
den Satz von Links zu definieren, die in meiner Navigationsleiste enthalten werden.
Und diese Links werden horizontal in meiner Navigationsleiste angezeigt.
Die mr-Auto-Klasse, die ich auch auf die ul angewendet habe,
wird verwendet, um den rechten Rand anzugeben.
Dies ist eine Dienstprogrammklasse, die
in Bootstrap verfügbar ist, mit der ich den richtigen Rand angeben kann.
Wenn ich also sage, mr-auto,
was es bedeutet, ist, dass auf der rechten Seite
der rechte Rand so weit wie möglich gesetzt werden sollte.
Das bedeutet, dass der Inhalt so links wie
möglich innerhalb der Navigationsleiste verschoben wird.
Innerhalb dieser ungeordneten Liste
kann ich Listenelemente verwenden, um
die verschiedenen Links aufzunehmen, die Teil meiner Navigationsleiste sein werden.
Also, da drin werde ich ein paar Links hinzufügen
und ich werde anfangen, indem ich den ersten dort mit dem Link spezifiziere.
Zu jedem Listenelement in Ihrer Navigationsleiste
werden Sie die Klasse als Navigationselement anwenden.
Dadurch können diese Listenelemente horizontal als Links in meiner Navigationsleiste angezeigt werden.
Und dann im Inneren
kann ich dann das a-Tag verwenden, um
den tatsächlichen Link hinzuzufügen, der Teil meiner Navigationsleiste sein wird.
Also im Inneren benutze ich das a-Tag mit
der Klasse nav-link und dies erlaubt mir auch, die href zu verwenden.
Attribut, um den Link dort zu definieren.
Und der erste, den ich einschließen werde, ist Zuhause.
Dies würde also ein Element namens Home in dieser Navigationsleiste enthalten.
Lassen Sie mich das einfach kopieren und fügen Sie es dann ein.
Und dann werden wir einige davon bearbeiten, weil ich
vier verschiedene zu meiner Navigationsleiste hinzufügen möchte.
Der erste ist Zuhause.
Der zweite wäre „Über“.
Der dritte wäre Menu, das ich als Teil des nächsten Kurses bauen werde.
Und der letzte wird Kontakt sein.
Eine typische Firmenwebsite würde Links wie diese in ihrer Navigationsleiste haben. Wenn
ich diese beiden hinzufüge,
kann ich jetzt tun,
dass wir einen dieser Links explizit als aktiven Link identifizieren können,
was bedeutet, dass, wenn Sie auf dieser bestimmten Seite sind, dieser
bestimmte Link hervorgehoben werden kann.
Um dies zu tun, werden wir hier die Klasse aktiv genannt auf eines dieser Listenelemente anwenden.
In diesem Fall, da dies die Seite index.html ist,
wende ich die aktive Klasse auf den Home-Link dort an.
Dies vervollständigt meine Navigationsleiste auf der Seite index.HTML ziemlich.
Eine kleine Sache, die ich hier beheben möchte, ist, dass der About Link,
Ich möchte es mit der aboutus.HTML
Seite verknüpfen, die wir bereits in unsere Website aufgenommen haben,
denn das ist, wo ich will, dass es führen.
Werfen wir einen kurzen Blick auf unsere Navigationsleiste dieses Teils. Wenn Sie
auf unsere Navigationsleiste zurückkehren,
können Sie sofort das Ergebnis der Aufnahme
dieser Elemente in die ungeordnete Liste dort sehen.
So sehen Sie die Startseite,
Über, Menü und Kontakt dort,
und jeder von ihnen ist ein Link, aber dies ist ein Navigationselement hier.
Und beachten Sie, wie das Haus hier wegen der Verwendung der aktiven Klasse hervorgehoben wird.
Also, wenn ich auf die Über klicke,
sollte es mich zum About bringen.
Siehe, da sind wir.
Aber ich weiß, dass ich keine Möglichkeit habe, zurück
zu gehen, was bedeutet, dass ich diese Navigationsleiste auch der Seite aboutus.HTML übergeben muss.
Wir werden in kurzer Zeit dorthin kommen. Im
Moment werde ich schnell navigieren mit der Zurück-Taste
meines Browsers zurück zu meiner index.HTML Seite.
Eine Sache, die ich Ihnen auch zeigen wollte, war, wie
diese Navigationsleiste für kleine und extra kleine Bildschirmgrößen zusammenbrechen wird.
Also, lassen Sie uns die Ansicht mit der Responsive Ansicht einschalten,
und dann lassen Sie mich zum Galaxy S5 gehen.
Und ich bemerkte, dass, wenn ich das Galaxy S5 so verwende,
Sie sehen können, dass dies früher angezeigt wird, als es bereits den Bildschirm bedeckt.
Das ist nicht das Verhalten, das ich will.
Ich möchte in der Lage sein, dies zu verstecken, wenn ich dies auf einem kleinen und extra kleinen Bildschirm ansehe.
Und dann füge ich vielleicht eine Schaltfläche hinzu, mit der ich
die Anzeige dieser Links ein- und ausschalten kann.
Sie haben solche Dinge auf mobilen Websites gesehen.
Wie machen wir das in Bootstrap?
Gehen wir als Nächstes zu diesem Schritt.
Zurück zu unserer Navigationsleiste hier.
Lassen Sie mich dort eine Schaltfläche hinzufügen,
die als Umschaltfläche zum Ein- und Ausblenden
meiner Links von meiner Navigationsleiste fungiert, wenn sie auf extra intelligenten und kleinen Bildschirmen angezeigt wird.
Um dort hinzuzufügen,
lassen Sie mich eine Schaltfläche hinzufügen und einige Klassen auf diese Schaltfläche anwenden. In der
nächsten Lektion werden wir mehr über Schaltflächen in Bootstrap besprechen.
Um jedoch eine Schaltfläche in Bootstrap hinzuzufügen,
würden Sie die Klasse für diese bestimmte Schaltfläche als navbar-toggler anwenden.
Also, das ist ein Navbar-Toggler.
Wie der Name schon sagt,
beginnen Sie bereits zu verstehen, was diese Schaltfläche in diesem Fall tun wird.
Und dann würde ich den Typ als Schaltfläche hinzufügen, um anzuzeigen, dass dies als Schaltfläche wirkt.
Und dann Daten umschalten als kollabieren.
Nun ist dieses Daten-Toggle-Attribut, das Sie hier sehen werden, tatsächlich
eine JavaScript-Komponentenverwendung in Bootstrap.
Wir werden diese Daten Bindestriche Bar Art von Attributen mehr im nächsten Modul betrachten,
wo wir Bootstraps JavaScript-Komponenten betrachten.
Die Navigationsleiste erfordert eine dieser JavaScript-Komponenten, um
meine Links in meiner Navigationsleiste ein- und auszuschalten, also,
das ist der Grund, warum ich dieses Konzept hier schnell eingeführt habe,
aber wir werden zurückkommen, um
diese Bootstraps JavaScript-Komponenten mehr im nächsten Modul zu untersuchen.
Also, Daten-Toggle kollabieren und
dann das Datenziel als #Navbar.
Jetzt werde ich ein anderes div mit der ID als navbar einführen.
Also, wenn ich ein Datum oder Ziel #Navbar angebe,
bezieht sich das auf die ID dieses anderen Elements, das
das Ziel dieser speziellen Schaltfläche hier sein wird.
Also, das ist der Teil, den ich unten hinzufüge.
Und auch möchte ich, dass die Schaltfläche hier etwas anzeigt.
Und in der Regel, wenn Sie diese Art von Schaltflächen auf mobilen Websites sehen,
würde es dort freie Linien enthalten
, so dass dies typischerweise als Navbar-Umschaltsymbol bezeichnet wird.
Also, ich werde ein spezielles Symbol hinzufügen, das
in Bootstrap enthalten ist, das Navbar-Toggler-Symbol genannt wird.
Also, wenn ich diese Klasse auf span-Tag anwende,
wird das hier ein Navbar-Toggler-Symbol auf meine Schaltfläche einführen.
Das führt also einen Knopf ein.
Wir werden uns in kurzer Zeit ansehen, wie das aussieht.
Wenn ich nun auf diese Schaltfläche klicke,
möchte ich diese Links ein- und ausblenden können.
Um mir zu ermöglichen, das zu tun,
was ich tun werde, ist, diese ul mit einem div hier zu umgeben.
Also, ich werde reinkommen und ein div um diese ul vorstellen.
Und zu diesem div
werde ich die Klasse als kollabieren
und dann navbar-kollabieren anwenden, und dann gebe ich ihm eine ID als Navbar.
Jetzt sehen Sie die Korrelation zwischen
diesen Klassen und der ID und dem, was ich im Datenumschalter und dem Datenziel deklariert habe.
Also, hier das Datenziel, das ich als #Navbar angebe, und so ist die ID, die diesem div gegeben wird, navbar.
Und ich gebe den Datenumschalter als kollabieren an.
Collapse ist eine der Bootstraps JavaScript-Komponenten,
die wir im nächsten Modul genauer betrachten werden. Wenn Sie
dies also in das div für kleine und extra kleine Bildschirme einschließen,
wäre dies standardmäßig ausgeblendet,
aber wenn ich auf die Schaltfläche klicke,
wird der Inhalt dieses div auf dem Bildschirm offenbart.
Lassen Sie mich auch eine mr-auto zu der a-klasse navarbar-marke dort hinzufügen, so dass
ich automatisch eine ausreichende rechte marge zu dieser navbar-marke.
Jetzt gehen wir und schauen uns das in unserem Browser an. Wenn Sie
zum Browser gehen, können Sie jetzt sehen, wie
meine Navbar auf kleinen und extra kleinen Bildschirmgrößen zusammengeklappt ist.
Und beachte diesen Knopf auf der linken Seite.
Wenn ich auf die Schaltfläche klicke,
werden die Links in meiner Navigationsleiste angezeigt und ausgeblendet.
Dies ist das Verhalten, das ich für die responsive Implementierung meiner Navigationsleiste möchte.
Wenn ich zu einem normalen,
größeren Bildschirm gehe, wird die Navigationsleiste einschließlich der Links vollständig angezeigt.
Aber wenn ich das Gleiche auf einem kleineren Bildschirm wie diesem ansehe,
werden die Navigationsleistenlinks hinter
dieser Schaltfläche ausgeblendet und dann durch Klicken auf diese Schaltfläche ein- und ausgeschaltet.
Das ist also das ansprechende Verhalten, das Sie
in Ihre Navigationsleiste auf Ihrer Website einbauen können. Nachdem
wir nun die Navigationsleiste auf meiner Seite index.HTML abgeschlossen haben,
möchte ich in der Lage sein, die gleiche Navigationsleiste auf der Seite aboutus.HTML einzuführen.
Bevor wir da sind, gehen wir hier zur Fußzeile.
Und dann bemerken Sie, dass
wir in der Fußzeile diese Links haben.
Ich möchte in der Lage sein, diesen Link auch zu aktualisieren, um auf
aboutus.HTML zu verweisen, so dass
ich selbst durch Klicken auf den Link in meiner Fußzeile immer noch zur Über Seite gehen würde.
Nun, ich gehe wieder hier hoch,
was ich tun werde, ist, einfach diesen Code dieser Navigationsleiste von hier zu kopieren.
Und dann gehen Sie zur Seite aboutus.HTML und fügen Sie diese dann in meine aboutus.HTML Seite ein.
Nicht nur das, ich muss etwas daran anpassen,
weil dies jetzt auf der Seite aboutus.HTML ist.
Offensichtlich gibt es ein paar Dinge, die ich aktualisieren muss. In
erster Linie sollte diese navbar-Marke, die mich zurück
zu meiner Homepage führen sollte, jetzt als index.HTML hier aktualisiert werden.
Und dann, das Listenelement hier jetzt das zweite die Homepage wieder,
ich möchte das auf index.HTML aktualisieren und dann den zweiten Link zum Über,
weil dies die Seite aboutus.HTML ist,
werde ich es zurück zu diesem Hash setzen und dann werde ich
die aktive Klasse von der ersten entfernen Element und wenden Sie dann die aktive Klasse auf das zweite Element an,
da dies die Info Seite ist und daher diejenige sein sollte, die hervorgehoben wird.
Gehen Sie wieder in die Fußzeile der About Page.
In der Fußzeile werde ich die gleichen Updates für die Links hier durchführen, so dass
die Homepage mich zurück zu index.HTML führen sollte und dann die Änderungen speichern lassen.
Also jetzt wird meine About Page auch korrekt aktualisiert. Wenn Sie
zum Browser gehen,
können Sie jetzt sehen, dass ich auf meiner Homepage bin und wenn ich dann auf die Info Seite klicke,
gehe ich zur About Page.
Beachten Sie, wie die gleiche Navigationsleiste in Info Page angezeigt wird.
Sie müssen also hervorgehoben werden, weil ich
die aktive Klasse darauf angewendet habe und dann
zu meiner Homepage zurückkehren kann, indem Sie entweder auf die narvar-Marke oder auf die Startseite klicken.
Also lasst uns auf die narvar-Marke klicken und wir sind wieder in unserer
Haupt- oder Homepage oder index.HTML.
Also, jetzt ist die Navigation korrekt sowohl auf der Startseite als auch auf der Info Seite eingerichtet.
Ein paar zusätzliche Dinge, die ich tun werde, ist anzuwenden, wenn Sie sehen, dass
es Klasse ist, dass ich die Farbe meiner navbar ändern kann,
und ich möchte auch
eine Breadcrumb zu dieser About Page hinzufügen und so dass die Brotkrume mir auch eine andere Möglichkeit gibt,
zurück zu meiner Startseite zu navigieren und auch geben Sie
die Hierarchie auf meiner Website an, wo ich mich gerade befinde.
Also lasst uns diese beiden Schritte als nächstes machen.
Gehen Sie zurück zu diesem Editor in styles.css.
Ich werde hier ein paar weitere Klassen hinzufügen.
Du bemerkst, dass meine Navbar einen Teil des Jumbotron versteckt hat.
Um das zu vermeiden,
was ich tun werde, ist mein Körper,
ich werde eine Polsterung von 50 Pixeln
oben geben, so dass diese 50 Pixel für die Navigationsleiste abgedeckt werden.
Wann immer Sie eine feste obere Navigationsleiste verwenden, ist es
eine gute Idee, diese Auffüllung dem Hauptteil
Ihrer Webseite zu geben, damit die Navigation nicht
das oberste Element im Hauptteil Ihrer Webseite abdeckt.
Also, die restlichen werde ich als
Null Pixel und auch den Z-Index für meinen Körper als Null verlassen.
Von Ihrem Wissen über CSS verstehen Sie, was der Z-Index tut
und der nächste, den ich tun werde, ist, dass ich
navbar-Dark-Klasse überlasten werde, indem ich eine weitere Farbe für
die navbar-Klasse hinzufüge und die Farbe, die ich
wählen werde, ist 512DA8.
Dies ist eine dunkelviolette Farbe, die sehr gut auf meiner Website aussieht.
Tatsächlich, Wenn Sie Interesse haben, wo ich diese Farben gefunden habe, können Sie
www.android.com besuchen und dann ihre Dokumentation für das Materialdesign nachschlagen und dort,
sie haben Vorschläge, wie Farben
in Ihrer Android-Anwendung verwendet werden können, aber das gleiche gilt auch für eine Website,
so dass wo ich ging und diese Farben ausgewählt, um in meiner Website verwendet werden.
Also, wenn ich das tue,
muss ich jetzt zu meiner index.HTML Seite zurückkehren und
dann von der Navbar sollte ich diese bg-primary entfernen.
Andernfalls wird die Farbe, die ich im CSS vorgeschlagen habe, nicht darauf angewendet.
Wechseln Sie in ähnlicher Weise zur Seite aboutus.HTML und scrollen Sie
dann zur Navigationsleiste und entfernen Sie dann auch die bg-primary.
Nun, während ich auf der Seite aboutus.HTML bin,
lassen Sie mich eine Breadcrumb in meinen Container einführen,
die erste Zeile meines Containers dort.
Das ist also, wo die Über uns Titel war
da, also werde ich gehen und ein ol einführen.
Ich benutze nur das ol -Tag als eine Möglichkeit, die Brotkrume einzuführen.
Sie können sogar ein div dafür verwenden und es wird immer noch gut funktionieren.
Es kommt einfach so vor, dass das Beispiel in der Bootstraps-Dokumentation ein ol verwendet hat, also
bleibe ich daran, dass selbst ein einfaches div hier auch gut funktionieren wird.
Also, ich sage ol Klasse col-12 Brotkrumen.
Also wurden die Breadcrumb-Klassen angewendet und
nicht die col-12 Bedeutung, die den gesamten Bildschirm gestreckt hat.
Und da drinnen gehe ich rein und füge zwei Listenelemente hinzu.
Jetzt sehen Sie, warum die Verwendung von ol hier nützlich ist,
weil ich die Listenelemente verwenden kann, um das Breadcrumb-Element zu beschreiben.
Also, Breadcrumb Element hier,
also füge ich ein Breadcrumb-Element
ein und dann werde ich dort das A-Tag verwenden, um einen Link zurück zu meiner Homepage zu definieren.
Also sage ich, „A“ und dann zu diesem A,
gebe ich die href als index.HTML und
füge das dann in meine erste Brotkrume
ein und danach ist die nächste, die ich einschließen werde, ein anderes Listenelement und
das zweite Listenelement, das ich die Klasse als Breadcrumb Element und aktiv anwenden werde.
Beachten Sie also die Verwendung der aktiven Klasse hier und dann drinnen werde ich sagen „Über
uns“ Ich brauche keinen Link hier, weil ich bereits auf der Seite bin
, so dass das nicht für diesen Listeneintrag aufgenommen werden muss.
Speichern wir die Änderungen,
damit Sie sehen können, wie der Breadcrumb in dieser
speziellen Über uns Seite eingeführt wurde.
Werfen wir einen Blick auf die resultierende Webseite. Wenn Sie
auf meine Webseite gehen, können Sie jetzt sehen, dass die Farbe der Navbar
jetzt in das dunkle Lila geändert wurde, die
durch das CSS eingeführt werden und das sieht auf dem Bildschirm hier schön aus.
Dark Purple, gefolgt von einem helleren lila und dann
unten noch heller lila für meine Fußzeile.
Nun, ich bin kein Designer,
aber das ist das Beste, was ich in Bezug auf das Hinzufügen von Websites finden könnte.
Wie Sie aus der Geschichte wissen, sind Männer farbblind.
So haben wir einen sehr schlechten Geschmack in Farben.
Wenn du verheiratet bist, wird deine Frau dich definitiv daran erinnern.
Gehen wir auf die About Page und sehen, wie es aussieht.
Dies ist also die About Page und auf der Info Seite können Sie
die Navbar mit der richtigen Farbe
dort sehen und die Breadcrumb in der Über uns hier unten beachten.
So können Sie die Startseite sehen, die Sie zurück auf die Index-Seite und
dann Über uns führt, wie Sie gesehen haben, haben wir aktiven Link,
aktive Klasse auf diese angewendet.
Das ist also, wie die Über uns angezeigt wird und die Homepage.
Dies ist also der Standard-Breadcrumb-Stil, der
in Bootstrap verwendet wird, und wenn ich auf die Startseite klicke, gehe ich zurück zu meiner Startseite.
Damit schließen wir diese Übung auf Navbar und Paniermehl ab.
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht „navbar und breadcumbs“ zu machen.