[basic] BS4 - 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> 

 

 

Nav Align (정렬・배치)

 

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

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

 

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

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

 

예제보기

 

Nav Vertical (수직 형태)

 

<ul class="nav flex-column"> 

 

예제보기

 

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> 

 

 

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>  

 

 

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

 

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

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

 

 

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-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> 

 

예제보기 

 

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-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> 

 

예제보기 

 

Nav Toggle Tab (토글탭)

 

<!-- pill 메뉴 -->

<ul class="nav nav-tabs">

    <li class="nav-item">

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

    </li>

    <li class="nav-item">

        <a class="nav-link" data-toggle="tab" href="#menu1">메뉴1</a>

    </li>

    <li class="nav-item">

        <a class="nav-link" data-toggle="tab" href="#menu2">메뉴2</a>

    </li>

</ul>

<!-- Tab 영역-->

<div class="tab-content">

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

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

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

</div>

 

예제보기

 

Nav Toggle Pill (토글알약)

 

<!-- tab 메뉴 -->

<ul class="nav nav-pills">

    <li class="nav-item">

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

    </li>

    <li class="nav-item">

        <a class="nav-link" data-toggle="pill" href="#menu1">메뉴1</a>

    </li>

    <li class="nav-item">

        <a class="nav-link" data-toggle="pill" href="#menu2">메뉴2</a>

    </li>

</ul>

<!-- Tab 영역-->

<div class="tab-content">

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

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

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

</div> 

 

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