Trình đơn thả xuống chọn bootstrap

Như các bạn có thể nhận thấy, hầu hết các trang web sẽ có mục để khách hàng nhập thông tin vào hoặc để tìm kiếm các thông tin hoặc để nhập thông tin cá nhân như tên người dùng, mật khẩu,… để truy cập hoặc đăng ký

Trong bài viết hôm nay anh sẽ chia sẻ về chủ đề thuộc tính Input trong lập trình web để giúp các bạn hiểu rõ hơn về thuộc tính này. Trước hết chúng ta sẽ cùng tìm hiểu Input trong Bootstrap 4 là gì? . Cũng như hướng dẫn cách tăng kích thước cho đầu vào trong biểu mẫu và cách tạo nhóm đầu vào, cách kết hợp nhóm đầu vào với hộp kiểm hoặc nhóm đầu vào với nút

Hi vọng với những chia sẻ dưới đây, các bạn sẽ nắm bắt và áp dụng được vào quá trình làm việc với các dự án lập trình web, đồng thời đóng góp phần tạo ra các trang web hoàn thiện nhất cho người dùng

1. Đầu vào trong Bootstrap 4

Bootstrap hỗ trợ các loại HTML5 đầu vào như văn bản, mật khẩu, ngày giờ, ngày, tháng, thời gian, tuần, số, email, url, điện thoại và màu sắc

Ví dụ như ta muốn đầu vào có kiểu là văn bản (nhập đoạn văn bản vào đầu vào) hoặc nhập vào đầu vào là dạng mật khẩu thì ta chỉ định vào thuộc tính loại của thẻ đầu vào như sau

1
2
3
4
5
6
7
8
  

  Name:
  


  Password:
  
 
We used. form-control to input has width full màn hình
2. Vùng văn bản trong Bootstrap 4
Để tạo vùng văn bản, chúng tôi sử dụng thẻ vùng văn bản như sau
1
2
3
4

  Comment:
  
 
3. Hộp kiểm trong Bootstrap 4
Chúng ta sử dụng type as checkbox để tạo các hộp kiểm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 

  
    Option 1
  


  
    Option 2
  


  
    Option 3
  
 
Nếu chúng ta muốn các hộp kiểm nằm trên cùng 1 hàng. then we use class. form-check-inline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 

  
    Option 1
  


  
    Option 2
  


  
    Option 3
  
 
4. Radio trong Bootstrap 4
Chúng ta sử dụng loại là radio để tạo các nút radio như sau
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 

  
    Option 1
  


  
    Option 2
  


  
    Option 3
  
 
Nếu chúng ta muốn các nút radio cùng nằm trên 1 dòng thì sử dụng lớp. form-check-inline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  

  Name:
  


  Password:
  
 
1
5. Chọn danh sách trong Bootstrap 4
To make up select list we use thẻ select and option as after
  

  Name:
  


  Password:
  
 
2____13
6. Tăng kích thước cho đầu vào trong biểu mẫu
Chúng ta có thể tạo ra những đầu vào nhỏ và trung bình bằng cách sử dụng lớp form-control-sm hoặc. form-control-lg như hình bên dưới
  

  Name:
  


  Password:
  
 
4
  

  Name:
  


  Password:
  
 
5
7. Nhóm đầu vào
Chúng ta có thể thêm văn bản biểu tượng hoặc nút trong đầu vào bằng cách sử dụng lớp. input-group-prepend hoặc. đầu vào-nhóm-chắp thêm



 
Trong hướng dẫn này, bạn sẽ học cách thêm menu thả xuống (menu thả xuống) vào các thành phần Bootstrap khác nhau
Menu thả xuống thường được sử dụng bên trong thanh điều hướng ở đầu trang để 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 trình duyệt
Bạn có thể sử dụng plugin Bootstrap thả xuống để thêm menu thả xuống có thể chuyển đổi (tức là mở và đóng khi nhấp) vào hầu hết mọi thứ như liên kết, nút hoặc nhóm nút, thanh điều hướng, tab và điều hướng, v. v. mà không cần phải viết một dòng mã JavaScript
Bootstrap cung cấp một cơ chế dễ dàng và thanh lịch để thêm menu thả xuống một phần thông tin điện tử thông qua các thuộc tính dữ liệu. Ví dụ sau đây sẽ cho bạn thấy mã tối thiểu cần thiết để thêm menu thả xuống vào siêu kết nối thông qua các thuộc tính dữ liệu
  

  Name:
  


  Password:
  
 
6
Kết quả của ví dụ trên sẽ giống như sau
Ví dụ về minh họa dạng cơ bản nhất của menu thả xuống Bootstrap. Hãy cùng tìm hiểu từng phần của danh sách thả xuống thành phần Bootstrap
Giải thích mã
Menu thả xuống Bootstrap về cơ bản có hai thành phần - phần tử kích hoạt có thể là một siêu liên kết hoặc nút và menu thả xuống
Lớp 
  

  Name:
  


  Password:
  
 
70 chỉ định một menu thả xuống
Lớp 
  

  Name:
  


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

  Name:
  


  Password:
  
 
72 được yêu cầu trên phần tử kích hoạt để chuyển menu thả xuống
Elemental section
với lớp 
  

  Name:
  


  Password:
  
 
73 sẽ xây dựng menu thả xuống thường chứa các liên kết hoặc hành động có liên quan
Tương tự, bạn có thể thêm menu thả xuống cho các nút và thành phần điều hướng. Phần sau đây sẽ chỉ cho bạn một số cách khai thác biến phổ biến của menu thả xuống Bootstrap
Các ví dụ sau đây sẽ chỉ cho bạn cách thêm menu thả xuống thanh điều hướng thanh điều hướng
1
2
3
4
1
Kết quả của ví dụ trên sẽ giống như sau
mẹo. Bạn có thể vẽ một đường phân chia để tách các liên kết bên trong menu thả xuống bằng cách thêm lớp 
  

  Name:
  


  Password:
  
 
74 vào một phần tử trống
.
Ví dụ sau đây sẽ chỉ cho bạn cách thêm menu thả xuống vào điều hướng
  

  Name:
  


  Password:
  
 
7
Kết quả của ví dụ trên sẽ giống như sau
Bạn có thể chuyển đổi ví dụ trên thành một tab thả xuống bằng cách chỉ cần thay thế lớp 
  

  Name:
  


  Password:
  
 
75 bằng 
  

  Name:
  


  Password:
  



 
76, mà không có bất kỳ thay đổi nào về mã
Các ví dụ sau đây sẽ cho bạn thấy cách thêm menu thả xuống một nút
1
2
3
4
6
Tương tự như vậy, bạn có thể thêm menu thả xuống cho các biến thể khác của nút, như được hiển thị ở đây
Ví dụ sau đây sẽ chỉ cho bạn cách thêm menu thả xuống để tách các nút
1
2
3
4
7
Tương tự như vậy, bạn có thể thêm menu thả xuống cho các biến thể khác của nút, như được hiển thị ở đây
mẹo. Bạn có thể sử dụng các lớp định kích thước tương đối của Bootstrap như 
  

  Name:
  


  Password:
  
 
77 và 
  

  Name:
  


  Password:
  
 
78 trên phần tử 
  

  Name:
  


  Password:
  
 
79 để thay đổi kích thước của các nút thả xuống
Để tạo menu thả xuống bên trong một nhóm nút, chỉ cần đặt lớp 
1
2
3
4
60 cùng với mã của menu thả xuống bên trong một 
1
2
3
4
60 khác, như được hiển thị trong ví dụ sau

  Comment:
  
 
3
Kết quả của ví dụ trên sẽ giống như sau
Tương tự như vậy, bạn có thể đặt menu thả xuống bên trong nhóm nút xếp chồng lên nhau theo chiều dọc, như thế này

  Comment:
  
 
4
Bạn thậm chí có thể kích hoạt 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 
1
2
3
4
62, 
1
2
3
4
63 và 
1
2
3
4
64 tương ứng với phần tử cha (tức là phần tử 
1
2
3
4
60) 

  Comment:
  
 
9
Kết quả của ví dụ trên sẽ giống như sau
Theo mặc định, góc trên cùng bên trái của menu thả xuống được đặt ở góc dưới cùng bên trái của phần tử cha của nó, tức là 100% từ trên cùng và dọc theo bên trái. To base must menu thả xuống, chỉ cần thêm một lớp bổ sung 
1
2
3
4
66 vào lớp 
  

  Name:
  


  Password:
  
 
73 cơ sở
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
Kết quả của ví dụ trên sẽ giống như sau
Bạn có thể tùy chọn menu tiêu đề bổ sung để gắn nhãn một phần cho các mục của menu bên trong menu thả xuống bằng cách thêm lớp 
1
2
3
4
68 vào phần tử
, as after. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
4
Kết quả của ví dụ trên như sau
Bạn có thể áp dụng lớp 
1
2
3
4
69 cho các mục của menu 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, để vô hiệu hóa điều này, thông thường bạn có thể xóa thuộc tính 
1
2
3
4
70 của liên kết bằng cách sử dụng JavaScript hoặc thủ công
1
2
3
4
10
Kết quả của ví dụ trên như sau
Bạn có thể tạo menu thả xuống theo cách thủ công bằng cách sử dụng JavaScript - chỉ cần gọi phương thức 
1
2
3
4
71 với bộ chọn 
1
2
3
4
72 hoặc 
1
2
3
4
73 của phần tử liên kết hoặc nút trong mã JavaScript của bạn
1
2
3
4
11
Lưu ý. 
  

  Name:
  


  Password:
  
 
72 vẫn bắt buộc đối với phần tử kích hoạt của menu thả xuống bất kể bạn gọi menu thả xuống qua JavaScript hay thuộc tính dữ liệu
Có một số tùy chọn nhất định có thể được truyền cho phương thức 
1
2
3
4
71 để tùy chỉnh chức năng của menu thả xuống. Các tùy chọn có thể được truyền qua các thuộc tính dữ liệu hoặc JavaScript
Để thiết lập các tùy chọn cho menu thả xuống thông qua các thuộc tính dữ liệu, chỉ cần thêm tên tùy chọn vào 
1
2
3
4
76, chẳng hạn như 
1
2
3
4
77, v. v. Ngoài ra, khi truyền các tùy chọn thông qua các thuộc tính dữ liệu, hãy đảm bảo thay đổi kiểu chữ hoa của tên tùy chọn từ camelCase thành kebab-case. Ví dụ, thay vì sử dụng 
1
2
3
4
78, hãy sử dụng 
1
2
3
4
79



TênKiểuGiá trị mặc địnhMô tả chuỗi ranh giới. Element'clippingParents'Ranh giới hạn ràng buộc tràn của menu thả xuống (chỉ áp dụng cho ngăn chặn quá tải của Popper). Nó cũng có thể chấp nhận một HTMLElement tham chiếu (chỉ qua JavaScript). chuỗi tham chiếu. yếu tố. object'toggle'Phân tử tham chiếu của menu thả xuống. Chấp nhận các giá trị của 

  Comment:
  
 
30, 

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

  Comment:
  
 
32. displaystring'dynamic'Theo mặc định, Bootstrap sử dụng Popper để định vị động. You can't disable this thing with 

  Comment:
  
 
33. mảng bù trừ. sợi dây. function[0, 2]Chỉ định độ lệch vị trí của menu thả xuống so với vị trí ban đầu của nó. Bạn có thể truyền một chuỗi trong dữ liệu thuộc tính với các giá trị được phân tách bằng dấu phẩy như một. 

  Comment:
  
 
34. autoCloseboolean. chuỗi đúng
Configure the action is close the menu dropdown

  Comment:
  
 
35 - menu thả xuống sẽ được đóng lại bằng cách nhấp vào bên ngoài hoặc bên trong menu thả xuống

  Comment:
  
 
36 - menu thả xuống sẽ được đóng lại bằng cách nhấp vào nút bật tắt và gọi phương thức 

  Comment:
  
 
37 hoặc 

  Comment:
  
 
38 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

  Comment:
  
 
39 - menu thả xuống sẽ được đóng (chỉ) bằng cách nhấp vào bên trong menu thả xuống

  Comment:
  
 
40 - menu thả xuống sẽ được đóng (chỉ) bằng cách nhấp vào bên ngoài menu thả xuống
popperConfignull. sự vật. function null Cho phép bạn thay đổi cấu hình Popper mặc định của Bootstrap, xem cấu hình của Popper
Xem tài liệu của Popper. js để biết thêm thông tin về các tùy chọn được đề cập ở trên
This is the method of menu thả xuống tiêu chuẩn của bootstrap
chuyển đổi
Phương thức này chuyển menu thả xuống của điều hướng theo tab hoặc thanh điều hướng
1
2
3
4
11
buổi bieu diễn
Phương thức này hiển thị menu thả xuống của điều hướng theo tab hoặc thanh điều hướng
1
2
3
4
11
ẩn giấu
Phương thức này ẩn menu thả xuống của điều hướng theo tab hoặc thanh điều hướng
1
2
3
4
11
Phương thức này cập nhật vị trí của menu thả xuống của một phần tử
1
2
3
4
11
vứt bỏ
Phương thức này hủy bỏ menu thả xuống của một phần tử (tức là loại bỏ dữ liệu được lưu trữ trên phần tử DOM)
1
2
3
4
11
getInstance
Đây là một phương thức tĩnh cho phép bạn lấy thể hiện của menu thả xuống được liên kết với một phần tử DOM
1
2
3
4
11
getOrCreateInstance
Đây là một phương thức tĩnh cho phép bạn lấy phiên bản của menu thả xuống được liên kết với một phần tử DOM hoặc tạo một phiên bản mới trong trường hợp menu thả xuống không được khởi động
1
2
3
4
11
Đây là sự kiện Bootstrap tiêu chuẩn để xử lý chức năng của menu thả xuống
Tất cả các sự kiện của menu thả xuống được kích hoạt tại phần tử kích hoạt và sau đó hiển thị lên. Vì vậy, bạn cũng có thể thêm trình lắng nghe sự kiện vào phần tử cha của 
  

  Name:
  


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

  Comment:
  
 
42 để nhắm mục tiêu đến phần tử liên kết chuyển đổi
Sự kiện Mô tả hiển thị. bs. thả xuống Sự kiện này kích hoạt ngay lập tức khi phương thức 

  Comment:
  
 
43 được gọi. cho xem. bs. menu thả xuống Sự kiện này được kích hoạt khi menu thả xuống hiển thị cho 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 

  Comment:
  
 
37 được gọi. ẩn giấu. bs. menu thả xuống Sự kiện này được kích hoạt khi menu thả xuống bị ẩn khỏi người dùng và quá trình chuyển đổi CSS đã hoàn tất