Danh sách thả xuống là một trong những phần quan trọng nhất của trang web tương tác. Menu thả xuống là tập hợp các mục menu cho phép người dùng chọn một giá trị từ danh sách. Các. lớp thả xuống được sử dụng để thiết kế menu thả xuống. Thí dụ. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<0______1<2<3<2>
<0__<<8 <9=html1>
<0<<8 html6=html8
html9lang0=lang2>
<0______1lang6 lang7=lang9 =0=
=2>
<0<=6 =7=
=9>
<0"en"2____46>
<0<=6 =7=
>0>
<0"en"2____46>
<0<=6 =7=
<1>
<0"en"2____46>
"en"2____8>
<head1 head2=head4>
<0______1head8 head9=>1>
html9<>5 head2=>8>
<00<01
html9"en"2____65>
html9<<08<09<08>
html9<head8 head9=<17>
<00<<21 <22=<24
<25head9____4<28
<25<30____4<17>
<25<35
<00"en"2____121>
<00<head8 head9=<45>
<25<<49 head9=<52 =0=<55>
<57<58
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57<74
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57<90
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57html06
<59"en"2<49>
<00"en"2____88>
html9"en"2____88>
<0"en"2____88>
"en"2____81>
"en"2____2>
đầu ra. Dải phân cách thả xuống. Các. lớp dropdown-divider được sử dụng để phân chia danh sách menu thả xuống bằng cách sử dụng đường kẻ ngang mỏng Thí dụ. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<0______1<2<3<2>
<0__<<8 <9=html1>
<0<<8 html6=html8
html9lang0=lang2>
<0______1lang6 lang7=lang9 =0=
=2>
<0<=6 =7=
=9>
<0"en"2____46>
<0<=6 =7=
>0>
<0"en"2____46>
<0<=6 =7=
<1>
<0"en"2____46>
"en"2____8>
<head1 head2=head4>
<0______1head8 head9=>1>
html9<>5 head2=>8>
<00<01
html9"en"2____65>
html9<<08lang38<08>
html9<head8 head9=<17>
<00<<21 <22=<24
<25head9____4<28
<25<30____4<17>
<25lang64
<00"en"2____121>
<00<head8 head9=<45>
<25<<49 head9=<52 =0=<55>
<57<58
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57<74
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57<90
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57html06
<59"en"2<49>
<25<head8 head9==45=46head8>
<25<<49 head9=<52 =0=<55>
<57=60
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57=76
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57=92
<59"en"2<49>
<00"en"2____88>
html9"en"2____88>
<0"en"2____88>
"en"2____81>
"en"2____2>
Đầu ra.
Tiêu đề thả xuống. Các. lớp tiêu đề thả xuống được sử dụng để thêm phần tiêu đề bên trong danh sách thả xuống Thí dụ. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<0<<2"en"28<2>
<0__<<8 <9=html1>
<0<<8 html6=html8
html9lang0=lang2>
<0______1lang6 lang7=lang9 =0=
=2>
<0<=6 =7=
=9>
<0"en"2____46>
<0<=6 =7=
>0>
<0"en"2____46>
<0<=6 =7=
<1>
<0"en"2____46>
"en"2____8>
<head1 head2=head4>
<0______1head8 head9=>1>
html9<>5 head2=>8>
<00<01
html9"en"2____65>
html9<<08>24<08>
html9<head8 head9=<17>
<00<<21 <22=<24
<25head9____4<28
<25<30____4<17>
<25lang64
<00"en"2____121>
<00<head8 head9=<45>
<25<>64 head9=>67>
<57>70
<59"en"2____664>
<25<<49 head9=<52 =0=<55>
<57<58
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57<74
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57<90
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57html06
<59"en"2<49>
<25<head8 head9==45=46head8>
<25<>64 head9=>67>
<57<56
<59"en"2____664>
<25<<49 head9=<52 =0=<55>
<57=60
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57=76
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57=92
<59"en"2<49>
<00"en"2____88>
html9"en"2____88>
<0"en"2____88>
"en"2____81>
"en"2____2>
Đầu ra.
Vô hiệu hóa và kích hoạt các mục. Các. lớp tích cực được sử dụng để thêm đánh dấu các mục danh sách. Các. lớp bị vô hiệu hóa được sử dụng để vô hiệu hóa danh sách các mục.
Thí dụ. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<0<<2"en"28<2>
<0__<<8 <9=html1>
<0<<8 html6=html8
html9lang0=lang2>
<0______1lang6 lang7=lang9 =0=
=2>
<0<=6 =7=
=9>
<0"en"2____46>
<0<=6 =7=
>0>
<0"en"2____46>
<0<=6 =7=
<1>
<0"en"2____46>
"en"2____8>
<head1 head2=head4>
<0______1head8 head9=>1>
html9<>5 head2=>8>
<00<01
html9"en"2____65>
html9<____635>36>35>
html9<head8 head9=<17>
<00<<21 <22=<24
<25head9____4<28
<25<30____4<17>
<25lang64
<00"en"2____121>
<00<head8 head9=<45>
<25<<49 head9=>79 =0=<55>
<57<58
<59"en"2<49>
<25<<49 head9=>95 =0=<55>
<57<74
<59"en"2<49>
<25<<49 head9=>79 =0=<55>
<57<90
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57html06
<59"en"2<49>
<00"en"2____88>
html9"en"2____88>
<0"en"2____88>
"en"2____81>
"en"2____2>
Đầu ra.
Vị trí thả xuống. Các. dropright và. các lớp dropleft được sử dụng để đặt vị trí của danh sách thả xuống ở bên trái và bên phải.
ví dụ 1. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<0<<2"en"28<2>
<0__<<8 <9=html1>
<0<<8 html6=html8
html9lang0=lang2>
<0______1lang6 lang7=lang9 =0=
=2>
<0<=6 =7=
=9>
<0"en"2____46>
<0<=6 =7=
>0>
<0"en"2____46>
<0<=6 =7=
<1>
<0"en"2____46>
"en"2____8>
<head1 head2=head4>
<0______1head8 head9=>1>
html9<>5 head2=>8>
<00<01
html9"en"2____65>
html9<____635<165>35>
html9<head8 head9=<173>
<00<<21 <22=<24
<25head9____4<28
<25<30____4<17>
<25lang64
<00"en"2____121>
<00<head8 head9=<45>
<25<<49 head9=<52 =0=<55>
<57<58
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57<74
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57<90
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57html06
<59"en"2<49>
<00"en"2____88>
html9"en"2____88>
<0"en"2____88>
"en"2____81>
"en"2____2>
Đầu ra.
ví dụ 2. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<0<<2"en"28<2>
<0__<<8 <9=html1>
<0<<8 html6=html8
html9lang0=lang2>
<0______1lang6 lang7=lang9 =0=
=2>
<0<=6 =7=
=9>
<0"en"2____46>
<0<=6 =7=
>0>
<0"en"2____46>
<0<=6 =7=
<1>
<0"en"2____46>
"en"2____8>
<head1 head2=head4>
<0______1head8 head9=>1>
html9<>5 head2=>8>
<00<01
html9"en"2____65>
html9<____635<394>35>
html9<head8 head9=<402>
<00<<21 <22=<24
<25head9____4<28
<25<30____4<17>
<25lang64
<00"en"2____121>
<00<head8 head9=<45>
<25<<49 head9=<52 =0=<55>
<57<58
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57<74
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57<90
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57html06
<59"en"2<49>
<00"en"2____88>
html9"en"2____88>
<0"en"2____88>
"en"2____81>
"en"2____2>
Đầu ra.
Trình đơn thả xuống được căn phải. Các. lớp dropdown-menu-right được sử dụng để đặt căn phải của menu thả xuống.
Thí dụ. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<0<<2"en"28<2>
<0__<<8 <9=html1>
<0<<8 html6=html8
html9lang0=lang2>
<0______1lang6 lang7=lang9 =0=
=2>
<0<=6 =7=
=9>
<0"en"2____46>
<0<=6 =7=
>0>
<0"en"2____46>
<0<=6 =7=
<1>
<0"en"2____46>
"en"2____8>
<head1 head2=head4>
<0______1head8 head9=>1>
html9<>5 head2=>8>
<00<01
html9"en"2____65>
html9<____635<623>35>
html9<head8 head9=<17>
<00<<21 <22=<24
<25head9____4<28
<25<30____4<17>
<25<649
<00"en"2____121>
<00<head8 head9=<659>
<25<<49 head9=<52 =0=<55>
<57<58
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57<74
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57<90
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57html06
<59"en"2<49>
<00"en"2____88>
html9"en"2____88>
<0"en"2____88>
"en"2____81>
"en"2____2>
Đầu ra.
Thoát lên. Các. lớp dropup được sử dụng thay vì. lớp thả xuống để mở rộng danh sách menu lên trên.
Thí dụ. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<0<<2"en"28<2>
<0__<<8 <9=html1>
<0<<8 html6=html8
html9lang0=lang2>
<0______1lang6 lang7=lang9 =0=
=2>
<0<=6 =7=
=9>
<0"en"2____46>
<0<=6 =7=
>0>
<0"en"2____46>
<0<=6 =7=
<1>
<0"en"2____46>
"en"2____8>
<head1 head2=head4>
<0______1<831<832<831<832<831<832<831>
<0______1head8 head9=>1>
html9<>5 head2=>8>
<00<01
html9"en"2____65>
html9<____635<862>35>
html9<head8 head9=<870>
<00<<21 <22=<24
<25head9____4<28
<25<30____4<17>
<25<888
<00"en"2____121>
<00<head8 head9=<45>
<25<<49 head9=<52 =0=<55>
<57<58
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57<74
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57<90
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57html06
<59"en"2<49>
<00"en"2____88>
html9"en"2____88>
<0"en"2____88>
"en"2____81>
"en"2____2>
Đầu ra.
Văn bản thả xuống. Các. lớp dropdown-item-text được sử dụng để thêm văn bản thuần túy vào danh sách menu thả xuống.
Thí dụ. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<0<<2"en"28<2>
<0__<<8 <9=html1>
<0<<8 html6=html8
html9lang0=lang2>
<0______1lang6 lang7=lang9 =0=
=2>
<0<=6 =7=
=9>
<0"en"2____46>
<0<=6 =7=
>0>
<0"en"2____46>
<0<=6 =7=
<1>
<0"en"2____46>
"en"2____8>
<head1 head2=head4>
<0______1head8 head9=>1>
html9<>5 head2=>8>
<00<01
html9"en"2____65>
html9<____635html091>35>
html9<head8 head9=<17>
<00<<21 <22=<24
<25head9____4<28
<25<30____4<17>
<25<888
<00"en"2____121>
<00<head8 head9=<45>
<25<head8 head9=html134>
<57<58
<59"en"2____88>
<25<head8 head9=html134>
<57<74
<59"en"2____88>
<25<head8 head9=html134>
<57<90
<59"en"2____88>
<25<head8 head9=html134>
<57html06
<59"en"2____88>
<00"en"2____88>
html9"en"2____88>
<0"en"2____88>
"en"2____81>
"en"2____2>
fropdownOutput.
Các nút được nhóm với menu thả xuống. Các. lớp btn-group được sử dụng để tạo một nhóm các nút và. lớp menu thả xuống được sử dụng để tạo danh sách thả xuống.
Thí dụ. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<0<<2"en"28<2>
<0__<<8 <9=html1>
<0<<8 html6=html8
html9lang0=lang2>
<0______1lang6 lang7=lang9 =0=
=2>
<0<=6 =7=
=9>
<0"en"2____46>
<0<=6 =7=
>0>
<0"en"2____46>
<0<=6 =7=
<1>
<0"en"2____46>
"en"2____8>
<head1 head2=head4>
<0______1head8 head9=>1>
html9<>5 head2=>8>
<00<01
html9"en"2____65>
html9<____635html308>35>
html9<head8 head9=html316>
<00<<21 <22=<24
<25head9____4html327>
<25html330
<00"en"2____121>
<00<<21 <22=<24
<25head9____4html327>
<25html347
<00"en"2____121>
<00<head8 head9=html316>
<25<<21 <22=<24
<57head9=<28
<57<30____4<17>
<57<888
<25"en"2<21>
<25<head8 head9=<45>
<57<head8 head9=html134>
html394<58
html396"en"2____88>
<57<head8 head9=html134>
html394<74
html396"en"2____88>
<57<head8 head9=html134>
html394<90
html396"en"2____88>
<57<head8 head9=html134>
html394html06
html396"en"2____88>
<25"en"2____88>
<00"en"2____88>
html9"en"2____88>
<0"en"2____88>
"en"2____81>
"en"2____2>
Đầu ra.
Tách nút thả xuống. Các. lớp dropdown-toggle-split được sử dụng để phân chia các nút thả xuống. Thí dụ. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<0<<2"en"28<2>
<0__<<8 <9=html1>
<0<<8 html6=html8
html9lang0=lang2>
<0______1lang6 lang7=lang9 =0=
=2>
<0<=6 =7=
=9>
<0"en"2____46>
<0<=6 =7=
>0>
<0"en"2____46>
<0<=6 =7=
<1>
<0"en"2____46>
"en"2____8>
<head1 head2=head4>
<0______1head8 head9=>1>
html9<>5 head2=>8>
<00<01
html9"en"2____65>
html9<____635html570>35>
html9<head8 head9=html316>
<00<<21 <22=<24
<25head9____4html327>
<25html330
<00"en"2____121>
<00<<21 <22=<24
<25html604
<57html606
<25<30____4<17>
<00"en"2____121>
<00<head8 head9=<45>
<25<<49 head9=<52 =0=<55>
<57____2634
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57html650
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57html666
<59"en"2<49>
<00"en"2____88>
html9"en"2____88>
html9<head8 head9=html316>
<00<<21 <22=<24
<25head9____4html327>
<25html347
<00"en"2____121>
<00<<21 <22=<24
<25html604
<57html606
<25<30____4<17>
<00"en"2____121>
<00<head8 head9=<45>
<25<<49 head9=<52 =0=<55>
<57<90
<59"en"2<49>
<25<<49 head9=<52 =0=<55>
<57html06
<59"en"2<49>
<00"en"2____88>
html9"en"2____88>
html9<head8 head9=html316>
<00<<21 <22=<24
<25head9____4html327>
<25<888
<00"en"2____121>
<00<<21 <22=<24
<25html604
<57html606
<25<30____4<17>
<00"en"2____121>
<00<head8 head9=<45>
<25<head8 head9=<52>
<57<58
<59"en"2____88>
<25<head8 head9=<52>
<57<74
<59"en"2____88>
<25<head8 head9=<52>
<57<90
<59"en"2____88>
<25<head8 head9=<52>
<57html06
<59"en"2____88>
<00"en"2____88>
html9"en"2____88>
<0"en"2____88>
"en"2____81>
"en"2____2>
Đầu ra.
Danh sách thả xuống nhóm nút dọc. Các. lớp btn-group-vertical được sử dụng để tạo nhóm nút dọc với danh sách thả xuống Thí dụ. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<0<<2"en"28<2>
<0__<<8 <9=html1>
<0<<8 html6=html8
html9lang0=lang2>
<0______1lang6 lang7=lang9 =0=
=2>
<0<=6 =7=
=9>
<0"en"2____46>
<0<=6 =7=
>0>
<0"en"2____46>
<0<=6 =7=
<1>
<0"en"2____46>
"en"2____8>
<head1 head2=head4>
<0______1head8 head9=>1>
html9<>5 head2=>8>
<00<01
html9"en"2____65>
html9<____635html998>35>
html9<head8 head9=lang006>
<00<head8 head9=lang013>
<25<<21 <22=<24
<57head9=html327>
<57html330
<25"en"2<21>
<25<<21 <22=<24
<57html604
html394html606
<57<30____4<17>
<25"en"2<21>
<25<head8 head9=<45>
<57<_______149 head9____4<52 =0=<55>
| 
