네이게이션 바는 상단에 로그인, 로그아웃 또는 메인페이지로 이동 등등 을 표현해야할때 사용할 수 있다.
jQuery + bootstrap.min.js 두가지를 필요로 한다.
jquery cdn을 검색해 본다.
jQuery CDN
The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr
code.jquery.com
jQuery 3.x 버전에서 minified 텍스트를 클릭해준다.
소스코드를 긁어와서 head태그 자식요소로 넣어준다.
bootstrap스크립트 태그는 반드시 jquery스크립트 태그 하단에 넣어야한다. bootstrap이 jquery에 의존성을 가지고 있기 때문이다.
jQuery(제이쿼리)는 웹 사이트를 제작할 때 자주 사용되는 기능들을 쉽게 사용할 수 있도록 모아놓은 자바스크립트 라이브러리를 말한다. 복잡한 상호작용을 하는 자바스크립트를 쉽게 추가할수 있도록 해주면서 다양한 웹 브라우저에서 동작하도록 만들어준다. 제이쿼리를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있다.
이러한 제이쿼리는 오늘날 가장 인기 있는 자바스크립트 라이브러리 중 하나다. jQuery사용방법중에 cdn의 minified를 이용하면 용량이 대폭줄고 속도도 증가하며 트레픽도 줄어든다.
www.bootstrapcdn.com/legacy/bootstrap/
Bootstrap Legacy
Older versions of Bootstrap hosted on a CDN
www.bootstrapcdn.com
부트스트렙에서는 v3.4.1버전에서 Complete Javascript부분을 긁어온다.
그리고 jquery스크립트 태그 밑에 추가해준다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>네비게이션</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
콤포넌트 · 부트스트랩
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
bootstrapk.com
"네비게이션 바"를 찾아서 참고하면 된다.
<div class="container" style="padding-top: 100px">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
</div>
<div class="collapse navbar-collapse" id="nav_menu">
</div>
</div>
</nav>
</div>여기서 보면 알 수 있듯이, navbar-header부분과 collapse navbar-collapse로 나누어진걸 볼 수 있다.
navbar-inverse는 화면 색상에 반전을 주는 것이다.
<div class="container" style="padding-top: 100px">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<!-- 오른쪽 메뉴바 -->
<button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#nav_menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
bootstrap 강의
</a>
</div>
<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>
</div>
</nav>
</div>메뉴바는 버튼으로 만들어지는데, navbar-header부분에 넣어야한다.
navbar-collapse는 navbar-header안에있는 button과 연결하려면, id가 같아야한다.
그래서 navbar-collapse안에 data-target값과 navbar-collapse에 id값이 같은걸 알 수 있다.
또한 class="icon-bar"가 3개가 있어야지 메뉴바 부분에 줄 3개가 그어진다.
li태그 중에 HTML부분은 class="active"를 해서 버튼이 눌린것처럼 미리 보여지게 만들었다.
