본문 바로가기
.Net

.Net bootstrap - Tab Menu 만들기

by 올엠 2020. 11. 13.
반응형

한 화면에 여러 탭을 이용해 표현하고자 하는 경우, 기능별로 구분해서 보여줘야 한다면 탭으로 구분하여 개발이 가능하다. 기본적으로 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>&nbsp;&nbsp;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>&nbsp;&nbsp;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>&nbsp;&nbsp;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 글을 확인해 보기 바란다.

https://asecurity.dev/entry/Netcore-%EB%AC%B4%EB%A3%8C-Icon-Font-Awesome-5-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

 

.Net/core - 무료 Icon, Font Awesome 5 사용하기

기존에 glyphicon을 사용하다 일부 단조로움이 있어 찾아보던 중 Font Awesome에서 제공하는 아이콘이 더 다양하여 상황에 맞게 사용할 수 있을 것으로 판단, 이를 적용하면 글을 정리해 본다. https://as

asecurity.dev

 

반응형