반응형 네비게이션바 만들기

<header> 태그에 넣기(부트스트랩 버젼 주의)

<!-- 제이쿼리 -->
   <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

 

navbar 구성

    <!-- nav 상단 고정-->
     <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#" style="padding: 15px 10px;">
                    <img alt="Brand" src="./img/logo.png" class="img-responsive" style="height: 30px; width: auto;">
                </a>
                <!-- 햄버거 버튼 :data-target 에 메뉴div 아이디 넣기  -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- 네비게이션 메뉴 -->
            <div id="navbar" class="navbar-collapse collapse" aria-expanded="false">
                <ul class="nav navbar-nav navbar-right">
                    <li role="presentation"><a href="#">portfolio</a></li>
                    <li role="presentation"><a href="#">contact Us</a></li>
                    <li role="presentation"><a href="#">Place</a></li>
                </ul>
            </div>
        </div>
    </nav>

 

 

<결과>