专栏首页一“技”之长Bootstrap响应式前端框架笔记七——下拉菜单

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Bootstrap响应式前端框架笔记十八——导航滚动监听

        Bootstrap框架中提供了十分方便的方法来使用导航关联内容快,并且开发者可以监听滚动进行导航按钮的切换,示例如下:

    珲少
  • 标签之美九——列表 原

    无序列表使用<ul></ul>来定义标签的开始和结束。使用<li></li>来设置标签项,示例如下:

    珲少
  • SQLite数据库常用语句及MAC上的SQLite可视化工具MeasSQLlite使用

            在移动开发中,通常会用到一些小型的数据库进行数据管理。SQLite是一款十分小巧便捷的数据库,在iOS开发中,原生框架也对其有很好的支持。

    珲少
  • 《我的PaddlePaddle学习之路》笔记五——验证码的识别

    本次使用的验证码是方正系统,现在很多的大学的教务系统用的就是这个方正系统,刚好既然那么普遍,我们就用它练一练手。经过观察大量的验证码发现,该系统的验证码只有小写...

    夜雨飘零
  • 手工打造分布式爬虫

    專 欄 ❈ 七夜,Python中文社区专栏作者,信息安全研究人员,比较擅长网络安全、逆向工程、Python爬虫开发、Python Web开发。《Python爬...

    Python中文社区
  • 3天初版部署7天快速迭代!百度飞桨携手北京地铁落地AI口罩检测方案

    百度AI抗疫,又有新方案部署落地。这次,事关企业复工后,持续升级的公共交通防疫战。

    量子位
  • 支付宝小程序公测!教程新鲜出炉

    支付宝你这次真是太贴心了,太为广大程序猿朋友们着想了,让我们做到了“一次学习,到处使用”的境界。你也太为写书的朋友们着想了,稍微替换下名字估计就是一本《支付宝小...

    一斤代码
  • IDC机柜利用率最优

    每一个新领导上岗后,基本上都会到IDC视察一圈,然后发生以下对话: 领导:“怎么机柜这么空,没放满?浪费钱啊,一个柜子一年十来万呢”。PS:此时领导心中一堆不...

    大话IT架构
  • 经典Bug永流传---每周一“虫”(二十三)

    人的一生机遇总是有的,如果把握不住,不要怨天忧人,原因只是自己不够优秀;不要把时间当垃圾处理,唯有珍惜光阴,才能提升生命的质量;两点之间未必直线最短,有时迂回...

    厦门-安仔
  • 重磅!小程序出现「超级入口」,快看看你的微信有了吗?

    可以看到,在「朋友圈」、「公众号」等栏目下,出现了 4 个小程序的 logo 和一个「...」符号。

    知晓君

扫码关注云+社区

领取腾讯云代金券