[Bootstrap] 부트스트랩 컴포넌트 - 네비게이션

컴포넌트 - 네비게이션

 

동작이 있는 네비게이션을 구성하기 위해서 자바스크립트가 필요하다.

bootstrap.min.js가 JQuery에 의존성이 있다.

 

# JQuery + bootstrap.min.js 

☀ Jquery - bootstrap.min.js 순서 ☀

JQuery가 상단에 선언되고 bootstrap.min.js 가 들어가는 순서

bootstrap.min.css">   

<!-- bootstrap min.js는 jquery하단에 나와야한다! jquery가 의존성으로 인해 먼저 나와야한다. -->
jquery-3.6.0.min.js"        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">  bootstrap.min.js"></script>

 

# 네비게이션 

http://bootstrapk.com/components/#nav

콤포넌트 · 부트스트랩

- 화면 크기에 따라 네비게이션이 다르게 보인다.

- 네비게이션은 크게 header와 collapse로 나뉜다.

 

 

# nav 색상

<!-- 흰색(기본) -->
<nav class="navbar navbar-default">
<!-- 다크(색상반전)  -->
<nav class="navbar navbar-inverse">

 

# navbar-brand

<div class="navbar-header">
 
</div>

 

<div class="navbar-header">
   <a class="navbar-brand" href="#">navigation</a>
</div>

 

# 햄버거 메뉴

화면이 작은 모바일 상태에서 보이는 오른쪽 메뉴 버튼

id와 target을 맞추지 않아서 비활성화 된 버튼

오른쪽 메뉴 버튼 활성화

 # 활성화 된 오른쪽 메뉴 버튼

오른쪽 메뉴바를 클릭했을 때 <li>메뉴로 추가된 항목들이 펼쳐져야 한다.

id와 target을 맞춰줘야 토글 버튼을 클릭할때 작성한 메뉴들이 나타난다.

 

오른쪽 메뉴바_button ➡ data-target="#nav_menu"
collapse_div ➡ id="nav_menu"

 

<!-- 오른쪽 메뉴바 -->        <button type="button" class="collapsed navbar-toggle" data-toggle="collapse"                   data-target="#nav_menu" aria-expanded="false">                         <span class="sr-only">Toggle navigation</span>                         <!-- icon-bar의 개수에 따라 햄버거버튼의 모양이 달라짐 -->                         <span class="icon-bar"></span>                         <span class="icon-bar"></span>                         <span class="icon-bar"></span>         </button>        <!-- collapse 메뉴 -->         <div class="collapse navbar-collapse" id="nav_menu">                     <ul class="nav navbar-nav">                         <li class="active">                             <a href="">HTML</a>                         </li>                         <li>                             <a href="">CSS</a>                         </li>                         <li>                             <a href="">PYTHON</a>                         </li>                         <li>                             <a href="">Javascript</a>                         </li>                     </ul>          </div>

 

icon-bar 두개만 작성했을 때&amp;nbsp;

 

<button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#nav_menu" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <!-- icon-bar의 개수에 따라 햄버거버튼의 모양이 달라짐 -->
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
</button>