IMG-LOGO
× 01. Hướng dẫn cài đặt bootstrap + jquery - học lập trình bằng bootstrap+ Jquery 02. Học bootstrap qua ví dụ 2- Bootstrap 03. Học bootstrap qua ví dụ 3 - Bootstrap 04. Thao tác lên tags html bằng jquery - Bootstrap 05. Xử lý sự kiện trong jquery (events in jquery) - Bootstrap 06. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 1 07. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 2 08. Hướng dẫn học bootstrap qua ví dụ dự án web đồng hồ - bootstrap




Trang Chủ Học Bootstrap Bootstrap 4 Dropdowns

Bootstrap 4 Dropdowns

by GokiSoft.Com - 19:29 12/10/2020 2,258 Lượt Xem

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



Dropdown Menu Right

Để căn phải dropdown menu, add class .dropdown-menu-right cho thẻ chứa class .dropdown-menu:

Ví dụ


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

Bình luận



Chia sẻ từ lớp học

Đã sao chép!!!