[basic] BS5 - Nav (네브) - 간단메뉴 + 일반탭 + 알약탭

1. Nav 기본(수평형태)
2. Nav Align (정렬・배치)
3. Nav Vertical (수직 형태)
4. Nav Tab (탭)
5. Nav Pill (알약)
6. Nav Justify Tab/Pill (균등배분정렬)
7. Nav Pill + Dropdown (알약 + 드롭다운)
8. Nav Tab + Dropdown (탭 + 드롭다운)
9. Nav Toggle Tab (토글탭)
10. Nav Toggle Pill (토글알약)

Nav 기본(수평형태) 

 

<ul class="nav">

    <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 disabled" href="#">링크 비활성화</a></li>

</ul> 

 

※ BS4와 동일

Nav Align (정렬・배치)

 

<p class="text-start">왼쪽 배치 (기본값)</p>

<ul class="nav justify-content-start">...

 

<p class="text-center">가운데배치</p>

<ul class="nav justify-content-center">...

 

<p class="text-end">오른쪽배치</p>

<ul class="nav justify-content-end">...

 

PS. 왼쪽 배치 경우 기본값이라 .justify-content-start 클래스 없어도 됨.

※ BS4와 동일

Nav Vertical (수직 형태)

 

<ul class="nav flex-column"> 

 

예제보기

※ BS4와 동일

Nav Tab (탭)

<ul class="nav nav-tabs">

    <li class="nav-item"><a class="nav-link active" 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>

    <li class="nav-item"><a class="nav-link disabled" href="#">링크 비활성화</a></li>

</ul> 

 

※ BS4와 동일

Nav Pill (알약)

 

<ul class="nav nav-pills">

    <li class="nav-item"><a class="nav-link active" 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>

    <li class="nav-item"><a class="nav-link disabled" href="#">링크 비활성화</a></li>

</ul>  

 

※ BS4와 동일

Nav Justify Tab/Pill (균등배분정렬)

 

<ul class="nav nav-pills nav-justified">..</ul>

<ul class="nav nav-tabs nav-justified">..</ul> 

 

※ BS4와 동일

Nav Pill + Dropdown (알약 + 드롭다운)

 

<ul class="nav nav-pills">

    <li class="nav-item"><a class="nav-link active" href="#">링크 활성화</a></li>

    <li class="nav-item dropdown">

        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">드롭다운</a>

        <div class="dropdown-menu">

            <a class="dropdown-item" href="#">링크1</a>

            <a class="dropdown-item" href="#">링크2</a>

            <a class="dropdown-item" href="#">링크3</a>

        </div>

    </li>

    <li class="nav-item"><a class="nav-link" href="#">링크</a></li>

    <li class="nav-item"><a class="nav-link disabled" href="#">링크 비활성화</a></li>

</ul> 

 

예제보기 

cf. BS4 경우, data-toggle="dropdown" 속성 사용.

Nav Tab + Dropdown (탭 + 드롭다운)

 

<ul class="nav nav-tabs">

    <li class="nav-item"><a class="nav-link active" href="#">링크 활성화</a></li>

    <li class="nav-item dropdown">

        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">드롭다운</a>

        <div class="dropdown-menu">

            <a class="dropdown-item" href="#">링크1</a>

            <a class="dropdown-item" href="#">링크2</a>

            <a class="dropdown-item" href="#">링크3</a>

        </div>

    </li>

    <li class="nav-item"><a class="nav-link" href="#">링크</a></li>

    <li class="nav-item"><a class="nav-link disabled" href="#">링크 비활성화</a></li>

</ul> 

cf. BS4 경우, data-toggle="dropdown" 속성 사용.

Nav Toggle Tab (토글탭)

 

<!-- pill 메뉴 -->

<ul class="nav nav-tabs">

    <li class="nav-item">

        <a class="nav-link active" data-bs-toggle="tab" href="#HTML">HTML</a>

    </li>

    <li class="nav-item">

        <a class="nav-link" data-bs-toggle="tab" href="#CSS">CSS</a>

    </li>

    <li class="nav-item">

        <a class="nav-link" data-bs-toggle="tab" href="#JS">JS</a>

    </li>

</ul>

<!-- Tab 영역-->

<div class="tab-content">

    <div class="tab-pane container active" id="HTML">...</div>

    <div class="tab-pane container fade" id="CSS">...</div>

    <div class="tab-pane container fade" id="JS">...</div>

</div>

 

예제보기

cf. BS4 경우, data-toggle="tab" 속성 사용.

Nav Toggle Pill (토글알약)

 

<!-- tab 메뉴 -->

<ul class="nav nav-pills">

    <li class="nav-item">

        <a class="nav-link active" data-bs-toggle="pill" href="#HTML">HTML</a>

    </li>

    <li class="nav-item">

        <a class="nav-link" data-bs-toggle="pill" href="#CSS">CSS</a>

    </li>

    <li class="nav-item">

        <a class="nav-link" data-bs-toggle="pill" href="#JS">JS</a>

    </li>

</ul>

<!-- Tab 영역-->

<div class="tab-content">

    <div class="tab-pane container active" id="HTML">...</div>

    <div class="tab-pane container fade" id="CSS">...</div>

    <div class="tab-pane container fade" id="JS">...</div>

</div> 

 

cf. BS4 경우, data-toggle="pill" 속성 사용.

※ Tab 영역은 (tab메뉴・pill 메뉴) 소스 동일.