当前位置：首页 > 资讯 > 技术文档

Bootstrap模块dropdown实现下拉框响应

时间：2020-02-10 12:37 编辑：来源：阅读：
扫一扫，手机访问

摘要：Bootstrap模块dropdown实现下拉框响应

本文介绍了Bootstrap下拉框模块dropdown的使用方法，供大家参考，具体内容如下 [b]一、源码分析： Dropdowns.scss：[/b]下拉框模块 [b]Javascripts/bootstrap/dropdown.js：[/b]实现下拉框响应 [b]二、功能及原理：[/b] 下拉选项卡，默认不能实现显示选中项的功能 [b]原理：[/b] 1、利用dropdown类作为定位点，然后让子级的列表dropdown-menu绝对定位实现，还需要加一个单击点作为设置data-toggle=”dropdown”才能做关联。 2、需要js插件的支持 [b]三、源码分析：[/b] 1、caret：实现向下的三角形，利用边框实现的 1.1、边框颜色默认是字体颜色 1.2、三角形的实现：边框要有宽度，然后相邻两边需有宽度，但颜色透明；最后还需要元素为行内块元素，才能使其高、宽为0。 1.3、代码如下

[url=#name]

10、实现向上弹出子菜单，用bottom:100%（弹出子菜单bottom的定位）实现 11、应用示例

<div id="dropdown" class="dropdown">
<a id="dropdown-btn" data-target="#dropdown" >number</a>
<ul class="dropdown-menu" >
 <li><a>3343</a></li>
<li><a>555</a></li>
</ul>
</div>

如果大家还想深入学习，可以点击这里[/url]进行学习，再为大家附两个精彩的专题：[url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url] 以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

全部评论(0)

上一篇：Bootstrap 下拉菜单.dropdown的具体使用方法
下一篇：JQuery组件基于Bootstrap的DropDownList（完整版）

资讯排行榜
更多>>