반응형
한 화면에 여러 탭을 이용해 표현하고자 하는 경우, 기능별로 구분해서 보여줘야 한다면 탭으로 구분하여 개발이 가능하다. 기본적으로 bootstrap4에서 제공하는 nav-tabs 를 활용하여 사용이 가능하다.
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-nix-tab" data-toggle="tab" href="#nav-nix" role="tab"
aria-controls="nav-nix" aria-selected="true"><i class="fab fa-linux"> </i> Linux</a>
<a class="nav-item nav-link" id="nav-win-tab" data-toggle="tab" href="#nav-win" role="tab"
aria-controls="nav-win" aria-selected="false"><i class="fab fa-windows"> </i> Windows</a>
<a class="nav-item nav-link" id="nav-analyze-tab" data-toggle="tab" href="#nav-analyze" role="tab"
aria-controls="nav-analyze" aria-selected="false"><i class="fab fa-elementor"> </i> Analyze</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-nix" role="tabpanel" aria-labelledby="nav-nix-tab">
...1
</div>
<div class="tab-pane fade" id="nav-win" role="tabpanel" aria-labelledby="nav-win-tab">
...2
</div>
<div class="tab-pane fade" id="nav-analyze" role="tabpanel" aria-labelledby="nav-analyze-tab">
...3
</div>
</div>Icon은 앞서 작성한 Font Awesome 글을 확인해 보기 바란다.
.Net/core - 무료 Icon, Font Awesome 5 사용하기
기존에 glyphicon을 사용하다 일부 단조로움이 있어 찾아보던 중 Font Awesome에서 제공하는 아이콘이 더 다양하여 상황에 맞게 사용할 수 있을 것으로 판단, 이를 적용하면 글을 정리해 본다. https://as
asecurity.dev
반응형
'.Net' 카테고리의 다른 글
| .Net 5 - Visual Studio 사용하기 (0) | 2020.11.18 |
|---|---|
| Net - System.Data.SqlTypes.SqlNullValueException: Data is Null (0) | 2020.11.17 |
| .Net/core - 무료 Icon, Font Awesome 5 사용하기 (0) | 2020.11.13 |
| .Net/C#/Core - How to Get Client IP on HTTP (0) | 2020.11.10 |
| .NET core 3.1 - ActionLink glyphicon 사용하기 (0) | 2020.11.09 |
