文档章节

Bootstrap响应式前端框架笔记七——下拉菜单

珲少
 珲少
发布于 2016/12/09 17:38
字数 656
阅读 80
收藏 0

Bootstrap响应式前端框架笔记七——下拉菜单

    在Bootstrap的Css框架中,下拉菜单属于组件。一个完整的下拉菜单应该有两部分组成,一个触发按钮与一个选项列表。触发按钮dropdown-toggle类来创建,选项列表有drop-menu类来创建,这两部分元素需要包裹在一个dropdown类元素中,才能正确组合,示例代码如下:

		<p>正常的下拉菜单样式</p>
		<div class="dropdown">
			<button class="btn btn-default dropdown-toggle">
				下拉菜单
			<span class="caret"></span>
			</button>
			<ul class="dropdown-menu" >
				<li><a>白羊座</a></li>
				<li><a>金牛座</a></li>
				<li><a>摩羯座</a></li>
				<li><a>狮子座</a></li>
			</ul>
		</div>

默认创建的下拉菜单是隐藏的,为了演示方便,可以将ul的display属性重设:

		<style>
			ul{
				display: block !important;
			}
		</style>

效果如下图:

使用dropdown-menu-left或者dropdown-menu-right可以实现对菜单列表的左对齐或者右对齐。

    为列表的li元素添加dropdown-header类可以将此行设置为头信息行,示例如下:

		<p>可以使用dropdown-header类来进行菜单头的设置</p>
		<div class="dropdown">
			<button class="btn btn-default dropdown-toggle">
				下拉菜单
			<span class="caret"></span>
			</button>
			<ul class="dropdown-menu" >
				<li class="dropdown-header">星座</li>
				<li><a>白羊座</a></li>
				<li><a>金牛座</a></li>
				<li class="dropdown-header">属相</li>
				<li><a>猴</a></li>
			</ul>
		</div>

效果如下图所示:

    为li标签设置divider类可以将此行设置为分割线,示例如下:

		<p>可以使用divider类可以为菜单设置分割线</p>
		<div class="dropdown">
			<button class="btn btn-default dropdown-toggle">
				下拉菜单
			<span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li class="dropdown-header">星座</li>
				<li>
					<a>白羊座</a>
				</li>
				<li>
					<a>金牛座</a>
				</li>
				<li class="divider"></li>
				<li class="dropdown-header">属相</li>
				<li>
					<a>猴</a>
				</li>
			</ul>
		</div>

效果如下:

    可以为li设置disabled类来将此行选项设置为禁用,设置禁用后,此行标签也将无法点击,示例如下:

		<p>可以使用disabled类来禁用某些选项</p>
		<div class="dropdown">
			<button class="btn btn-default dropdown-toggle">
				下拉菜单
			<span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li class="dropdown-header">星座</li>
				<li class="disabled">
					<a>白羊座</a>
				</li>
				<li>
					<a>金牛座</a>
				</li>
				<li class="dropdown-header">属相</li>
				<li>
					<a>猴</a>
				</li>
			</ul>
		</div>

   另外,本篇博客中所有的实例代码及显示效果,在如下地址中,需要的可以自行对照学习。

http://zyhshao.github.io/bootStrapDemo/dropList.html

前端学习新人,有志同道合的朋友,欢迎交流与指导,QQ群:541458536

© 著作权归作者所有

共有 人打赏支持
珲少

珲少

粉丝 862
博文 386
码字总数 463183
作品 0
上海
iOS工程师
私信 提问
Bootstrap响应式前端框架笔记八——按钮组

Bootstrap响应式前端框架笔记八——按钮组 在Bootstrap定义的Css样式中,开发者可以将一组btn控件包裹在btn-group类中使其组合成按钮组控件,组合后的控件左右两侧的按钮将被圆角处理,示例代...

珲少
2016/12/10
19
0
Bootstrap响应式前端框架笔记九——输入框组

Bootstrap响应式前端框架笔记九——输入框组 将input标签与input-group-addon类组合使用可以为输入框添加前后挂件,需要注意,Bootstrap不支持在输入框控件一侧添加多个挂件,示例如下: 效果...

珲少
2016/12/11
130
0
Bootstrap响应式前端框架笔记十——导航栏相关组件

Bootstrap响应式前端框架笔记十——导航栏相关组件 Bootstrap中提供的导航栏分为两种模式,使用nav-tabs类可以创建页卡模式的导航栏,使用nav-pills类可以创建胶囊模式的导航栏,示例如下: ...

珲少
2016/12/12
45
0
小蚂蚁学习Bootstrap(1)——导航条的设置和下拉菜单

久闻Bootstrap的大名,也没有亲手实践过,真是让人手痒的。这也难怪,后端的逻辑往往忙活的令人不可开交,平时几乎没有机会来做前端的东西。前两天在动弹里看到有人吐槽,话说什么一个java程...

嗜学如命的小蚂蚁
2015/11/07
0
2
十大前端开发框架(上)

本文由伯乐在线 -厉瑶 翻译。未经许可,禁止转载! 英文出处:site point。欢迎加入翻译组。 编者按:考虑到英文原文的长度以及可读性,十大前端开发框架将分成上下两部分呈现给大家。上半部...

伯乐在线
2013/07/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

大数据反欺诈技术架构

一年多以前,有朋友让我聊一下你们的大数据反欺诈架构是怎么实现的,以及我们途中踩了哪些坑,怎么做到从30min延迟优化到1s内完成实时反欺诈。当时呢第一是觉得不合适,第二也是觉得场景比较...

微笑向暖wx
10分钟前
0
0
flink-系统内部消息传递的exactly once语义

At Most once,At Least once和Exactly once 在分布式系统中,组成系统的各个计算机是独立的。这些计算机有可能fail。 一个sender发送一条message到receiver。根据receiver出现fail时sender如...

xtof
17分钟前
0
0
iOS程序执行顺序和UIViewController 的生命周期(整理)

说明:此文是自己的总结笔记,主要参考: iOS程序的启动执行顺序 AppDelegate 及 UIViewController 的生命周期 UIView的生命周期 言叶之庭.jpeg 一. iOS程序的启动执行顺序 程序启动顺序图 iO...

壹峰
19分钟前
0
0
配置网络、远程登录、Linux秘钥认证

配置网络 一台服务器安装完系统之后不管是为了方便管理还是业务需要,我们都要给它配置ip地址。让机器能够联网。在现实的生产环境的当中,往往我们给服务器配置的ip都是提前规划好的,但是在...

李超小牛子
22分钟前
0
0
dotConnect for Oracle入门指南(五):检索和修改数据

【下载dotConnect for Oracle最新版本】 dotConnect for Oracle(原名OraDirect.NET)建立在ADO.NET技术上,为基于Oracle数据库的应用程序提供完整的解决方案。它为设计应用程序结构带来了新的...

电池盒
22分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部