Dieser Artikel führt Sie durch die Navigations- und Tab-Komponenten inbootstrapund stellt Ihnen die Verwendung der Navigations- und Tab-Komponente vor. Ich hoffe, dass er für alle hilfreich ist!
Die Navigationsleiste ist eine notwendige Funktion des Website-Systems. In der Vergangenheit war die Erstellung einer Navigationsleiste mit viel Aufwand verbunden Eine schöne Navigationsleiste. Einfach kopieren und einfügen, fertig. [Verwandte Empfehlung: „Bootstrap-Tutorial“]
Sie können Ihren Code auch prägnanter gestalten
Dieser Code zeigt dasselbe an wie oben, es sei denn, dies liegt an Für einige Besonderer Zweck (z. B. steht es Mitgliedern zur Verfügung, aber nicht normalen Menschen), andernfalls besteht keine Notwendigkeit, es auf die Speisekarte zu setzen.
Beide Schreibmethoden haben ihre eigenen Vorteile;
Mit der allgemeinen Flexbox-Klasse können Sie die horizontale Ausrichtung der Navigation einfach ändern. Die Navigation ist standardmäßig links ausgerichtet und Sie können sie problemlos in die Mitte oder rechts ändern.
导航演示
Möglicherweise sehen Sie auch, dass mehrere Navigationen auf einer Seite platziert werden können.
Ändern Sie die Navigation in vertikale Navigation, indem Sie die generische Klasse .flex-column verwenden. Wenn Sie nur unter bestimmten Ansichtsfenstern stapeln möchten, verwenden Sie die responsive Version (z. B. .flex-sm-column).
导航演示
ps: Diese Reaktion ist vertikal, wenn sie größer als der Haltepunkt ist, da die vertikale Navigation im Allgemeinen für die Sekundärnavigation oder In-Page-Navigation verwendet wird. Wenn der Bildschirm zu klein ist, nimmt die vertikale Navigation den Leseraum ein. es ist also nicht nötig. Wenn Sie die horizontale Navigationsfunktion ausblenden möchten, wenn der Bildschirm verkleinert wird, wird die Navigationssymbolleiste im nächsten Kapitel ausführlich vorgestellt.
Verwenden Sie die einfache Navigation und fügen Sie .nav-Tabs hinzu, um eine Benutzeroberfläche mit paginierten Tabs zu erstellen. Erstellen Sie umschaltbare Blöcke über das Paging-JavaScript-Plugin im Abschnitt „Tab-Verwendung“ unten. Der Tab-Stil ist sehr einfach. Wenn Sie bestimmte Funktionen implementieren möchten, werden wir ihn später ausführlich vorstellen, und es gibt später auch detaillierten Code.
Kapseln werden wie Tabs verwendet, verwenden jedoch .nav-pills anstelle von nav-tabs:
.nav-Inhalt hat zwei Breiten. Klasse zur Erweiterung Wenn Sie .nav-fill verwenden, wird dem .nav-item-Inhalt proportional Platz zugewiesen. Beachten Sie, dass dies den gesamten horizontalen Platz einnimmt, aber nicht jedes Navigationselement die gleiche Breite hat.
Bitte verwenden Sie .nav-justified, um Elemente gleicher Breite zu erstellen. Der gesamte horizontale Platz wird von den Navigationslinks eingenommen, aber im Gegensatz zur .nav-Füllung oben hat jedes Navigationselement die gleiche Breite.
Sie können den Unterschied zwischen den beiden Ausrichtungen vergleichen.
Wenn Sie reaktionsfähige Navigationsänderungen benötigen, verwenden Sie bitte eine Reihe allgemeiner Klassen für flexible Boxen. Diese allgemeinen Klassen ermöglichen eine stärkere Anpassung zwischen Haltepunkten. Im folgenden Beispiel wird unsere Navigation unterhalb des kleinen Haltepunkts gestapelt und horizontal vom kleinen Haltepunkt aus angeordnet, um die gesamte verfügbare Breite auszufüllen.
导航演示
Anzeige unter verschiedenen Browserbreiten.
加入额外的HTML和下拉菜单JavaScript插件
带下拉列表的选项卡
导航演示
Nach dem Login kopieren
带下拉列表的胶囊只需要将nav-tabs换成nav-pills
Nach dem Login kopieren
4 使用选项卡
4.1 普通选项卡
前面的选项卡只有样式，是不起作用的。其实bootstrap已经为我们写好js代码，他们都在bootstrap.bundle.min.js中了。
导航演示
首页内容
这里可以放文字、列表等一切页面元素个人资料
这里可以放文字、列表等一切页面元素联系方式
这里可以放文字、列表等一切页面元素Nach dem Login kopieren
4.2 胶囊选项卡
跟前面胶囊一样，只是换一个标签这么简单。
4.3 垂直胶囊选项卡
这个段代码把普通链接改成了按钮，其实也是一样的，看着貌似很复杂，其实只需要复制进去，修改一下你要的地方就好了。
需要注意的是，垂直标签的内容显示在右侧（当然也可以菜单在右边，内容在左边），所以在布局的时候跟前面不太一样。
导航演示
首页内容
这里可以放文字、列表等一切页面元素个人资料
这里可以放文字、列表等一切页面元素联系方式
这里可以放文字、列表等一切页面元素Nach dem Login kopieren
4.4 淡入淡出效果
要使选项卡或菜单淡入淡出，请将.fade加到每个.tab-pane分页中。第一个分页内容还必须具有.show以使初始内容可见。事实上上面已经用了淡入淡出效果，试着去掉tab-pane中的fade，看一下效果。
更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！
Das obige ist der detaillierte Inhalt vonWie füge ich Navigationskomponenten und Registerkartenkomponenten in Bootstrap hinzu? Eine kurze Nutzungsanalyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
