BootStrap - 네비게이션 바

1. Navbar

• 네비게이션에 관한 프레임워크를 사용해서 반응형 네비게이션 바를 만들 수 있습니다.

1.1 Navbar 사용 하기

  <nav class="navbar navbar-light bg-light">
        <a href="#" class="navbar-brand"> Navbar </a>
    </nav>
    <nav class="navbar navbar-dark bg-dark">
        <a href="#" class="navbar-brand"> Navbar </a>
    </nav>

<!-- 
navbar-light
텍스트 요소가 밝은 배경에서 잘보이게 설정 (폰트색이 검정으로 변함)

bg-light
배경색을 하얀색에 가깝게 설정

navbar-dark 
텍스트 요소가 밝은 배경에서 잘보이게 설정 (폰트색이 검정으로 변함)

bg-dark
배경색을 검정색에 가깝게 설정
-->

1.1.1 네비게이션 링크 삽입

 <nav class="navbar navbar-light bg-light">
        <a href="#" class="navbar-brand"> Navbar </a>
    </nav>
    <nav class="navbar navbar-dark bg-dark">
        <a href="#" class="navbar-brand"> Navbar </a>
	
      	<!-- 네비게이션 링크 -->
        <div class="navbar-nav">
            <a href="#" class="nav-item nav-link">Home</a>
            <a href="#" class="nav-item nav-link">About</a>
            <a href="#" class="nav-item nav-link">Contact</a>
        </div>
    </nav>

<!--
navbar-nav
가벼운 네비게이션 항목을 만들 때 사용 (드롭다운 지원)

nav-item
네비게이션 그룹에 포함된 요소들

nav-link
네비게이션 링크에 대한 스타일을 지정 
-->

1.1.2 링크요소에 collapse 적용

  <!-- navbar-expand를 사용해야 숨겨진 링크요소가 보임 -->
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a href="#" class="navbar-brand"> Navbar </a>

        <!-- collpase 로 링크 숨김 -->
        <div class="collapse navbar-collapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link">Home</a>
                <a href="#" class="nav-item nav-link">About</a>
                <a href="#" class="nav-item nav-link">Contact</a>
            </div>
        </div>
    </nav>
    
 <!-- 
collpase 
요소를 숨기거나 드러냄 (사용 시, 링크 요소가 숨겨짐)

navbar-collpase
navbar 요소에 적용 

navbar-expand-md
뷰포트 너비가 미디움이상의 사이즈가 되면, collapse로 숨겨진 항목이 보이고
그 이하는 보이지 않는다.
 -->

1.1.3 네비게이션 아이콘 생성

  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a href="#" class="navbar-brand"> Navbar </a>
    
		<!-- 아이콘 생성 -->
        <button class="navbar-toggler" data-toggle="collapse" data-target="#expand">
            <span class="navbar-toggler-icon"></span>
        </button>
    
        <!-- 부트스트랩의 일부, 요소를 숨기거나 나타내게 할 수 있음 -->
        <div class="collapse navbar-collapse" id="expand">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link">Home</a>
                <a href="#" class="nav-item nav-link">About</a>
                <a href="#" class="nav-item nav-link">Contact</a>
            </div>
        </div>
    </nav>

<!--
navbar-toggler
아이콘을 누를 수 있는 토글버튼이 생성됨

navbar-toggler-icon
토글 버튼이 아이콘으로 스타일링 됩니다.

data-toggle="collapse"
collapse 속성으로 숨겨진 요소를 연결합니다.

data-target="#expand"
아이콘을 클릭햇을 때, 보여줘야할 요소들의 그룹(div)의 ID명을 적어 연결합니다.
-->

1.1.4 토글 버튼에 폼 추가

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a href="#" class="navbar-brand"> Navbar </a>

        <button class="navbar-toggler" data-toggle="collapse" data-target="#expand">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- 부트스트랩의 일부, 요소를 숨기거나 나타내게 할 수 있음 -->
        <div class="collapse navbar-collapse" id="expand">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link">Home</a>
                <a href="#" class="nav-item nav-link">About</a>
                <a href="#" class="nav-item nav-link">Contact</a>
            </div>

          	<!-- 폼 추가 -->
            <form class="form-inline ml-auto">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>

<!--
ml-auto 
전체폼에서 좌측에 마진이 자동으로 설정된다
-->

1.1.5 fixed 컨테이너 요소 고정

<!-- fixed-top을 사용하면, 네비게이션은 스크롤을 내려도 화면 상단에 고정 된다 -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        생략
    <div class="container">
      텍스트더미
  </div>
      
<!-- 
fixed-bottom
하단 고정
-->

1.1.6 sticky 컨테이너 요소 고정

<h1 class="display-1 text-center">hello</h1>
	<!-- sticky를 사용하면, 속성을 사용한 요소위에 다른 요소가 있더라도 스크롤을 내리면
 고정된 요소만 보인다. -->
    <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
     생략
      <div class="container">
        텍스트더미
      </div>