9. 부트스트랩 내비게이션2 내비게이션바

Bootstrap 4

부트스트랩 내비게이션2 내비게이션바

기본 구조는 아래와 같습니다.

<header class="navbar">
  <nav>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
      </ul>
   </nav>
</header>

배경색상을 추가하여 영역을 구분합니다.

<header class="navbar bg-light">

반응형웹 내비게이션 바

반응형웹을 적용하여 필요한 디바이스 크기에 따라 내비게이션을 수직/수평으로 배치할 수 있습니다.

.navbar-expand-xl , lg , md , sm

<header class="navbar navbar-expand-sm">
<!--small screen일 경우(모바일) 내비게이션을 수직으로 배치합니다.-->

내비게이션 바 가운데정렬

가운데 정렬 시 .justify-content-center 클래스를 적용합니다.

<header class="navbar navbar-expand-sm bg-light justify-content-center">

내비게이션 바 로고

.navbar-brand 브랜드/로고/프로젝트명으로 사용합니다.

<h1 class="navbar-brand"><a href="#">Logo</a></h1>

모바일 내비게이션 바

모바일로 적용하고자 하는 button 요소에 클래스로 navbar-toggler을 적용하고 이어서

data-toggle="collapse" data-target="#내비게이션아이디명"을 작성합니다.

button 내부에는 span을 추가하여 navbar-toggler-icon 클래스명을 적용합니다.

모바일 내비게이션 바(아이디 호출)

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#호출아이디명">
    <span class="navbar-toggler-icon"></span>
</button>

기본 내비게이션 바(아이디 지정)

<div class="collapse navbar-collapse" id="아이디지정">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
</div>

내비게이션 바 검색 폼

form 요소와 class="form-inline" 등을 그룹화하여 사용합니다.

form-control 클래스를 적용하면 input 요소를 간편하게 디자인처리할 수 있습니다.

<form class="form-inline" action="#" method="post">
    <input class="form-control" type="text">
    <button class="btn" type="submit">검색</button>
</form>

내비게이션 바 일반텍스트

navbar-text 클래스를 사용해 일반 문자를 내비게이션에 사용합니다.

<span class="navbar-text">Navbar text</span>

내비게이션 바 고정 레이아웃

position:fixed를 활용하여 fixed-top을 이용하여 페이지 상단에 내비게이션을 고정합니다.

<nav class="navbar fixed-top"></nav>

position:fixed를 활용하여 fixed-bottom을 이용하여 페이지 하단에 내비게이션을 고정합니다.

<nav class="navbar fixed-bottom"></nav>

스크롤을 내리면 고정되는 내비게이션 레이아웃

<nav class="navbar sticky-top"></nav>

Comments, Trackbacks