Bootstrap의 드롭다운 메뉴 클래스(드롭다운 메뉴)에 대한 간략한 설명

Bootstrap에는 전체 드롭다운 메뉴 구성 요소가 내장되어 있습니다. 이 글에서는 Bootstrap의 드롭다운 메뉴 클래스를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

드롭다운 메뉴는 전환 가능한 관련 링크 세트를 표시하는 데 사용되는 매우 일반적인 효과로, 웹 페이지 레이아웃 공간을 절약하고 웹 페이지 레이아웃을 간결하고 질서있게 만들 수 있습니다.

Bootstrap에는 탐색, 버튼 등과 같은 다양한 요소에 사용할 수 있는 드롭다운 메뉴 구성요소가 내장되어 있습니다. 다른 요소와 결합하여 다양한 메뉴 효과를 디자인할 수도 있습니다.

드롭다운 메뉴의 대화형 동작에는 드롭다운 메뉴 플러그인(dropdown.js)의 지원도 필요하므로 드롭다운 메뉴 구성 요소를 사용할 때 dropdown.js 파일도 도입되어야 합니다.

관련 추천: "bootstrap Tutorial"

드롭다운 메뉴 만들기

Bootstrap의 드롭다운 메뉴는 모두 목록을 기반으로 구현되며 순서가 지정되지 않은 목록(

) 또는 순서 목록(

), 설명 목록(

)은 아직 지원되지 않습니다.

또는

에 .dropdown-menu 클래스를 추가하여 드롭다운 메뉴를 만드세요. 예:

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  <li><a tabindex="-1" href="#">Action</a></li>
  <li><a tabindex="-1" href="#">Another action</a></li>
  <li><a tabindex="-1" href="#">Something else here</a></li>
</ul>

효과는 그림 3-8에 표시됩니다.


그림 3-8 드롭다운 메뉴

일반적으로 드롭다운 메뉴는 기본적으로 숨겨야 하며 사용자가 클릭할 때만 숨겨야 합니다. 버튼이나 링크를 클릭하면 표시됩니다. 따라서 하이퍼링크나 버튼 및 드롭다운 메뉴를 class="dropdown" 또는 position:relative;로 컨테이너에 래핑하고 버튼이나 링크에 data-toggle="dropdown" 속성을 추가해야 합니다. 이렇게 하면 드롭다운 메뉴가 기본적으로 숨겨지고 버튼이나 링크를 클릭할 때만 활성화되어 표시됩니다. 예:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

이때 브라우저에서 미리보기할 때 버튼을 볼 수 있습니다. 버튼을 클릭하면 드롭다운 메뉴가 활성화되어 표시됩니다. 효과는 그림 3-9에 표시됩니다.


그림 3-9 드롭다운 메뉴 활성화

기본적으로 하위 메뉴는 드롭다운 형식으로 나타납니다. 풀업 형식으로 팝업하려면 전체 드롭다운 메뉴를 .dropup 컨테이너로 감싸면 됩니다.

<div class="dropup">
…
</div>

효과는 그림 3-10에 표시됩니다.


그림 3-10 풀업 메뉴

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 Bootstrap의 드롭다운 메뉴 클래스(드롭다운 메뉴)에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!