부트스트랩에 풀업 메뉴가 있나요?

bootstrap에는 풀업 메뉴가 있습니다. 버튼 메뉴는 풀다운뿐만 아니라 풀업도 가능합니다. 기본 드롭다운을 풀업으로 변경하기만 하면 됩니다. 요소 위에 드롭다운 메뉴를 트리거하는 상위 요소입니다. 구문은 "

"입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 부트스트랩 버전 5, DELL G3 컴퓨터

bootstrap에는 풀업 메뉴가 있습니다

에 .dropup을 추가하여 요소 위에 드롭다운 메뉴를 트리거합니다. 부모 요소.

버튼 메뉴는 풀다운뿐만 아니라 풀업도 가능합니다. 기본 드롭다운을 풀업으로 변경하려면 .btn-group 컨테이너에 .dropup 클래스를 추가하기만 하면 됩니다. 예:

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>
<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

로그인 후 복사

출력 결과:

Expand Knowledge

우선, 드롭다운 메뉴는 버튼, 드롭다운 아이콘, 정렬되지 않은 목록으로 구성되어 있다는 점을 이해해야 합니다.

드롭다운 메뉴 트리거와 드롭다운 메뉴는 .dropdown에 포함됩니다.

버튼 태그에서 사용되는 속성은            

class="btn btn-default dropdown-toggle"     type="button" 
                id="dropdownMenu1"         data-toggle="dropdown"         aria-haspopup="true" 
                aria-expanded="true"

로그인 후 복사

스팬 태그에서 사용되는 속성 값은            

태그 정의 없음 시퀀스 목록

참고: 버튼을 왼쪽과 오른쪽으로 정렬하려는 경우 오른쪽의 경우 드롭다운 메뉴 오른쪽을 사용하여 오른쪽으로 정렬하고, 드롭다운 메뉴 왼쪽을 사용하여 왼쪽으로 정렬할 수 있습니다.

순서가 지정된 목록요소

                                                                         ~           .性 OL 일반적으로 사용되는 속성에는 유형이 포함됩니다. 목록에 사용되는 레이블 유형을 지정합니다.

• 요소

                                                                                  ~                                                  . L & lt; li & gt; 레이블은 순서 목록(& lt; ol & gt;) 및 비직렬 목록(& lt; ul & gt;)에 사용될 수 있습니다.下 Line 버튼을 누르면 메뉴가 드롭됩니다. +                                                             플러스

  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

  로그인 후 복사

  관련 권장 사항:

  부트스트랩 튜토리얼

위 내용은 부트스트랩에 풀업 메뉴가 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!