ブートストラップナビゲーションの実行方法

ブートストラップナビゲーションの作成には、次の5つのステップが含まれます。1。ナビゲーションバーコンテナを作成します。 2.ナビゲーションバーブランドを追加します。 3.ナビゲーションリンクを作成します。 4.レスポンシブボタンを追加します。 5.折り畳まれたナビゲーションリンクを作成します。

ブートストラップナビゲーションの作成方法

ブートストラップのナビゲーションバーは、ウェブサイトページの整理とリンクに使用できる一般的なナビゲーションコンポーネントです。ブートストラップを使用してナビゲーションバーを作成するための段階的なガイドを次に示します。

1.ナビゲーションコンテナを作成します

<nav></nav>要素を使用してナビゲーションバーコンテナを作成します。

 <code class="html"><nav class="navbar navbar-expand-lg navbar-light bg-light"></nav></code>

• navbarクラスは、ブートストラップのナビゲーションバースタイルを適用します。
• navbar-expand-lgクラスは、画面が広くなるとナビゲーションバーを拡張します。
• navbar-lightおよびbg-lightクラスは、ナビゲーションバーの軽いテーマを設定します。

2.ナビゲーションバーブランドを追加します

ナビゲーションバーのブランドまたはウェブサイト名とロゴは、 <a></a>要素を介して追加できます。

 <code class="html"><a class="navbar-brand" href="#">网站名称</a></code>

3.ナビゲーションリンクを作成します

<ul></ul>要素を使用してナビゲーションリンクのリストを作成します。

 <code class="html"><ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#">主页</a> </li> <li class="nav-item"> <a class="nav-link" href="#">关于我们</a> </li> <li class="nav-item"> <a class="nav-link" href="#">服务</a> </li> </ul></code>

• navbar-navクラスは、リストをナビゲーションバーにリンクします。
• mr-autoクラスはリストを正しく並べます。
• nav-itemクラスは、ナビゲーションバーリンクスタイルを適用します。
• nav-linkクラスは、ナビゲーションバーリンクスタイルを適用します。

4.レスポンシブボタンを追加します

<button></button>要素を使用してボタンを追加して、小さな画面にナビゲーションバーを切り替えます。

 <code class="html"><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button></code>

• navbar-togglerクラスはボタンスタイルを適用します。
• data-toggle="collapse"プロパティを有効にして、ボタンが崩壊したコンテンツを切り替えます。
• data-target="#navbarNav"属性は、切り替えるターゲット要素を指定します。

5.折り畳まれたナビゲーションリンクを作成します

<div>要素を使用して、ナビゲーションリンクの崩壊したコンテンツを作成します。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;html&quot;&gt;&lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt; &lt;ul class=&quot;navbar-nav&quot;&gt; &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;主页&lt;/a&gt; &lt;/li&gt; &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;关于我们&lt;/a&gt; &lt;/li&gt; &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;服务&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;/code&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> <ul> <li> <code>collapse navbar-collapseクラスは、折り畳まれたコンテンツスタイルを適用します。

id="navbarNav"プロパティは、ボタンのdata-targetプロパティと一致します。

以上がブートストラップナビゲーションの実行方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。