BootStrap5(BS5) 공부하기 7

드롭다운은 다음과 같이 구성하면 된다. 먼저 dropdown클래스를 만들고, 그 안에 토글버튼을 만든다. 그 뒤 정렬되지 않은 리스트로 dropdown 메뉴를 만든다.

  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropdown button
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link 1</a></li>
      <li><a class="dropdown-item" href="#">Link 2</a></li>
      <li><a class="dropdown-item" href="#">Link 3</a></li>
    </ul>
  </div>

드롭다운 디바이더를 이용하면 수평 border를 이용해 드롭다운 메뉴를 나눌 수 있다.

<li><hr class="dropdown-divider"></li>

드롭다운 헤더를 이용하면 드롭다운 메뉴 내부에 헤더를 추가할 수 있다.

<li><h5 class="dropdown-header">Dropdown header 1</h5></li>

드롭다운 메뉴 내부에 하이라이트를 주고 싶다면 active를 이용하고, disabled를 줄 수도 있다.

    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Normal</a></li>
      <li><a class="dropdown-item active" href="#">Active</a></li>
      <li><a class="dropdown-item disabled" href="#">Disabled</a></li>
    </ul>

dropend나 dropstart 메뉴도 만들 수 있는데, 이때 화살표 모양은 자동으로 추가된다.

<div class="dropdown dropend">
<div class="dropdown dropstart">

dropend는 오른쪽으로 화살표가 생기고, dropstart는 왼쪽으로 화살표가 생긴다.

드롭박스 메뉴가 오른쪽 정렬되게 하고 싶으면

<div class="dropdown dropdown-menu-end">

를 사용한다. (드롭박스 메뉴의 디폴트 값은 왼쪽 정렬이다.)

드롭박스 메뉴가 위쪽으로 나오게 하고 싶으면 dropup을 사용한다.

<div class="dropup">

드롭박스에서는 dropdown-item이외에 dropdown-item-text요소도 있고, <span> 태그를 이용하면 텍스트 자체로 출력하는 것도 가능하다.

    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link 1</a></li>
      <li><a class="dropdown-item" href="#">Link 2</a></li>
      <li><a class="dropdown-item" href="#">Link 3</a></li>
      <li><a class="dropdown-item-text" href="#">Text Link</a></li>
      <li><span class="dropdown-item-text">Just Text</span></li>
    </ul>

접이식버튼은 내용을 숨겼다가 보여줄때 사용한다.

  <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>

위처럼 버튼에 data-bs-toggle로 collapse를 주고, id를 부여해 숨길 내용들을 배치해준다.
a태그에서는 href를 data-bs-target대신 href를 사용하면 된다.

  <a href="#demo" class="btn btn-primary" data-bs-toggle="collapse">Simple collapsible</a>
  <div id="demo" class="collapse">

접이식버튼은 디폴트가 내용이 숨겨진 것이지만, 만약 보여지게 하고 싶다면 아래와 같이 한다.

<div id="demo" class="collapse show">

내용이 들어가는 div의 클래스에 show를 붙여준다.

접이식버튼과 비슷한 아코디언버튼도 만들 수 있는데, data-bs-parent를 사용해서 지정된 부모 아래의 모든 요소가 닫히도록 설정한다.

  <div id="accordion">
    <div class="card">
      <div class="card-header">
        <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </div>
      <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
      </div>
      <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </div>
      <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
  </div>

대략보자면, div로 아코디언을 만들고, 그 내부에 카드를 세 개 생성한 후, 헤더와 바디를 넣는 식이다. 헤더에는 아이디를 선언하고, 바디에서는 그 id를 연결해준다.

만약 수평적인 메뉴를 만들고 싶다면 nav 메뉴를 이용한다.

  <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>

정렬되지 않은 리스트로 nav를 생성하고, 아이템을 집어 넣는다. nav역시 disabled로 생성이 가능하다.

nav메뉴를 정렬하려면

<ul class="nav justify-content-center">
<ul class="nav justify-content-end">

와 같이한다.

만약 수직적인 nav를 만들고 싶다면

<ul class="nav flex-column">

와 같이하면 된다.

nav메뉴를 네비게이션 탭으로 바꿀 수 있다.

<ul class="nav nav-tabs">

이렇게만 해주면 된다. 만약 탭과 비슷하지만 pill형식으로 하고 싶다면

<ul class="nav nav-pills">

처럼 한다. pill형식이나 탭을 동일한 너비로 정의하고 싶다면

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

처럼 해주면 된다. pill형식에 드롭다운을 넣어주고 싶으면

  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Link 1</a></li>
        <li><a class="dropdown-item" href="#">Link 2</a></li>
        <li><a class="dropdown-item" href="#">Link 3</a></li>
      </ul>
    </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>

위와 같이 nav-pills의 내부 아이텐에 토글을 넣는다. tab도 마찬가지다.

동적인 토글 탭을 만들 수도 있다.

  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
    </li>
  </ul>
  
    <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>

nav탭과 탭판넬을 구분해 구현하고 id로 연결시켜준다. 탭을 누를때 효과를 주고 싶으면 fade로 효과를 주면된다.

nav pill도 같이 하면 된다.