Heim >Web-Frontend >Bootstrap-Tutorial >Wie füge ich Navigationskomponenten und Registerkartenkomponenten in Bootstrap hinzu? Eine kurze Nutzungsanalyse

Wie füge ich Navigationskomponenten und Registerkartenkomponenten in Bootstrap hinzu? Eine kurze Nutzungsanalyse

青灯夜游nach vorne: 2021-11-23 18:48:442030Durchsuche

Dieser Artikel führt Sie durch die Navigations- und Tab-Komponenten in bootstrap und stellt Ihnen die Verwendung der Navigations- und Tab-Komponente vor. Ich hoffe, dass er für alle hilfreich ist!

1 Navigationsgrundlagen

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“]

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
        <div>
            <ul>
                <li>
                <a class="nav-link href="#">首页</a>
                </li>
                <li>
                <a href="#">文章</a>
                </li>
                <li>
                <a href="#">图片</a>
                </li>
                <li>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
                </li>
                </ul>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Wie füge ich Navigationskomponenten und Registerkartenkomponenten in Bootstrap hinzu? Eine kurze Nutzungsanalyse

Sie können Ihren Code auch prägnanter gestalten

<nav class="nav">
  <a class="nav-link" href="#">首页</a>
  <a class="nav-link" href="#">文章</a>
  <a class="nav-link" href="#">图片</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
</nav>

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;

Die erste ist organisierter und klarer, wenn die Navigation andere dekorative Elemente wie Symbole usw. enthält. Darüber hinaus können Sie den Link auch ändern, indem Sie das Li schreiben Stilklasse Anzeigemethode, selbst in einigen Unternehmen wird die Arbeitsleistung der Mitarbeiter anhand der Codemenge bewertet (ich habe gehört, dass viele Unternehmen dies tun).
Der zweite ist prägnanter, was der zweite erreichen kann, aber das Gegenteil ist nicht der Fall. Schließlich hat die Lite-Version einige Funktionen kastriert.
Ich werde für die folgenden Demonstrationen den zweiten Typ verwenden. Es wird kein Problem sein, für alle Demonstrationen auf den ersten Typ umzusteigen.

2 Gängige Stile

2.1 Horizontale Ausrichtung

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.

Verwenden Sie .justify-content-center für die zentrierte Ausrichtung:
Verwenden Sie .justify-content-end für die rechte Ausrichtung:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
        <div>
            <nav class="nav justify-content-center">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>

            <nav class="nav justify-content-end">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Wie füge ich Navigationskomponenten und Registerkartenkomponenten in Bootstrap hinzu? Eine kurze Nutzungsanalyse

Möglicherweise sehen Sie auch, dass mehrere Navigationen auf einer Seite platziert werden können.

2.2 Vertikale Navigation

Ä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).

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
        <div>
            <nav class="nav flex-column">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>

            <nav class="nav flex-sm-column">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">图片</a>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
            </nav>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Wie füge ich Navigationskomponenten und Registerkartenkomponenten in Bootstrap hinzu? Eine kurze Nutzungsanalyse

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.

2.3 Tab-Stil

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.

Wie füge ich Navigationskomponenten und Registerkartenkomponenten in Bootstrap hinzu? Eine kurze Nutzungsanalyse

2.4 Kapseln

Kapseln werden wie Tabs verwendet, verwenden jedoch .nav-pills anstelle von nav-tabs:

<ul class="nav nav-pills">

Wie füge ich Navigationskomponenten und Registerkartenkomponenten in Bootstrap hinzu? Eine kurze Nutzungsanalyse

2.5 Füllen und ausrichten

.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.

 <ul class="nav nav-pills nav-fill">
                <li class="nav-item">
                <a class="nav-link href="#">首页</a>
                </li>
                <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">文章</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">图片</a>
                </li>
                <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">只有会员可以观看的视频视频</a>
                </li>
            </ul>

            <br><br>

            <ul class="nav nav-pills nav-justified">
                <li class="nav-item">
                <a class="nav-link href="#">首页</a>
                </li>
                <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">文章</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">图片</a>
                </li>
                <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">只有会员可以观看的视频视频</a>
                </li>
            </ul>

Wie füge ich Navigationskomponenten und Registerkartenkomponenten in Bootstrap hinzu? Eine kurze Nutzungsanalyse

Sie können den Unterschied zwischen den beiden Ausrichtungen vergleichen.

3 Weitere Erweiterung der Navigationskomponenten

3.1 Verwendung von Dienstprogrammklassen für flexible Boxen

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.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <nav class="nav nav-pills flex-column flex-sm-row">
                <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
                <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
                <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
                <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </nav>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Anzeige unter verschiedenen Browserbreiten.

Wie füge ich Navigationskomponenten und Registerkartenkomponenten in Bootstrap hinzu? Eine kurze Nutzungsanalyse

3.2 使用下拉列表

加入额外的HTML和下拉菜单JavaScript插件

带下拉列表的选项卡

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
        <div>
            <br><br><br>
            <ul class="nav nav-tabs">
                <li>
                <a class="nav-link active" aria-current="page" href="#">Active</a>
                </li>
                <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
                <ul>
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><hr></li>
                <li><a href="#">Separated link</a></li>
                </ul>
                </li>
                <li>
                <a href="#">Link</a>
                </li>
                <li>
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </li>
                </ul>
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Wie füge ich Navigationskomponenten und Registerkartenkomponenten in Bootstrap hinzu? Eine kurze Nutzungsanalyse

带下拉列表的胶囊只需要将nav-tabs换成nav-pills

<ul class="nav nav-pills">

Wie füge ich Navigationskomponenten und Registerkartenkomponenten in Bootstrap hinzu? Eine kurze Nutzungsanalyse

4 使用选项卡

4.1 普通选项卡

前面的选项卡只有样式，是不起作用的。其实bootstrap已经为我们写好js代码，他们都在bootstrap.bundle.min.js中了。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li role="presentation">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">首页</button>
                </li>
                <li role="presentation">
                <button id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">资料</button>
                </li>
                <li role="presentation">
                <button id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">联系方式</button>
                </li>
                </ul>

                <div id="myTabContent">

                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <h1>首页内容</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <h1>个人资料</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                        <h1>联系方式</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                </div>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

1Wie füge ich Navigationskomponenten und Registerkartenkomponenten in Bootstrap hinzu? Eine kurze Nutzungsanalyse

4.2 胶囊选项卡

跟前面胶囊一样，只是换一个标签这么简单。

<ul class="nav nav-pills" id="myTab" role="tablist">

1Wie füge ich Navigationskomponenten und Registerkartenkomponenten in Bootstrap hinzu? Eine kurze Nutzungsanalyse

4.3 垂直胶囊选项卡

这个段代码把普通链接改成了按钮，其实也是一样的，看着貌似很复杂，其实只需要复制进去，修改一下你要的地方就好了。

需要注意的是，垂直标签的内容显示在右侧（当然也可以菜单在右边，内容在左边），所以在布局的时候跟前面不太一样。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <div class="d-flex align-items-start">
                <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">首页</button>
                <button id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">资料</button>
                <button id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">信息</button>
                </div>

                <div id="v-pills-tabContent">

                    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                        <h1>首页内容</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                        <h1>个人资料</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
                    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                        <h1>联系方式</h1>
                        这里可以放文字、列表等一切页面元素
                    </div>
               
            </div>
            </div>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

1Wie füge ich Navigationskomponenten und Registerkartenkomponenten in Bootstrap hinzu? Eine kurze Nutzungsanalyse

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!

JavaScript bootstrap html 堆 class JS column flex li

Stellungnahme：

Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie verwende ich Tabellen in Bootstrap? Eine kurze Analyse der Verwendung leistungsstarker TabellenNächster Artikel：Wie verwende ich Tabellen in Bootstrap? Eine kurze Analyse der Verwendung leistungsstarker Tabellen

In Verbindung stehende Artikel

Mehr sehen