bootstrap4에서 드롭다운 메뉴를 설정하는 방법

Bootarp 4 드롭다운 메뉴

추천 튜토리얼: Bootstarp 매뉴얼

목록 체재.

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

코드 해석

　.dropdown 클래스는 드롭다운 메뉴를 지정하는 데 사용됩니다. 　　.dropdown 类用来指定一个下拉菜单。

　　我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。

dc6dce4a544fdca2df29d5ac0ea9906b 元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类。

下拉菜单中的分割线

　　.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线：

<div class="dropdown-divider"></div>

下拉菜单中的标题

　　.dropdown-header 类用于在下拉菜单中添加标题：

<div class="dropdown-header">Dropdown header 1</div>

下拉菜单中的可用项与禁用项

　　.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。

　　如果要禁用下拉菜单的选项，可以使用.disabled 类。

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

下拉菜单的定位

　　如果我们想让下拉菜单右对齐，可以在元素上的 .dropdown-menu 类后添加.dropdown-menu-right 类。

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

指定向上弹出的下拉菜单

　　如果你希望下拉菜单向上弹出，可以将 dc6dce4a544fdca2df29d5ac0ea9906b 元素的 class="dropdown" 替换为 "dropup"

　버튼이나 링크를 사용하여 드롭다운 메뉴를 열 수 있습니다. 버튼이나 링크에 .dropdown-toggle 및 data-toggle="dropdown"를 추가해야 합니다. 속성.

dc6dce4a544fdca2df29d5ac0ea9906b .dropdown-menu 클래스를 추가하여 실제 드롭다운 메뉴를 설정한 다음 .dropdown-item 클래스를 옵션에 추가합니다. 드롭다운 메뉴.
드롭다운 메뉴에서 줄 구분

…é»', Tahoma , Arial, sans-serif">

　
.dropdown-divider 클래스는 드롭다운 메뉴에 가로 구분선을 만드는 데 사용됩니다:

<div class="dropup">

🎜🎜🎜🎜🎜드롭의 제목 down menu🎜🎜🎜 🎜🎜🎜　.dropdown-header 🎜🎜 클래스는 드롭다운 메뉴에 헤더를 추가하는 데 사용됩니다: 🎜🎜

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Tablet</a>
    <a class="dropdown-item" href="#">Smartphone</a>
  </div></div>

🎜🎜🎜드롭다운 메뉴에서 사용 가능 및 비활성화된 항목 🎜🎜 🎜🎜　.active 클래스는 드롭다운 메뉴 옵션을 강조 표시합니다(파란색 배경 추가). 🎜🎜　드롭다운 메뉴 옵션을 비활성화하려면 .disabled 클래스를 사용하면 됩니다. 🎜rrreee🎜🎜🎜드롭다운 메뉴 위치 지정🎜🎜🎜🎜🎜 드롭다운 메뉴를 오른쪽 정렬하려면 .dropdown-menu 뒤에 <code>.dropdown-menu-를 추가하면 됩니다. 요소 오른쪽 클래스 클래스. 🎜🎜🎜rrreee🎜🎜🎜 팝업되는 드롭다운 메뉴를 지정하세요🎜🎜🎜🎜🎜🎜🎜 드롭다운 메뉴가 팝업되도록 하려면 class="dropdown" "dropup"을 사용하여 dc6dce4a544fdca2df29d5ac0ea9906b 요소:🎜rrreee🎜🎜🎜버튼에 드롭다운 메뉴를 설정하세요🎜🎜🎜🎜🎜🎜 버튼:🎜🎜rrreee🎜🎜🎜🎜🎜

위 내용은 bootstrap4에서 드롭다운 메뉴를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!