[BOOTSTRAP] Bài 9: Dropdown trong bootstrap

Hôm nay chúng ta sẽ tiếp tục nghiên cứu và thực hành với dropdown trong bootstrap

 

Tạo Dropdown cơ bản

Dropdown menu là những menu cho phép người dung chọn các nút ,các khối đổ xuống trong thanh menu.

Ví dụ:

Như trên, chúng ta có 1 khối div tổng sử dụng class .dropdown

1 nút button để click hiển thị các lựa chọn, nút này sử dụng các class tạo nút là .btn btn-primary. Thêm vào đó, để có thể trỏ ra các sự lựa chọn, sử dụng thêm class .dropdown-toggle và thuộc tính data-toggle=”dropdown”.

Khối trỏ ra sử dụng class .dropdown-menu, các giá trị hiển thị ra để chọn sử dụng thẻ a với class .dropdown-item.

Các loại dropdown khác

Dropdown Divider (Dropdown dạng phân cách)

Tạo ra dạng Dropdown phân chia các vùng, phân chia các liên kết lựa chọn bên trong bằng đường viền ngang. Để phân chia, sử dụng class .dropdown-divider, như sau:

Dropdown Header

 Sử dụng class .dropdown-header để thêm vùng đầu cho Menu dropdown, như sau.

Ví dụ: 

Disable and Active items

Đánh dấu các phần dropdown với lớp .active  (và tạo thêm hiển thị màu xanh background color).

Để có thể (disable an item ) làm mất tính năng trên thanh dropdown menu, sử dụng lớp .disabled  (hiển thị màu light-grey ở phần chữ và không hiển thị chuyển động trên các thanh ).

Ví dụ:

Dropdown Position

         

Có thể tạo ra các dạng Dropdown trỏ sang 2 bên trái hoặc phải bằng việc sử dụng các class .dropright và .dropleft, như sau:

Dropdown Menu Righ

Để căn chỉnh phần the dropdown menu sang bên phải,thêm lớp .dropdown-menu-right cho các phần tử cùng với lớp .dropdown-menu.

Ví dụ:

Dropup

Nếu muốn thanh dropdown menu hiển thị theo hương lên trên thay vì xuống dưới , sử dụng thẻ

với lớp dropdown" để có thể"dropup".

 

Ví dụ:

Dropdown Text

Lớp.dropdown-item-text để tạo phần link kết nối khi click chuột vào phần chữ.

 Vídụ:

Grouped Buttons kết hợp Dropdown

Kết hợp các nút với thanh dropdown

.Ví dụ:

Split Button Dropdowns

Ví dụ:


Các nội dung liên quan:

Tháng 04 - Codecamp mở lớp lập trình web chuyên nghiệp bằng Laravel

Đây là khoá học nâng cao học về Laravel - một framework php hàng đầu thế giới. Nếu bạn mong muốn phát triển dự án chuyên nghiệp, bảo mật, nhu cầu tuyển dụng cao thì tham gia khoá học này.

Tháng 04 - Codecamp mở lớp học lập trình Web Php Từ Cơ Bản Đến Nâng Cao Theo MVC OOP

Mastering PHP là chương trình được biên soạn kỹ lưỡng từng bước một giúp bất kỳ ai có thể làm chủ được việc xây dựng hệ thống website sau thời gian ngắn ngay cả khi chưa có kiến thức nền tảng. Khoá học đầy đủ nội dung và được hướng dẫn tỉ mỉ, chi tiết, cầm tay chỉ code đến khi code được thì thôi.

Top 19 website học lập trình miễn phí cực chất lượng

Những kênh dạy lập trình căn bản bằng Tiếng Việt trên đây là những kênh thông tin tuyệt vời giúp các học viên dù là người mới hay đã có kinh nghiệm lập trình có thể lựa chọn để làm một kênh thông tin tham khảo thêm những kiến thức lập trình phong phú khi lập trình trang web, ứng dụng hoặc tạo lập dự án.