[Bootstrap] Navbars

기타/Bootstrap

[Bootstrap] Navbars

glorypang 2025. 3. 25. 10:26

728x90

SMALL

1. 기본 구조

`.navbar` 클래스 사용
`.navbar-expand-*` 클래스 사용 시, 해당 크기 이상에서 가로형으로 전환됨 (반응형)
`.navbar-nav` 내부에 `.nav-item`과 `.nav-link` 조합 사용

<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
     <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

<!-- Black background with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>

<!-- Blue background with white text -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

2. 수직 Navbar

`.navbar-expand-*` 클래스를 제거하면 항상 수직 상태 유지

<nav class="navbar bg-light">...</nav>

3. 정렬 옵션

`justify-content-center`: 가운데 정렬
`justify-content-end`: 오른쪽 정렬

<nav class="navbar justify-content-center">...</nav>

4. 색상 및 텍스트 색상

`.bg-*` 클래스로 배경색 지정 (`primary`, `dark`, `light` 등)
`.navbar-dark`: 흰색 텍스트
`.navbar-light`: 검정 텍스트

<nav class="navbar bg-dark navbar-dark">...</nav>

5. 로고/브랜드 (`.navbar-brand`)

프로젝트명이나 로고용으로 사용
이미지도 함께 사용 가능 (이미지 자동 크기 조정됨)

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>


<!-- 혹은 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill"> 
    </a>
  </div>
</nav>

6. 텍스트만 표시 (`.navbar-text`)

링크가 아닌 텍스트를 올바르게 정렬하고 스타일링할 때 사용

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">Navbar text</span>
  </div>
</nav>

7. 반응형 토글 버튼 (Collapsible)

`.navbar-toggler`, `data-bs-toggle="collapse"` 속성으로 메뉴를 접고 펼 수 있음
메뉴는 `.collapse .navbar-collapse` 내부에 위치

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <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>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

8. 드롭다운 메뉴

`.dropdown` 구조 사용
`data-bs-toggle="dropdown"` 속성 필수

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link</a></li>
    <li><a class="dropdown-item" href="#">Another link</a></li>
    <li><a class="dropdown-item" href="#">A third link</a></li>
  </ul>
</li>

9. 폼 + 버튼 포함

검색 폼이나 버튼도 `.d-flex`로 함께 넣을 수 있음

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Search">
        <button class="btn btn-primary" type="button">Search</button>
      </form>
    </div>
  </div>
</nav>

10. 고정 Navbar

클래스	설명
`.fixed-top`	페이지 상단 고정
`.fixed-bottom`	페이지 하단 고정
`.sticky-top`	스크롤 시 상단에 고정됨 (IE11 미지원)

<nav class="navbar fixed-top bg-dark navbar-dark">...</nav>

728x90

LIST