Bootstrap 5 드롭다운 목록

기본 드롭다운 목록

드롭다운 메뉴는 전환할 수 있는 메뉴로, 사용자가 사전 정의된 목록에서 값을 선택할 수 있습니다：

예제

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    드롭다운 버튼
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">링크 1</a></li>
    <li><a class="dropdown-item" href="#">링크 2</a></li>
    <li><a class="dropdown-item" href="#">링크 3</a></li>
  </ul>
</div>

본인이 직접 시도해 보세요

예제 설명

.dropdown 클래스를 사용하십시오.

下拉메뉴를 열려면 설정된 .dropdown-toggle 类和 data-toggle="dropdown" 属性的按钮或链接。

将 .dropdown-menu 类添加到 <div> 元素，可实际构建下拉菜单。然后将 .dropdown-item 类添加到下拉菜单中的每个元素（链接或按钮）。

下拉列表分隔线

.dropdown-divider 类用于通过水平细边框分隔下拉菜单中的链接：

예제

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

본인이 직접 시도해 보세요

下拉列表标题

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

예제

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

본인이 직접 시도해 보세요

禁用的和活动的项目

使用 .active 类突出显示特定的下拉项（添加蓝色背景色）。

下拉列表中的某个项目，请使用 .disabled 类（在悬停时获得浅灰色文本颜色和 "no-parking-sign" 图标）。

예제

<li><a class="dropdown-item" href="#">普通的</a></li>
<li><a class="dropdown-item active" href="#">活动的</a></li>
<li><a class="dropdown-item disabled" href="#">禁用的</a></li>

본인이 직접 시도해 보세요

下拉列表位置

通过将 .dropend 或 .dropstart 类添加到下拉元素，来创建 "dropend" 或 "dropstart" 菜单。请注意，插入符号/箭头是自动添加的：

Dropright

<div class="dropdown dropend">

본인이 직접 시도해 보세요

Dropleft

<div class="dropdown dropstart">

본인이 직접 시도해 보세요

下拉列表右对齐

右对齐下拉菜单，请将 .dropdown-menu-end 类添加到带有 .dropdown-menu 的元素：

예제

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

본인이 직접 시도해 보세요

上拉列表

下拉菜单向上展开而不是向下展开希望，class="dropdown" 的 <div> 元素更改为 "dropup"：

예제

<div class="dropup">

본인이 직접 시도해 보세요

드롭다운 텍스트

.dropdown-item-text 드롭다운 항목에 순수 텍스트를 추가하거나 링크에 기본 링크 스타일을 추가하는 데 사용됩니다.

예제

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">링크 1</a></li>
  <li><a class="dropdown-item" href="#">링크 2</a></li>
  <li><a class="dropdown-item" href="#">링크 3</a></li>
  <li><a class="dropdown-item-text" href="#">텍스트 링크</a></li>
  <li><span class="dropdown-item-text">순수 텍스트</span></li>
</ul>

본인이 직접 시도해 보세요

복합 버튼과 드롭다운 목록

예제

<div class="btn-group">
  <button type="button" class="btn btn-primary">huawei</button>
  <button type="button" class="btn btn-primary">dji</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">폰</a></li>
      <li><a class="dropdown-item" href="#">태블릿 컴퓨터</a></li>
    </ul>
  </div>
</div>

본인이 직접 시도해 보세요

수직 복합 버튼과 드롭다운 목록

예제

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">huawei</button>
  <button type="button" class="btn btn-primary">dji</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">폰</a></li>
      <li><a class="dropdown-item" href="#">태블릿 컴퓨터</a></li>
    </ul>
  </div>
</div>

본인이 직접 시도해 보세요