Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 17++ Năm (Từ 2006 đến Nay)

Bootstrap Dropdowns

5/5 - (10 bình chọn)

Trên thanh menu chỉ chứa được một số các mục chính nhất định, trong khi bạn lại có rất nhiều mục chính và các mục đó lại liên quan đến nhau. Làm thế nào để đưa được hết các mục đó lên thanh menu để người xem dễ dàng lựa chọn mục mà họ cần. Menu Dropdowns là những gì bạn cần để tối ưu thanh menu của bạn.

Và khi nhìn giao diện những website có phần menu con xổ xuống trông đẹp mắt và chuyên nghiệp, bạn có từng nghĩ làm thế nào để tạo được những menu như vậy?

Chúng ta sẽ chi tiết điều đó trong phần bài viết dưới đây.

Xem Thêm: Bootstrap Grid System: Hệ thống lưới trong bootstrap

  1. Dropdown cơ bản

Ví dụ một trình đơn thả xuống (dropdown menu)

Hình anh 1Bootstrap Dropdowns 1

Giải thích phần ví dụ trên:

  • Lớp .dropdown cho biết một trình đơn thả xuống
  • Để mở trình đơn thả xuống sử dụng lớp .dropdown-toggle và thuộc tính data-toggle=“dropdown”.
  • Lớp .caret tạo một mũi tên hướng xuống, giúp người xem nhìn ra trình đơn có nội dung thả xuống.
  • Thêm lớp .dropdown-menu vào phần tử <ul> để tạo ra một trình đơn thả xuống hoàn chỉnh.

Khi bạn click vào nút thì trình đơn sẽ thả xuống danh sách các mục trong nó (như trong hình ảnh)

Lưu ý:

Nếu sử dụng tất cả các lớp ở trên nhưng không sử dụng lớp .dropdown-menu thì trình đơn của bạn sẽ không phải là trình đơn thả xuống, mà nó sẽ ra như thế này:

Bootstrap Dropdowns 2

Xem Thêm: Bootstrap Form – Biểu mẫu Bootstrap

  1. Dropdown Divider

Lớp .divider được sử dụng để tạo một đường viền ngang phân chia giữa các mục trong trình đơn thả xuống.

Bootstrap Dropdowns 3

  1. Dropdown Header

Để tạo tiêu đề cho các mục trong trình đơn thả xuống, sử dụng lớp .dropdown-header

Bootstrap Dropdowns 4

  1. Các mục Disable và Active
  • Để làm nổi bật một mục thả xuống với màu nền xanh, sử dụng lớp .active
  • Để vô hiệu hóa một mục trong trình đơn thả xuống, sử dụng lớp .disable. Mục bị vô hiệu hóa sẽ có màu xám và có biểu tượng bị vô hiệu hóa khi di chuột vào.

Bootstrap Dropdowns 5

Xem Thêm: Bootstrap table Bảng Bootstrap

  1. Vị trí thả xuống

Mặc định trình đơn thả xuống nằm ở bên trái của trình đơn. Để trình đơn thả xuống nằm ở bên phải của trình đơn mà không cần tốn nhiều công sức style cho nó, bạn chỉ cần thêm lớp .dropdown-menu-right vào phần tử <ul> cùng với lớp .dropdown-menu.

Bootstrap Dropdowns 6

  1. Dropup

Nếu bạn muốn trình đơn của bạn thả xuống mở rộng lên phía trên thay vì xuống dưới, hãy thay lớp .dropdown trong phần tử <div class=“dropdown”> bằng lớp .dropup.

Bootstrap Dropdowns 7

Tổng kết

Trình đơn thả xuống (Dropdown Menu) thường xuyên được sử dụng để tạo ra menu hoặc sidebar có những danh mục con. Bạn có thể tạo ra menu có những danh mục con thả xuống mà không cần sử dụng những lớp có sẵn như trên của bootstrap. Tuy nhiên, để tương thích với các loại màn hình thì bạn sẽ tốn rất nhiều công sức để làm được điều đó. Vì vậy, bạn nên đọc kỹ phần nội dung trên để tạo ra cho mình menu có độ tùy chỉnh và tương thích cao mà không tốn nhiều công sức.

Xem Thêm: Dịch vụ thiết kế website

Tin mới nhất

Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Vào cuối tháng 2 năm 2017 WordPress đã được phát hành 4.7.2 và chính Lâm vờ tờ cũng đã đưa...
    3 giây trước
  2. Bạn đã biết gì về SEO, nghề SEO như thế nào? Đơn giản lên google tìm kiếm sau đó sẽ...
    15 giây trước
  3. Bước vào kỷ nguyên công nghệ hiện đại 4.0, cùng với sự phát triển mạnh mẽ của mạng xã hội...
    5 giây trước
  4. Chúng ta sẽ tiếp tục phần bài viết cuối về 32 thủ thuật hữu ích cho tập tin functions.php của...
    10 giây trước
  5. Backlink luôn là một yếu tố quan trọng giúp trang web của bạn tăng hạng trong top Google. Việc tìm...
    15 giây trước
  6. Có phải bạn đang tìm kiếm danh sách các blog chia sẻ kinh nghiệm SEO hay; những blog chất lượng...
    20 giây trước
  7. Bạn muốn trở thành một chuyên gia SEO? Trở thành một chuyên gia SEO có khó lắm không nhỉ? Việc chúng...
    2 giây trước
  8. Làm thế nào để thêm nội dung vào thanh bên cạnh trên website WordPress? Trong giao diện của các website,...
    5 giây trước
  9.  SỬ DỤNG WORDPRESS HOSTING TẠI HOSTVN - BẤT CHẤP MỌI LOẠI THỜI TIẾT NHÉ Dạo này rất nhiều website bị...
    5 giây trước
  10. Google Adsense là mạng lưới quảng cáo trả tiền PPC (pay per click) truyền thống lâu đời nhất và họ...
    29 giây trước