Bootstrap框架下下拉菜单的实现(代码示例)

不言
Lepaskan: 2018-10-15 16:52:35
ke hadapan
6554 orang telah melayarinya

本篇文章给大家带来的内容是关于Bootstrap框架下下拉菜单的实现(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换、有上下文的菜单。而且在各种交互状态下的菜单展示需要和javascript插件配合才能使用。本文将详细介绍Bootstrap下拉菜单(免费课程推荐:bootstrap教程

使用方法

在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。当然,如果使用的是未编译版本,在js文件夹下能找到一个名为“dropdown.js”的文件,也可以调用这个js文件

因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.js之前一定要先加载jquery.js才会产生效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Salin selepas log masuk

基本用法

在使用Bootstrap框架中的下拉菜单组件时,其结构运用的正确与否非常的重要,如果结构和类名未使用正确,直接影响组件是否能正常运用

1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素

<div class="dropdown"></div>
Salin selepas log masuk

2、使用了一个

Label berkaitan:
sumber:cnblogs.com
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan