码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap3系列:下拉菜单

时间:2016-09-04 22:15:00      阅读:115      评论:0      收藏:0      [点我收藏+]

标签:

1.引用Bootstrap

  示例引用的Bootstrap版本:v3.3.7

<script src="~/Scripts/jquery-2.2.4.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />

 2.基本使用

2.1 示例代码

<div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下拉菜单<span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">菜单项1</a></li>
        <li><a href="#">菜单项2</a></li>
        <li><a href="#">菜单项3</a></li>
    </ul>
</div>

  .dropdown:定义下拉菜单框

  .dropdown-toggle:定义下拉菜单的触发元素

  data-toggle="dropdown":触发下拉菜单

  .dropdown-menu:定义下拉菜单条面板

2.2 示例效果

技术分享

Bootstrap3系列:下拉菜单

标签:

原文地址:http://www.cnblogs.com/libingql/p/5840460.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!