여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Bootstrap – Bootstrap 4 탐색
Bootstrap – Bootstrap 4 탐색
11개월전 작성
12개월전 수정



부트스트랩 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
밍구
밍구
공부 목적 블로그