programming bootstrap

Làm cách nào tôi có thể tạo nhiều danh sách thả xuống trong bootstrap?

Menu thả xuống thường được sử dụng bên trong tiêu đề điều hướng để hiển thị danh sách các liên kết có liên quan khi người dùng di chuột hoặc nhấp vào phần tử kích hoạt

Bạn có thể sử dụng plugin thả xuống Bootstrap để thêm menu thả xuống có thể chuyển đổi [tôi. e. mở và đóng khi nhấp chuột] vào hầu hết mọi thứ, chẳng hạn như liên kết, nút hoặc nhóm nút, thanh điều hướng, tab và thuốc điều hướng, v.v. thậm chí không cần viết một dòng mã JavaScript nào

Thêm danh sách thả xuống thông qua thuộc tính dữ liệu

Bootstrap cung cấp một cơ chế dễ dàng và thanh lịch để thêm menu thả xuống vào một phần tử thông qua thuộc tính dữ liệu. Ví dụ sau sẽ cho bạn thấy mức đánh dấu tối thiểu cần thiết để thêm menu thả xuống vào siêu liên kết thông qua thuộc tính dữ liệu


    Dropdown
    

        Action
        Another action

Ví dụ trên minh họa hình thức cơ bản nhất của trình đơn thả xuống Bootstrap. Hãy hiểu từng phần của thành phần thả xuống Bootstrap từng cái một

Giải thích mã

Trình đơn thả xuống Bootstrap về cơ bản có hai thành phần - phần tử kích hoạt trình đơn thả xuống có thể là một siêu liên kết hoặc nút và chính menu thả xuống

Lớp


    Primary
    

        Action
        Another action
        
        Separated link

0 chỉ định menu thả xuống

Lớp


    Primary
    

        Action
        Another action
        
        Separated link

1 xác định phần tử kích hoạt, trong trường hợp của chúng tôi là một siêu liên kết, trong khi thuộc tính


    Primary
    

        Action
        Another action
        
        Separated link

2 được yêu cầu trên phần tử kích hoạt để chuyển đổi menu thả xuống

Các
phần tử với lớp
```
    Primary
    

        Action
        Another action
        
        Separated link
    
```
3 thực sự đang xây dựng menu thả xuống thường chứa các liên kết hoặc hành động liên quan

Tương tự, bạn có thể thêm danh sách thả xuống vào các nút và thành phần điều hướng. Phần sau đây sẽ cho bạn thấy một số triển khai phổ biến của trình đơn thả xuống Bootstrap

Danh sách thả xuống trong một thanh điều hướng

Các ví dụ sau sẽ chỉ cho bạn cách thêm danh sách thả xuống vào thanh điều hướng

— Đầu ra của ví dụ trên sẽ giống như thế này

Action Another action Separated link

4 vào chỗ trống

thành phần

Danh sách thả xuống trong Navs

Ví dụ sau sẽ chỉ cho bạn cách thêm menu thả xuống vào bảng điều hướng thuốc


    
        Home
    
    
        Profile
    
    
        Messages
        
            Inbox
            Drafts
            Sent Items
            
            Trash
        
    
    
        Admin
        
            Reports
            Settings
            
            Logout

— Đầu ra của ví dụ trên sẽ giống như thế này

Action Another action Separated link

5 bằng lớp


    Primary
    

        Action
        Another action
        
        Separated link

6 mà không cần thay đổi thêm bất kỳ đánh dấu nào

Danh sách thả xuống trong các nút

Các ví dụ sau sẽ chỉ cho bạn cách thêm danh sách thả xuống vào nút chính


    Primary
    

        Action
        Another action
        
        Separated link

— Tương tự, bạn có thể thêm danh sách thả xuống vào các biến thể khác của các nút, như được hiển thị ở đây

Action Another action Separated link

— Tương tự, bạn có thể thêm danh sách thả xuống vào các biến thể khác của các nút, như được hiển thị ở đây

Action Another action Separated link

7 cùng với đánh dấu thả xuống bên trong một


    Primary
    

        Action
        Another action
        
        Separated link

7 khác, như minh họa trong ví dụ sau


    Primary
    

        Action
        Another action
        
        Separated link

— Đầu ra của ví dụ trên sẽ giống như thế này

Action Another action Separated link

Tạo Menu Dropup, Dropleft và Dropright

Bạn thậm chí có thể kích hoạt các menu thả xuống ở trên, cũng như, ở bên trái và bên phải của các phần tử bằng cách thêm một lớp bổ sung


    Primary
    

        Action
        Another action
        
        Separated link


    Primary
    

        Action
        Another action
        
        Separated link

10 và


    Primary
    

        Action
        Another action
        
        Separated link

11, tương ứng vào phần tử cha [i. e. phần tử


    Primary
    

        Action
        Another action
        
        Separated link

7], như trong ví dụ sau


    Primary
    

        Action
        Another action
        
        Separated link

— Đầu ra của ví dụ trên sẽ giống như thế này

Action Another action Separated link

13 vào lớp cơ sở


    Primary
    

        Action
        Another action
        
        Separated link


    Primary
    

        Action
        Another action
        
        Separated link

— Đầu ra của ví dụ trên sẽ giống như thế này

Action Another action Separated link

15 vào

yếu tố, như thế này


    Primary
    

        Action
        Another action
        
        Separated link

Vô hiệu hóa các mục trong danh sách thả xuống

Bạn có thể áp dụng lớp


    Primary
    

        Action
        Another action
        
        Separated link

16 cho các mục menu trong danh sách thả xuống để làm cho chúng trông giống như bị vô hiệu hóa. Tuy nhiên, liên kết vẫn có thể nhấp được, để tắt liên kết này, thông thường bạn có thể xóa thuộc tính


    Primary
    

        Action
        Another action
        
        Separated link

17 của liên kết bằng cách sử dụng JavaScript hoặc thủ công

Thêm danh sách thả xuống qua JavaScript

Bạn cũng có thể thêm danh sách thả xuống theo cách thủ công bằng JavaScript — chỉ cần gọi phương thức Bootstrap


    Primary
    

        Action
        Another action
        
        Separated link

18 với bộ chọn


    Primary
    

        Action
        Another action
        
        Separated link

19 hoặc


    Primary
    

        Action
        Another action
        
        Separated link

40 của phần tử liên kết hoặc nút trong mã JavaScript của bạn

Ghi chú.


    Primary
    

        Action
        Another action
        
        Separated link

2 vẫn cần thiết cho phần tử kích hoạt của trình đơn thả xuống bất kể bạn gọi trình đơn thả xuống qua JavaScript hay data-api

Tùy chọn

Có một số tùy chọn nhất định có thể được chuyển đến phương pháp Bootstrap của


    Primary
    

        Action
        Another action
        
        Separated link

18 để tùy chỉnh chức năng của danh sách thả xuống. Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript

Để đặt tùy chọn thả xuống thông qua thuộc tính dữ liệu, chỉ cần thêm tên tùy chọn vào


    Primary
    

        Action
        Another action
        
        Separated link

43, chẳng hạn như


    Primary
    

        Action
        Another action
        
        Separated link

44, v.v. Ngoài ra, khi chuyển các tùy chọn qua thuộc tính dữ liệu, hãy đảm bảo thay đổi kiểu chữ hoa chữ thường của tên tùy chọn từ camelCase thành kebab-case. Ví dụ: thay vì sử dụng


    Primary
    

        Action
        Another action
        
        Separated link

45, hãy sử dụng


    Primary
    

        Action
        Another action
        
        Separated link

3TypeDefault ValueDescriptionchuỗi giới hạn. Element'clippingParents'Overflow constraint ranh giới của menu thả xuống [chỉ áp dụng cho công cụ sửa đổi preventOverflow của Popper]. Nó cũng có thể chấp nhận tham chiếu HTMLElement [chỉ qua JavaScript]. chuỗi tham chiếu. thành phần. object'toggle'Reference phần tử của menu thả xuống. Chấp nhận các giá trị của


    Primary
    

        Action
        Another action
        
        Separated link

47,


    Primary
    

        Action
        Another action
        
        Separated link

48, một tham chiếu HTMLElement hoặc một đối tượng cung cấp


    Primary
    

        Action
        Another action
        
        Separated link

49. chuỗi hiển thị'động'Theo mặc định, Bootstrap sử dụng Popper để định vị động. Bạn có thể vô hiệu hóa điều này với


    Primary
    

        Action
        Another action
        
        Separated link

50. mảng bù đắp. chuỗi. chức năng[0, 2]Chỉ định độ lệch của trình đơn thả xuống so với mục tiêu của nó. Bạn có thể chuyển một chuỗi trong thuộc tính dữ liệu với các giá trị được phân tách bằng dấu phẩy như.


    Primary
    

        Action
        Another action
        
        Separated link

51. autoCloseboolean. chuỗi đúng

Định cấu hình hành vi tự động đóng của danh sách thả xuống

```
    Primary
    

        Action
        Another action
        
        Separated link
    
```
52 - danh sách thả xuống sẽ được đóng bằng cách nhấp vào bên ngoài hoặc bên trong menu thả xuống


    Primary
    

        Action
        Another action
        
        Separated link

53 - trình đơn thả xuống sẽ được đóng lại bằng cách nhấp vào nút chuyển đổi và gọi phương thức


    Primary
    

        Action
        Another action
        
        Separated link

54 hoặc


    Primary
    

        Action
        Another action
        
        Separated link

55 theo cách thủ công. Ngoài ra, menu thả xuống sẽ không bị đóng bằng cách nhấn phím esc


    Primary
    

        Action
        Another action
        
        Separated link

56 - danh sách thả xuống sẽ được đóng [chỉ] bằng cách nhấp vào bên trong menu thả xuống


    Primary
    

        Action
        Another action
        
        Separated link

57 - danh sách thả xuống sẽ được đóng [chỉ] bằng cách nhấp vào bên ngoài menu thả xuống

popperConfignull. vật. chức năng Cho phép bạn thay đổi cấu hình Popper mặc định của Bootstrap, xem

Xem Popper. js để biết thêm thông tin về các tùy chọn được đề cập ở trên

phương pháp

Đây là phương pháp thả xuống của bootstrap tiêu chuẩn

chuyển đổi

Phương pháp này bật/tắt menu thả xuống của thanh điều hướng đã cho hoặc điều hướng theo thẻ

trình diễn

Phương pháp này hiển thị menu thả xuống của một thanh điều hướng đã cho hoặc điều hướng theo thẻ

ẩn giấu

Phương pháp này ẩn menu thả xuống của một thanh điều hướng đã cho hoặc điều hướng theo thẻ

cập nhật

Phương pháp này cập nhật vị trí thả xuống của một phần tử

vứt bỏ

Phương pháp này phá hủy trình đơn thả xuống của một phần tử [tôi. e. xóa dữ liệu được lưu trữ trên phần tử DOM]

getInstance

Đây là một phương thức tĩnh cho phép bạn lấy phiên bản thả xuống được liên kết với một phần tử DOM

getOrCreateInstance

Đây là một phương thức tĩnh cho phép bạn lấy phiên bản thả xuống được liên kết với phần tử DOM hoặc tạo một phiên bản mới trong trường hợp nếu menu thả xuống không được khởi tạo

Sự kiện

Đây là các sự kiện Bootstrap tiêu chuẩn để tăng cường chức năng thả xuống

Tất cả các sự kiện thả xuống được kích hoạt ở phần tử chuyển đổi và sau đó nổi lên. Vì vậy, bạn cũng có thể thêm trình xử lý sự kiện vào phần tử cha của


    Primary
    

        Action
        Another action
        
        Separated link

3. Ngoài ra, bạn có thể sử dụng


    Primary
    

        Action
        Another action
        
        Separated link

59 để nhắm mục tiêu phần tử neo chuyển đổi

Sự kiệnMô tảshow. bs. dropdown Sự kiện này kích hoạt ngay lập tức khi phương thức thể hiện show được gọi. cho xem. bs. thả xuống Sự kiện này được kích hoạt khi danh sách thả xuống hiển thị với người dùng và quá trình chuyển đổi CSS đã hoàn tất. ẩn giấu. bs. thả xuống Sự kiện này được kích hoạt ngay lập tức khi phương thức ẩn dụ được gọi. ẩn giấu. bs. thả xuốngSự kiện này được kích hoạt khi danh sách thả xuống đã hoàn tất bị ẩn khỏi người dùng và quá trình chuyển đổi CSS đã hoàn tất

Làm cách nào để thêm nhiều danh sách thả xuống trong Bootstrap?

Không, không thể có hai menu thả xuống trong cùng một div . Chúng cần được tách biệt vì mã để chuyển đổi chúng tìm kiếm phần tử đầu tiên trong div cha của nút/neo. Vì vậy, nếu chúng ở trong cùng một div cha thì chỉ cái đầu tiên sẽ được bật.

Làm cách nào để tùy chỉnh menu thả xuống Bootstrap?

Tạo danh sách thả xuống .

Tạo danh sách thả xuống cơ bản yêu cầu bạn tạo một nút bằng cách sử dụng. btn và. các lớp thả xuống-chuyển đổi

Bạn cũng nên thêm. thuộc tính chuyển đổi dữ liệu với. giá trị thả xuống

Then, you need to create a

container with the . dropdown-menu class. .. .

Điều này sẽ tạo ra một menu thả xuống cơ bản

Làm cách nào để đặt vị trí thả xuống trong Bootstrap?

Theo mặc định, menu thả xuống được tự động định vị 100% từ trên cùng và dọc theo bên trái của trình đơn gốc. Thêm. menu thả xuống sang phải. menu thả xuống để căn phải menu thả xuống .

Danh sách thả xuống lồng nhau là gì?

Trình đơn thả xuống lồng nhau cho phép bạn có trình đơn thả xuống thứ hai xuất hiện sau khi trình đơn thả xuống đầu tiên được trả lời . Điều này đặc biệt hữu ích cho các trường hợp liên quan đến câu trả lời phụ thuộc vào câu trả lời trước đó. [Ví dụ: quốc gia, tiểu bang và thành phố của ai đó].

Thêm danh sách thả xuống thông qua thuộc tính dữ liệu

Giải thích mã

Danh sách thả xuống trong một thanh điều hướng

Danh sách thả xuống trong Navs

Danh sách thả xuống trong các nút

Tạo Menu Dropup, Dropleft và Dropright

Vô hiệu hóa các mục trong danh sách thả xuống

Thêm danh sách thả xuống qua JavaScript

Tùy chọn

phương pháp

chuyển đổi

trình diễn

ẩn giấu

cập nhật

vứt bỏ

getInstance

getOrCreateInstance

Sự kiện

Làm cách nào để thêm nhiều danh sách thả xuống trong Bootstrap?

Làm cách nào để tùy chỉnh menu thả xuống Bootstrap?

Làm cách nào để đặt vị trí thả xuống trong Bootstrap?

Danh sách thả xuống lồng nhau là gì?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề