简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > Tutorial Bootstrap > teks badan

bootstrap如何制作下拉菜单

爱喝马黛茶的安东尼
Lepaskan： 2019-07-17 15:02:56
asal
4564 orang telah melayarinya

bootstrap如何制作下拉菜单

首先要在Sublime Text中新建HTML页面，如下图所示，一定注意编码选择utf-8。

1563346075(1).png

然后，我们运用link标签导入bootstrap的样式库，如下图所示：

1563346083(1).jpg

由于点击下拉菜单的效果需要脚本实现，所以需要导入jquery和bootstrap的脚本，注意顺序。

1563346293129436.png

接下来就正式引入下拉菜单了，我们直接调用dropdown样式即可，它是Bootstrap定义好的下拉菜单样式。

1563346354406271.jpg

相关推荐：《bootstrap入门教程》

然后加入下拉菜单中的菜单项，如下图所示，注意样式为dropdown-menu。

1563346127.jpg

最后我们运行程序，可以在页面中看到如下图所示的下拉菜单。

1563346137(1).jpg

另外，下拉菜单中的菜单项如果想用分割线分隔开，则可以直接加divider样式即可，如下图所示：

1563346148(1).png

Atas ialah kandungan terperinci bootstrap如何制作下拉菜单. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
bootstrap 下拉菜单
sumber：php.cn
Artikel sebelumnya：如何使用bootstrap快速实现登录页面 Artikel seterusnya：如何用bootstrap定义上弹菜单
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Bagaimana untuk menyelesaikan ruang kosong misteri di bahagian bawah halaman dalam CSS Saya cuba membina halaman web mudah menggunakan Bootstrap dan D3, tetapi saya tidak tahu b...
daripada 2024-04-06 20:22:15
0
1
454
Sesuaikan penampilan pengepala akordion Bootstrap menggunakan kelas CollapseDisplay Saya ingin menggayakan tajuk kad panel dengan rancangan runtuh kelas. Dalam contoh ini, ia...
daripada 2024-04-06 12:53:11
0
1
376
Suis Bootstrap tidak berfungsi dengan betul apabila halaman web diubah saiznya 这是代码：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...
daripada 2024-04-05 08:45:39
0
1
3443
Paparkan fail PDF AWS dalam mod Bootstrap dalam Laravel Saya telah memuat turun url aws seperti https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std...
daripada 2024-04-04 22:16:18
0
1
1450
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！