http://www.webneez.com

                                                                  【一分快3】bootstrap如何触发下拉菜单-Bootstrap教程

                                                                  下拉菜单(基本用法)

                                                                  小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件:

                                                                  ☑ LESS版本:对应的源码文件为 dropdowns.less

                                                                  ☑ Sass版本:对应的源码文件为 _dropdowns.sass

                                                                  ☑ 编译后的Bootstrap版本:查看bootstrap.css文件第3004行~第3130行

                                                                  在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“dropdown.js”的文件。你也可以调用这个js文件。不过在我们的教程中,我们统一调用压缩好的“bootstrap.min.js”文件:

                                                                  代码如下:

                                                                  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

                                                                  特别声明:

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

                                                                  我们先来看官网上一个简单的示例:

                                                                  <div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">下拉菜单<span class="caret"></]span></button><ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> … <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li></ul></div>

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

                                                                  使用方法:

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

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

                                                                  2、使用了一个<button>按钮做为父菜单,并且定义类名“dropdown-toggle”和自定义“data-toggle”属性,且值必须和最外容器类名一致,此示例为:

                                                                  data-toggle="dropdown"

                                                                  3、下拉菜单项使用一个ul列表,并且定义一个类名为“dropdown-menu”,此示例为:

                                                                  <ul class="dropdown-menu">

                                                                  示例

                                                                  <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>下拉菜单</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 选择你喜欢的水果 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li> <li role="presentation"><a role="m)enuitem"[ tabindex="-1" href="#">梨</a></li> <li role(="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li> </ul></div>  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>,; </body></html>
                                                                                  

                                                                  郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

                                                                  上一篇:中兴获5G商用合同是怎么回事?中兴获5G商用合同具体详情一览
                                                                  下一篇:没有了