Vscodeガイド.ナビゲーション1
nav
ナビゲーションを使用してメニューバーを作成するか、必要なテキストを表示します.
隠すこともできます.
まず、ナビゲーションの作成方法について説明します.
ご覧のように、リストを宣言するときにclass=「nav nav-tabs」を使用して作成すると、オプションカード式になります.
class=「nav nav-parts」を使用して錠剤型のナビゲーションを作成します.
aラベルにaclass=「nav-link」を付ける
href=「#」ハイパーリンクの#に必要なタグのIDまたはアドレスを記入します.
クリック時に発生するイベントを設定できます.
錠剤ナビゲーションでは、垂直に位置合わせできます.
class=activeで展開されたボタンラベルを強調表示できます
nav-justified
nav-ridedでは、両端揃えを適用できます.
ナビゲーションを使用してメニューバーを作成するか、必要なテキストを表示します.
隠すこともできます.
まず、ナビゲーションの作成方法について説明します.
<body>
<div class="container">
<h1> 네비게이션 </h1>
<h4>탭형 네비게이션 </h4>
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link" href="#">메뉴1</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴2</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴3</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴4</a></li>
</ul>
<br>
<h4>탭형 네비게이션 class="active" 추가할 경우 </h4>
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link" href="#">메뉴1</a></li>
<li class="nav-item"><a class="nav-link active" href="#">메뉴2</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴3</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴4</a></li>
</ul>
<br>
<h4>알약형 네비게이션 </h4>
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#">메뉴1</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴2</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴3</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴4</a></li>
</ul>
<br>
<h4>알약형 네비게이션 class="active" 추가할 경우 </h4>
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" href="#">메뉴1</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴2</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴3</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴4</a></li>
</ul>
<br>
<h4>알약형 네비게이션은 수직으로 정렬 가능 </h4>
<div class="col-md-3">
<ul class="nav nav-pills flex-column">
<li class="nav-item"><a class="nav-link active" href="#">메뉴1</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴2</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴3</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴4</a></li>
</ul>
</div>ご覧のように、リストを宣言するときにclass=「nav nav-tabs」を使用して作成すると、オプションカード式になります.
class=「nav nav-parts」を使用して錠剤型のナビゲーションを作成します.
aラベルにaclass=「nav-link」を付ける
href=「#」ハイパーリンクの#に必要なタグのIDまたはアドレスを記入します.
クリック時に発生するイベントを設定できます.
錠剤ナビゲーションでは、垂直に位置合わせできます.
class=activeで展開されたボタンラベルを強調表示できます
nav-justified
<div class="clearfix"></div>
<h4>탭형 네비게이션 양쪽 정렬 </h4>
<ul class="nav nav-tabs nav-justified"><!--nav-justified를 통해 -->
<li class="nav-item"><a class="nav-link active" href="#">메뉴1</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴2</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴3</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴4</a></li>
</ul>
<br>
<h4>알약형 네비게이션 양쪽 정렬 </h4>
<ul class="nav nav-pills nav-justified">
<li class="nav-item"><a class="nav-link active" href="#">메뉴1</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴2</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴3</a></li>
<li class="nav-item"><a class="nav-link" href="#">메뉴4</a></li>
</ul>nav-ridedでは、両端揃えを適用できます.
Reference
この問題について(Vscodeガイド.ナビゲーション1), 我々は、より多くの情報をここで見つけました https://velog.io/@nugoory20/VSCode부트스트랩.-네비게이션-1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol