Basic Dropdown

Một dropdown menu là một toggleable menu cho phép người dùng chọn một giá trị từ danh sách được xác định trước:

Ví dụ

<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>

Giải thích ví dụ

Class .dropdown để khởi tạo dropdown menu.

Để mở dropdown menu, sử dụng một button hoặc link với class .dropdown-toggle và thuộc tính data-toggle="dropdown".

Add class .dropdown-menu vào thẻ <div> để tạo dropdown. Sau đó add class .dropdown-item vào từng element (links hoặc buttons) bên trong dropdown menu.

Dropdown Divider

Class .dropdown-divider được sử dụng để tách links bên trong dropdown menu với một đường viền ngang mỏng:

Ví dụ

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

Dropdown Header

Class .dropdown-header được sử dụng để tạo headers bên trong dropdown menu:

Ví dụ

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

Disable và Active items

Highlight một dropdown item cụ thể với class .active (thêm blue background color cho item đó).

Để disable item trong dropdown menu, sử dụng class .disabled :

Ví dụ

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

Dropdown Position

Bạn có thể tạo menu "dropright" - menu con showup bên phải, hoặc "dropleft" - menu con showup bên trái, bằng cách thêm class .dropright hoặc .dropleft:

Dropright

<div class="dropdown dropright">

Dropleft

<div class="dropdown dropleft">

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

Dropup

Nếu bạn muốn dropdown menu mở lên trên thay vì xuống, thay đổi bên trong thẻ <div> từ class="dropdown" thành "dropup":

Ví dụ

<div class="dropup">

Dropdown Text

Class .dropdown-item-text được sử dụng để add plain text vào dropdown menu, hoặc được sử dụng trên links để tạo kiểu links mặc định.

Ví dụ

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Link 1</a>
  <a class="dropdown-item" href="#">Link 2</a>
  <a class="dropdown-item-text" href="#">Text Link</a>
  <span class="dropdown-item-text">Just Text</span>
</div>

Grouped Buttons cùng Dropdown

Ví dụ

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

Split Button Dropdowns

Ví dụ

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

Button Group dọc cùng Dropdown

Ví dụ

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