"입니다."/> "입니다.">
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!