bootstrap扩展组件

最新推荐文章于 2020-07-20 04:26:30 发布

原创最新推荐文章于 2020-07-20 04:26:30 发布 · 479 阅读

0 ·

CC 4.0 BY-SA版权

javaweb学习笔记专栏收录该内容

77 篇文章

订阅专栏

本文探讨了在功能繁多的页面中如何利用下拉菜单进行有效管理，以及微章在邮件系统中的应用，展示了具体的HTML代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下拉菜单

在某些功能太多的时候,直接将所有的按钮或联机直接定义在页面上会非常混乱,因此可以使用下拉菜单的形式处理
如果要实现下拉菜单十一列表组建为主实现的.
示例,定义下拉菜单

<div class="dropdown">
	<button class="btn btn-primary dropdown-toggle" type="button" id="editDropdown"
	data-toggle="dropdown">
		<span class="glyphicon glyphicon-pencil">&nbsp;</span>
		编辑&nbsp;
		<span class=" glyphicon glyphicon-menu-down "></span>
	</button>
	<ul class="dropdown-menu" aria-labelledby="editDropdown">
		<li><a class="btn">修改</a></li>
		<li><a class="btn">删除</a></li>
		<li><a class="btn">另存为</a></li>
	</ul>
</div>

在这里插入图片描述

但是这个时候给出的每一个下拉列表想实际上都是表示具体内容,所以也可以对其进行一些装饰
装饰菜单

<div class="dropdown">
	<button class="btn btn-primary dropdown-toggle" type="button" id="editDropdown"
	data-toggle="dropdown">
		<span class="glyphicon glyphicon-pencil">&nbsp;</span>
		编辑&nbsp;
		<span class=" glyphicon glyphicon-menu-down "></span>
	</button>
	<ul class="dropdown-menu" aria-labelledby="editDropdown">
		<li><a ><span class="glyphicon glyphicon-edit"></span>&nbsp;修改</a></li>
		<li role="separator" class="divider"></li>
		<li><a ><span class="glyphicon glyphicon-remove"></span>&nbsp;删除</a></li>
		<li><a><span class=" glyphicon glyphicon-save-file "></span>&nbsp;另存为</a></li>
	</ul>
</div>

在这里插入图片描述

当一个页面的功能过多时,使用这样的方式可以很好的管理页面按钮

微章

在邮件系统中经常会出现用户维度邮件数量,所以徽章主要就是这种功能
使用徽章

<li><a ><span class=""></span>&nbsp;未读消息<span class="badge">22</span></a></li>
<li role="separator" class="divider"></li>
<li><a ><span class=""></span>&nbsp;全部邮件<span class="badge">99+</span></a></li>

在这里插入图片描述

如果做的更专业一点,也可以将其时限为一个下拉列表显示

<div class="dropdown">
	<button class="btn btn-primary dropdown-toggle" type="button" id="editDropdown"
	data-toggle="dropdown">
		<span class=" glyphicon glyphicon-envelope ">&nbsp;</span>
		我的邮件&nbsp;
		<span class=" glyphicon glyphicon-menu-down "></span>
	</button>
	<ul class="dropdown-menu" aria-labelledby="editDropdown">
		<li><a ><span class="glyphicon glyphicon-folder-open"></span>&nbsp;未读消息<span class="badge">22</span></a></li>
		<li role="separator" class="divider"></li>
		<li><a ><span class="glyphicon glyphicon-th"></span>&nbsp;全部邮件<span class="badge">99+</span></a></li>
		<li><a><span class="glyphicon glyphicon-trash"></span>&nbsp;回收站</a></li>
	</ul>
</div>

在这里插入图片描述