Zu den Methoden zum Erstellen einer festen Navigationsleiste mit Bootstrap geh?ren: 1. Erstellen einer festen oberen Navigationsleiste, verwenden Sie die Navi-Fixed-Top-Klasse und fügen Sie eine Top-Füllung für den K?rper in CSS hinzu. 2. Erstellen Sie eine feste Navigationsleiste fest, verwenden Sie die Navi-Fixed-Bottom-Klasse und fügen Sie eine Bodenfüllung für den K?rper in CSS hinzu.

Im Webdesign ist die NAVBAR eine Schlüsselkomponente, die Benutzern nicht nur hilft, die Website zu durchsuchen, sondern auch die Benutzererfahrung zu verbessern. Bootstrap, ein beliebtes Front-End-Framework, bietet leistungsstarke Werkzeuge, um flexible und sch?ne Navigationsstangen zu erstellen. In diesem Artikel wird mit dem Erstellen einer festen oberen und unteren Navigationsleiste unter Verwendung von Bootstrap eingetaucht, tats?chliche Codebeispiele bereitgestellt und einige pers?nliche Erfahrungen mit diesen Techniken in Projekten ausgeben.

Mit der festen Navigationsleistenfunktion von Bootstrap k?nnen wir immer oben oder unten in der Ansicht bleiben, wenn die Seite scrolls. Dies ist sehr nützlich für langfristige Seiteninhalte, da Benutzer jederzeit auf das Navigationsmenü zugreifen k?nnen, ohne nach oben oder unten auf der Seite zu scrollen.

Schauen wir uns zun?chst an, wie Sie eine feste Top -Navigationsleiste erstellen. Die feste obere Navigationsleiste verwendet navbar-fixed-top Klasse. Hier ist der Code, um es zu implementieren:

 <nav class = "navbar navi-default navi-fixed-top">
  <div class = "Container-Fluid">
    <div class = "naval-hader">
      <a class = "navbar-brand" href = "#"> Marke </a>
    </div>
    <ul class = "navi navbar-nav">
      <li class = "active"> <a href = "#"> home </a> </li>
      <li> <a href = "#"> Seite 1 </a> </li>
      <li> <a href = "#"> Seite 2 </a> </li>
    </ul>
  </div>
</nav>

Diese Navigationsleiste bleibt immer ganz oben auf der Seite, auch wenn der Benutzer auf der Seite scrollt. Es ist zu beachten, dass die Navigationsleiste den Seiteninhalt überschreibt, da die Navigationsleiste body -Tag in Ihrem CSS etwas Polster hinzufügen müssen, um zu verhindern, dass der Inhalt von der Navigationsleiste blockiert wird:

 K?rper {
  Padding-Top: 70px; /* Navigationsleiste H?he*/
}

Schauen wir uns nun die feste untere Navigationsleiste an, indem wir navbar-fixed-bottom Kurs ansehen:

 <nav class = "navbar navi-default navi-fixierte bottom">
  <div class = "Container-Fluid">
    <ul class = "navi navbar-nav">
      <li> <a href = "#"> home </a> </li>
      <li> <a href = "#"> Seite 1 </a> </li>
      <li> <a href = "#"> Seite 2 </a> </li>
    </ul>
  </div>
</nav>

In ?hnlicher Weise überschreibt die feste Navigationsleiste mit festem Seiteninhalt body -Tag in CSS eine untere Füllung:

 K?rper {
  Padding-Bottom: 70px; /* Navigationsleiste H?he*/
}

Bei der Verwendung einer festen Navigationsleiste gibt es mehrere bemerkenswerte Punkte:

• Inhaltsverschluss : Wie bereits erw?hnt, verdeckt eine feste Navigationsleiste den Seiteninhalt, sodass die Füllung des Seiteninhalts angemessen angepasst werden muss.
• Responsive Design : Die Navigationsleiste von Bootstrap reagiert an, aber auf kleinen Bildschirmger?ten kann eine feste Navigationsleiste die Benutzererfahrung beeinflussen. M?glicherweise m?chten Sie verschiedene Navigationsmethoden auf kleinen Bildschirmen wie der Seitenleiste oder im Hamburger -Menü in Betracht ziehen.
• Leistung : Feste Navigationsbalken k?nnen sich auf die Seitenleistung auswirken, insbesondere auf mobile Ger?te, da es kontinuierliches Rendering erfordert. Um die Leistung zu optimieren, k?nnen Sie in Betracht ziehen, das will-change -Attribut von CSS zu verwenden, um den Browser zur Optimierung aufzufordern.

In den tats?chlichen Projekten habe ich die feste Top -Navigationsleiste verwendet, um ein Layout für eine Nachrichten -Website zu erstellen, damit Benutzer beim Durchsuchen langer Beitr?ge problemlos zur Homepage oder in andere Abschnitte zurückkehren k?nnen. Ich stellte jedoch fest, dass die feste Navigationsleiste für einige Seiten, wenn weniger Inhalt besteht, überflüssig erscheint und sogar die ?sthetik beeinflusst. Daher schlage ich vor, dass bei Verwendung einer festen Navigationsleiste entscheiden, ob Sie sie basierend auf dem spezifischen Inhalt der Seite und der Benutzeranforderungen verwenden m?chten.

Darüber hinaus habe ich versucht, die feste untere Navigationsleiste in Verbindung mit einer "Back to Top" -Taste zu verwenden, die auf langen Seiten sehr nützlich ist, und Benutzer k?nnen schnell an die Spitze der Seite zurückkehren. Dies erfordert jedoch auch eine sorgf?ltige Gestaltung, um sicherzustellen, dass es sich nicht auf das Layout anderer Seitenelemente auswirkt.

Insgesamt ist die feste Navigationsleiste von Bootstrap sehr leistungsf?hig und flexibel, muss jedoch gem?? der Situation angepasst und optimiert werden, um die beste Benutzererfahrung zu gew?hrleisten. Ich hoffe, dass der Austausch dieses Artikels Ihnen helfen kann, die feste Navigationsleiste von Bootstrap besser zu verstehen und zu verwenden.

Das obige ist der detaillierte Inhalt vonBootstrap -Navigationsanstrench. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!