[Web][Bootstrap] Bootstrap v5.1 간단히 따라하기 - 2. 내비게이션 만들기

참조 : 공식 홈페이지

https://getbootstrap.kr/docs/5.1/components/navs-tabs/

내비게이션과 탭

1. 기본 내비게이션

부트 스트랩에서 내비게이션을 만들 수 있는 태그는 <ul> <ol>  뿐만 아니라 <nav> 으로 만들 수 있다. 

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">홈</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">소개</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">문의</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">연결안함</a>
  </li>
</ul>

위와 같은 코드를 보면 

내비게이션을 일련의 목록<ul></ul> or <ol></ol>안에 만들어 두었다. 

<ul class='nav' >: ul의 클래스를 nav로, 하위태그인  <li class='nav-item' >: 을  nav-item 클래스로 지정했다.

 

또 다른 방식으로 <nav class='nav'></nav>을 사용할 수도 있다.

.nav 클래스는 display :flex;을 사용하므로 <a class = 'nav-link'>을 사용해도 같은 출력이다.

또한 링크 연결을 안할려면 disabled을 입력해주면 된다.

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">홈</a>
  <a class="nav-link" href="#">소개</a>
  <a class="nav-link" href="#">문의</a>
  <a class="nav-link disabled">연결안됨</a>
</nav>

결과를 보면 링크가 걸린 곳은 파란색으로 표시되는 반면 안걸린곳은 어두운회색으로 표시된다.

 

1) 정렬하기 

내비게이션은 기본적으로 왼쪽에서 오른쪽으로 정렬되는 게 기본값이다. 

 

1-1)가운데 또는 오른쪽 정렬로 변환 :  justify-content-center/end

가운데 정렬: .justify-content-center

nav시작 태그 안에 위와 같은 명령어를 작성하면

    <ol class="nav justify-content-center">

오른쪽 정렬

    <ol class="nav justify-content-end">

 

1-2) 수직으로 정렬하기 : .flex-column / flex-sm-column (뷰포트에 따라 변형)

    <ol class="nav flex-column"">

2.꾸미기

1)탭만들기 : .nav-tabs 

	<ol class='nav nav-tabs'>

 

부트스트랩의 자바스크립트 플러그인을 생성해서 사용하면 탭할수 있는 지역을 고를 수 있다.

 

2) 채우기 : .nav-fill과 .nav-justified

위의 두개의 차이는 '각 네비 항목들의 너비를 어떻게 차지하는가 '이다. fill은 자동으로 문자길이에 맞춰서 생성되지만 justified는 모든 항목이 똑같은 너비를 가지게 된다.

<ul class="nav nav-pills nav-fill">

<nav class="nav nav-pills nav-justified">

3) 반응형으로 만들기 with flex utilities

만일 뷰포트 화면이 작아지면 보기 좋게 수직정렬되게끔 만들어 준다.

<nav class="nav nav-pills flex-column flex-sm-row">

 

3. 드롭다운 사용하기

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

 

 

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  </button>
 </div>

동적인 메뉴가 들어있는 곳에 드롭다운을 사용할 수 없다.