bootstrap_navigation

 

<navigation>

• 기본적으로 .nav 클래스로 시작
• class="active"  활성화되어있음

 

1. 탭 형

        <ul class="nav nav-tabs">
            <li><a href="#">메뉴 1</a></li>
            <li class="active"><a href="#">메뉴 2</a></li>
            <li><a href="#">메뉴 3</a></li>
            <li><a href="#">메뉴 4</a></li>
        </ul>

 

2. 알약

        <br><br>

            <!-- 알약형 네비게이션-->
        <ul class="nav nav-pills">
            <li><a href="#">메뉴 1</a></li>
            <li class="active"><a href="#">메뉴 2</a></li>
            <li><a href="#">메뉴 3</a></li>
            <li><a href="#">메뉴 4</a></li>
        </ul>

형

 

     
        <!-- 수직 정렬 -->
        <br><br>
        <div class="col-md-3"> <!--한 화면에 4개씩 보이게-->
            <ul class="nav nav-pills nav-stacked">
                <li><a href="#">메뉴 1</a></li>
                <li class="active"><a href="#">메뉴 2</a></li>
                <li><a href="#">메뉴 3</a></li>
                <li><a href="#">메뉴 4</a></li>
            </ul>
        </div>



        <!-- 양쪽 끝정렬 -->
        <br><br>

        <div class="clearfix"></div><!-- 달려 올라오지 않도록 -->
            <ul class="nav nav-pills nav-justified">
                <li><a href="#">메뉴 1</a></li>
                <li class="active"><a href="#">메뉴 2</a></li>
                <li><a href="#">메뉴 3</a></li>
                <li class="disabled"><a href="#">메뉴 4</a></li>  <!--비활성화 표시-->
            </ul>

        <br><br>


        
        <!-- 드롭다운형식 메뉴 -->
        <ul class="nav nav-tabs">
            <li><a href="#">메뉴 1</a></li>
            <li class="active"><a href="#">메뉴 2</a></li>
            <li><a href="#">메뉴 3</a></li>
            <li class="dropdown">
                <a data-toggle="dropdown" href="#">여기클릭<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">메뉴1</a></li>
                    <li><a href="#">메뉴2</a></li>
                    <li><a href="#">메뉴3</a></li>
                    <li class="divider"></li>
                    <li><a href="#">기타 메뉴</a></li>
                </ul>
            </li>
        </ul>

        <br><br>

        <ul class="nav nav-phills">
            <li><a href="#">메뉴 1</a></li>
            <li class="active"><a href="#">메뉴 2</a></li>
            <li><a href="#">메뉴 3</a></li>
            <li class="dropdown">
                <a data-toggle="dropdown" href="#">여기클릭<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">메뉴1</a></li>
                    <li><a href="#">메뉴2</a></li>
                    <li><a href="#">메뉴3</a></li>
                    <li class="divider"></li>
                    <li><a href="#">기타 메뉴</a></li>
                </ul>
            </li>
        </ul>





    </div>
    
    <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>