Bootstrap学习总结笔记(7)-- 基本组件之下拉菜单
来源:互联网 发布:舞蹈知识软件 编辑:程序博客网 时间:2024/05/16 10:10
对于一些较为常用的功能模块,Bootstrap也进行了封装。包括下拉菜单、按钮组、导航、分页、缩略图、进度条等。
下面先总结下下拉菜单的使用。
直接看下面的例子:
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>下拉菜单</title></head><body><div class="container"> <div class="page-header"> <h1>下拉菜单</h1> </div> <div class="col-lg-6"> <h3>样式1</h3> <div class="dropdown"> <a href="#" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li class="active"><a href="#">菜单1</a></li> <li><a href="#">菜单2</a></li> <li class="divider"></li> <li><a href="#">菜单3</a></li> </ul> </div> </div> <div class="col-lg-6"> <h3>样式2</h3> <div class="dropdown"> <button class="btn btn-lg btn-primary expanded" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="active"><a href="#">菜单1</a></li> <li><a href="#">菜单2</a></li> <li class="divider"></li> <li><a href="#">菜单3</a></li> </ul> </div> </div></div></body></html>
效果如下:
说明:
(1)按钮(超链接)和下拉选择需要包含在<div class=”dropdwon”>…</div>
内;
(2)按钮(超链接)必须添加data-toggle="dropdown"
触发器;
(3)放置下拉选项的无序列表需要添加. dropdown-menu
类;
(4)添加一个空的<li class="divider"></li>
标签来实现分隔列表项。
0 0
- Bootstrap学习总结笔记(7)-- 基本组件之下拉菜单
- Bootstrap组件之下拉菜单
- Bootstrap组件之下拉菜单
- 3.1Bootstrap学习组件篇之下拉菜单、图标
- 3.1Bootstrap学习组件篇之下拉菜单、图标
- HTML笔记(八)bootstrap之下拉菜单
- Bootstrap之下拉菜单dropdown
- 4.2Bootstrap学习js插件篇之下拉菜单
- Bootstrap学习总结笔记(10)-- 基本组件之导航
- Bootstrap学习总结笔记(12)-- 基本组件之分页
- Bootstrap学习总结笔记(13)-- 基本组件之缩略图
- Bootstrap学习总结笔记(14)-- 基本组件之面板
- Bootstrap学习总结笔记(15)-- 基本组件之进度条
- 敏捷思维学习Ext.Net MVC--3.5Form表单组件之下拉菜单(ComboBox)
- jQueryMobile的组件之下拉菜单(selectMenu)
- 前端插件Bootstrap之下拉选学习(一)
- Bootstrap学习总结笔记(8)-- 基本组件之按钮组
- Bootstrap学习总结笔记(9)-- 基本组件之input输入框组
- 重新初始化VS
- stm321
- 了解一下border-radius的实现原理
- hadoop中的序列化
- muduo网络库定时器的实现
- Bootstrap学习总结笔记(7)-- 基本组件之下拉菜单
- 微信公众平台两个推广小技巧
- NYOJ-169 素数
- 大师们,过来!看我怎么玩自媒体平台
- ios中crash检测方法
- Leetcode在线编程word-break
- 微信,一劳永逸的吸粉大法
- Bootstrap学习总结笔记(8)-- 基本组件之按钮组
- 微信吸粉实战二:腾讯新闻