Wie füge ich eine Navigationssymbolleiste in

Bootstraphinzu? Der folgende Artikel stellt Ihnen die Verwendung der Bootstrap5-Navigationssymbolleistenkomponente (Navbar) vor. Ich hoffe, er wird Ihnen hilfreich sein.

1 Funktionsprinzip

Die Bootstrap-Navigationssymbolleiste (Navbar) ist leistungsfähiger und reaktionsschneller als die im vorherigen Abschnitt erlernte Navigation. Ihre Struktur umfasst Marke, Navigation, Formular usw. sowie Falt-Plug-Ins. Unterstützung. [Verwandte Empfehlung: „Bootstrap-Tutorial“]

Bevor Sie die Navigationsleiste verwenden, müssen Sie Folgendes wissen:

• Die Navigationsleiste muss mit .navbar gepackt und durch .navbar-expand geleitet werden{- sm|-md |-lg|-xl} sorgt für reaktionsschnelles Falten und verwendet die Farbschemaklasse.
• Die standardmäßige Inhaltsbreite der Navigationsleiste ist schwebend. Durch das Ändern der Container wird die horizontale Breite auf unterschiedliche Weise begrenzt.
• Verwenden Sie allgemeine Klassen für Abstände und flexible Boxen, um den Abstand und die Ausrichtung von Objekten in der Navigationsleiste zu steuern.
• Die Navigationsleiste reagiert standardmäßig, diese Option kann jedoch leicht geändert werden.
• Verwenden Sie Navigationselemente, um Affinität sicherzustellen, oder verwenden Sie allgemeinere Elemente wie Divs.
• Geben Sie den aktuellen Standort an, indem Sie aria-current="page" auf der aktuellen Seite oder aria-current="true" auf dem aktuellen Element in der Gruppe festlegen.

2 Die Struktur der Navigationsleiste

2.1 Unterstützte Unterelemente

Die Navigationsleiste verfügt über integrierte Unterstützung für einige Unterelemente. Wählen Sie je nach Ihren Anforderungen aus den folgenden Optionen:

• navbar-Marke für Ihren Firmen-, Produkt- oder Projektnamen.

• navbar-nav bietet eine äußerst vollständige und einfache Navigation (einschließlich Unterstützung für Dropdown-Listen).

• navbar-toggler für unser Falt-Plugin und andere Verhaltensweisen beim Umschalten der Navigation.

• Allgemeine Klassen für Abstände und flexible Boxen werden zur Formularsteuerung und zum Verhalten verwendet.

• navbar-text wird für vertikal zentrierte Textzeichenfolgen verwendet.

• .collapse.navbar-collapse Gruppiert und verbirgt den Inhalt der Navigationsleiste über Haltepunkte der übergeordneten Ebene.

• Fügen Sie optional .navbar-scroll hinzu, um die maximale Höhe festzulegen und durch den erweiterten Navigationsleisteninhalt zu scrollen.

Hier ist ein Beispiel für ein untergeordnetes Element, einschließlich einer reaktionsfähigen Navigationsleiste, die am MD-Haltepunkt automatisch minimiert wird.

Die vor und nach dem Haltepunkt angezeigte Navigation ist wie im Bild dargestellt

Klicken Sie auf die drei horizontalen Linien rechts, um das Bild unten anzuzeigen. Klicken Sie hier, um die Navigation wiederherzustellen Das obige Beispiel: Wenn Sie Code von Hand schreiben möchten, ist die Implementierung sehr aufwändig, aber jetzt ist es nur noch ein einfaches Kopieren und Einfügen. Im Folgenden stellen wir die Funktionen und Verwendung jeder Komponente im Detail vor.

2.2 Marke (navbar-brand)

Nach dem Login kopieren

Bild wurde im obigen Beispiel verwendet, jetzt mischen wir Bild und Text

2.3 Navigation

Die Navigationsverbindung wird auf dem .nav hergestellt, das wir zuvor gelernt haben und benötigen die Verwendung von Toggler-Klassen, um ein geeignetes reaktionsfähiges Design zu etablieren. Navigationselemente in einer Navigationsleiste nehmen so viel horizontalen Platz wie möglich ein, damit der Inhalt Ihrer Navigationsleiste sicher ausgerichtet bleibt.

Aktivierter Status – verwenden Sie .active – um die aktuelle Seite darzustellen. Kann direkt auf .nav-link oder direkt auf .nav-item verwendet werden.

Bitte beachten Sie, dass Sie das aria-current-Attribut zum .nav-Link selbst hinzufügen sollten.

Nach dem Login kopieren
Eine nette Möglichkeit, dies zu tun, ohne eine Liste zu verwenden.

Die beiden haben den gleichen Effekt

2.4 Formulare

Sie können verschiedene Formulare und Komponenten in der Navigationsleiste platzieren, z. B. das Suchformular in 13.2.1. Die direkten untergeordneten Elemente in der Navigationsleiste verwenden Flex-Layout, und die Standardeinstellung ist justify-content : Abstand dazwischen, das heißt, beide Enden ausrichten. Verwenden Sie nach Bedarf andere Single-Star-Box-Klassen, um dieses Verhalten anzupassen.

input群组也可以这样使用。如果导航条整个都是表单，或者大部分是表单，则可以使用form元素作为容器并保存HTML。

表单导航条也支持各种按钮。这也大大的提醒了我们可以使用垂直对齐工具来对齐不同大小的元素。

2.5 文本

透过.navbar-text导航条可以包含一些文本。该class调整了文本字串的垂直对齐和水平间距。貌似这个用的不多，直接拿官方例子。

根据需要与其他元件和通用类别混合使用。

3 配色方案

由于主题class和background-color通用类别class的结合，主题化导航条从未如此简单。从navbar-light选用浅色背景颜色，或者navbar-dark用于深色背景颜色。然后，使用.bg-*通用类别自定义。

更多颜色在通用类>背景颜色中查看，在前面章节表格颜色中也有相关介绍。

4 容器

虽然不是必需的，但您可以把导航条包装在.container中，将其置中于页面。您可以使用任意响应式容器以更改导航条中内容的显示宽度。这部分内容比较简单，我就不在演示了。

5 定位

使用我们的定位通用类别将导航条放置在非静态位置。选择固定到顶部、固定到底部、或粘贴到顶部（会随着页面滚动，直到物件达到顶部，并停留在原处）。固定的导航条使用position:fixed，这意味着它们会脱离正常的DOM的文件流，并且可能需要自定义CSS（例如body上的padding-top），以防止与其他元素重叠。 还要注意.sticky-top使用position:sticky，并没有被所有浏览器支持。

向下拉动滚动条后变化

通过上面的例子我们可以看出

• 固定到顶部和固定到底部虽然在container内，但是效果上不会受影响，其宽度超出了container限制。
• 使用了固定到顶部后，默认导航条会自动排在其后。
• 粘贴到顶部会自动跟在已有可视元素后面
• 当拖动滚定条后，固定到顶部和固定到底部位置不变，但默认和粘贴到顶部会被拖上去。

6 滚动

添加.navbar-nav-scroll到 .navbar-nav （或其他navbar子组件），以在折叠的navbar的可切换内容内启用垂直滚动。默认情况下，滚动以75vh（或75%的视口高度）启动，但您可以使用本地CSS自定义属性（--bs-navbar-height或自定义风格）覆盖该属性。在较大的视口中，当导航栏展开时，内容将显示为默认导航栏中的内容。

请注意，当设置overflow-y:auto（需要在此处滚动内容）时，这种行为可能会带来溢出的缺点，overflow-x相当于auto，它将裁剪一些水平内容。

以上是手册对此内容的解释，啰嗦了很多，其实很简单，直接看效果图就好了，说白了就是强制在移动状态下点击三道横线出现一个滚动条，俺老刘觉得这纯属多事。

7 响应性行为

导航条可以使用.navbar-toggler，.navbar-collapse和.navbar-expand{-sm|-md|-lg|-xl}决定它们的内容何时会摺叠。结合其他通用类别，您可以选择何时显示或隐藏特定元素。

对于不需要折叠的导航条，在导航条中加入.navbar-expand。对于总是折叠的导航条，不要加任何.navbar-expand class。

8 切换元素

导航条的切换元素（toggler）预设情况下会对齐左边，但如果它们位于同层级的.navbar-brand后面，它们将自动和最右边对齐。反转您的标记将对调切换元素的位置。以下是不同切换元素样式的示例。

8.1 在最小断点没有.navbar-brand：

8.2 在最小断点左侧有一个品牌名称，右边是切换元素：

8.3 在最小断点左侧有一个切换元素，右边是品牌名称

8.3 外部内容

有时会需要使用折叠插件来触发位于.navbar外的容器内容。因为插件是透过匹配id和data-bs-target来执行的，这将很容易完成！ 这个很有意思，给个完整代码，自己试试看。

         
  

 
 
 
 
Collapsed content
 Toggleable via the navbar brand. 
 
  
   

今天的课程就到这里，。请关注我，及时学习 俺老刘原创的《Bootstrap5零基础到精通》第14节 Bootstrap5滑动导航组件使用。

如果这篇文章对你有帮助，记得随手点赞哦！

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

Das obige ist der detaillierte Inhalt vonWie füge ich eine Navigationssymbolleiste in Bootstrap hinzu? Eine kurze Analyse zur Verwendung der Navbar-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!