부트스트랩 4 탐색

탐색 메뉴

간단한 가로 메뉴를 만들려면 <ul> 요소에 .nav 클래스를 추가한 다음 각 <li> 요소에 .nav-item 클래스를 추가하고 해당 링크에 .nav-link 클래스를 추가하자.

예제

<ul class="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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

정렬된 탐색

탐색을 중앙에 배치하는 .justify-content-center 클래스를 추가 하고 탐색을 오른쪽 정렬하는 .justify-content-end 클래스를 추가한다.

예제

<!-- Centered nav -->
<ul class="nav justify-content-center">

<!-- Right-aligned nav -->
<ul class="nav justify-content-end">

수직 탐색

수직 탐색을 생성하려면 .flex-column 클래스를 추가한다.

예제

<ul class="nav flex-column">

탭

.nav-tabs 탐색 메뉴를 수업과 함께 탐색 탭으로 전환한다.
활성/현재 링크에 .active 클래스를 추가한다.

예제

<ul class="nav nav-tabs">
  <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>

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기