文档章节

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

珲少
 珲少
发布于 2016/12/09 17:38
字数 656
阅读 66
收藏 0
点赞 0
评论 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

© 著作权归作者所有

共有 人打赏支持
珲少

珲少

粉丝 836
博文 375
码字总数 440447
作品 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
Bootstrap响应式前端框架笔记十五——面板与井

Bootstrap响应式前端框架笔记十五——面板与井 Bootstrap中的面板由pannel相关类来创建,一个完整的面板分为面板头部、面板体和面板注脚,并且Bootstrap中默认定义了一些面板风格,示例如下:...

珲少
2016/12/22
22
0
Bootstrap响应式前端框架笔记十七——下拉列表交互

Bootstrap响应式前端框架笔记十七——下拉列表交互 为dropdown-toggle类添加data-toggle="dropdown"属性可以实现其下拉列表功能的绑定,示例如下: 点击此按钮后,可以自动实现下拉列表的显示...

珲少
2016/12/27
101
0
十大前端开发框架(下)

本文由伯乐在线 -厉瑶 翻译。未经许可,禁止转载! 英文出处:Site Point。欢迎加入翻译组。 在《十大前端开发框架(上)》中我们了解了跟Bootstrap相关的一系列前端开发框架,如果你对于Boo...

伯乐在线
2013/07/01
0
0
Bootstrap学习笔记(二)

7.响应式表单 表单组样式:将和表单元素包含其中,可以获得更好的排列 表单元素样式:常用于、、元素 内联表单样式(用于form表单):可以使元素一行显示 在一侧加入附加内容 或 类应用到一系...

Mr_欢先生
2017/11/02
0
0
Bootstrap响应式前端框架笔记十二——巨幕与缩略图

Bootstrap响应式前端框架笔记十二——巨幕与缩略图 巨幕用于创建一块区域,此区域可以用来展示网页页头或者需要重点提示的地方,使用jumbotron类来创建巨幕,示例如下: 效果如下: 除了使用...

珲少
2016/12/14
232
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

MyBatis入门

一、安装 <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>x.x.x</version></dependency> 二、从 XML 中构建 SqlSessionFactory String r......

一个yuanbeth
10分钟前
0
0
聊聊spring cloud的LoadBalancerAutoConfiguration

序 本文主要研究一下spring cloud的LoadBalancerAutoConfiguration RibbonAutoConfiguration spring-cloud-netflix-ribbon-2.0.0.RC2-sources.jar!/org/springframework/cloud/netflix/ribb......

go4it
12分钟前
0
0
【转】使用Lombok来优雅的编码

前言 Lombok 是一种 Java™ 实用工具,可用来帮助开发人员消除 Java 的冗长,尤其是对于简单的 Java 对象(POJO)。它通过注解实现这一目的。 正文 添加依赖 在 pom.xml 文件中添加相关依赖:...

HAVENT
14分钟前
0
0
Dubbo 源码解读 —— 可支持序列化及自定义扩展

一、概述 从源码中,我们可以看出来。目前,Dubbo 内部提供了 5 种序列化的方式,分别为 fastjson、Hessian2、Kryo、fst 及 Java原生支持的方式 。 针对不同的序列化方式,对比内容如下: 名...

Ryan-瑞恩
22分钟前
0
0
MySQL内存设置—— MySQL server has gone away

set global max_allowed_packet=268435456

一梦心草
31分钟前
0
0
推导式

列表、集合和字典推导式 列表推导式是Python最受喜爱的特性之一。它允许用户方便的从一个集合过滤元素,形成列表,在传递参数的过程中还可以修改元素。形式如下: [expr for val in collect...

火力全開
36分钟前
0
0
maven配置文件settings.xml详解

settings.xml有什么用? 如果在Eclipse中使用过Maven插件,想必会有这个经验:配置settings.xml文件的路径。 settings.xml文件是干什么的,为什么要配置它呢? 从settings.xml的文件名就可以...

浮躁的码农
41分钟前
0
0
MakeCode图形化编程语言学习笔记:micro:bit编程练习题[图]

MakeCode图形化编程语言学习笔记:micro:bit编程练习题[图]: 基础训练题: Q1:摇晃micro:bit编程板,随机出现7个小动物图标中的一个,并且前后相邻两次出现的小动物不重复。 注:七个小动物...

原创小博客
41分钟前
0
0
Redis 压力测试说明

Redis 压力测试说明 redis压力测试 2014-03-24 21:41:07| 分类: 默认分类 | 标签:redis |举报|字号 订阅 这几天对比测试mongodb、redis、pg的性能,主要是在消息队列、消息处理、用户经纬度...

舒文joven
42分钟前
0
0
拉姆达表达式 追加 条件判断 Expression>

public static class PredicateBuilder {   /// <summary>   /// 机关函数应用True时:单个AND有效,多个AND有效;单个OR无效,多个OR无效;混应时写在AND后的OR有效   /// </summary...

Lytf
54分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部