Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Tạo Menu Thả Xuống Với Bootstrap

Dropdown menu cần thiết khi có nhiều liên kết/hành động nhưng không gian hạn chế. Bootstrap cho phép tạo dropdown không cần viết JavaScript.

Bootstrap Là Gì?

Framework CSS/JS tiền đề, cung cấp kiểu dáng chuẩn cho nút, navbar, form... Giúp phát triển nhanh, nhất quán.

Cài Đặt Bootstrap (CDN)

Trong <head> thêm CSS:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="..." crossorigin="anonymous">

Trước </body> thêm JS (jQuery, Popper, Bootstrap JS):

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

Các Loại Dropdown

Dropdown Với Nút (Button)

<div class="dropdown">
  <button class="btn dropdown-toggle" data-toggle="dropdown">Menu Nút</button>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item">Mục 1</a>
    <a href="#" class="dropdown-item">Mục 2</a>
  </div>
</div>

Dropdown Với Link (Anchor)

<div class="dropdown">
  <a class="btn dropdown-toggle" data-toggle="dropdown">Menu Link</a>
  <ul class="dropdown-menu">
    <a class="dropdown-item" href="#">Mục 1</a>
  </ul>
</div>

Lưu ý: Link (<a>) chỉ dùng cho điều hướng. Nút (<button>) dùng cho hành động (submit, ẩn/hiện...).

Định Dạng Menu & Mục

Thêm class màu nền bg-*:

<div class="dropdown-menu">
  <a class="dropdown-item bg-primary">Mục 1</a>
  <a class="dropdown-item bg-warning">Mục 2</a>
</div>

Split Button Dropdown

Nút chính + nút mũi tên riêng biệt. Dùng btn-group và dropdown-toggle-split.

Form Trong Dropdown

Đặt form bên trong .dropdown-menu (ví dụ form đăng nhập).

Dropup, Dropleft, Dropright

  • dropup: menu mở lên trên (dùng cho navbar dưới cùng).
  • dropleft: menu mở sang trái (tránh tràn màn hình).
  • dropright: menu mở sang phải.

Thêm <div class="dropdown-divider"></div> để tách nhóm mục.

Dropdown Có Tiêu Đề (Header)

Dùng <h2 class="dropdown-header"> (tốt cho SEO).

Căn Phải Menu

Thêm class dropdown-menu-right.

Mục Active / Disabled

Class active làm nổi bật, disabled làm mờ và vô hiệu hóa.

Kết Luận

Bootstrap giúp tạo dropdown đa dạng, đẹp mắt chỉ với class CSS. Bạn đã sẵn sàng áp dụng vào dự án!