Bootstrap下拉菜单

原创 2018年04月16日 12:03:33

.dropdown    将下拉菜单触发器和下拉菜单都包裹再 .dropdown

data-toggle 这是一个属性,下拉菜单触发器,取值为 dropdown

.dropdown-menu 给 <ul> 标签设置的下拉菜单的样式

.dropdown-header 用于设置下拉菜单的标题

.divider 设置一个水平线


一个简单的下拉菜单

		<div class="container">
			<div class="dropdown">	
			<button class="btn btn-success" data-toggle="dropdown">下拉菜单 <span class="glyphicon glyphicon-chevron-down"></span></button>
			<ul class="dropdown-menu">
				<li class="dropdown-header">下拉菜单</li>
				<li><a href="#">下拉菜单</a></li>
				<li><a href="#">下拉菜单</a></li>
				<li><a href="#">下拉菜单</a></li>
				<li><a href="#">下拉菜单</a></li>
				<li><a href="#">下拉菜单</a></li>
			</ul>
			</div>
		</div>
版权声明: https://blog.csdn.net/dfggffdd/article/details/79957596

Bootstrap开发框架

Bootstrap是由Twitter推出的一个前台页面开发框架,在行业之中使用较为广泛。此开发框架包含了大量的CSS、JS程序代码,可以帮助开发者(尤其是不擅长页面开发的程序人员)轻松的实现一个不受浏览器限制的精美界面效果。官方QQ群:612148723。
  • 2017年01月01日 10:10

详解Bootstrap中JS插件实现下拉菜单效果

在编写网站过程中,导航条中下拉菜单功能十分常见。那么,今天就分享一下关于如何通过Bootstrap中JS插件来实现下拉菜单功能。 在官方文档中是这么形容下拉菜单插件的 翻译过来就是: ...
  • wyhstars
  • wyhstars
  • 2017-11-27 23:59:51
  • 1676

玩转Bootstrap(基础) -- (5.下拉菜单)

在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“dropdown.js”的文...
  • Rodgexue
  • Rodgexue
  • 2015-08-21 11:58:16
  • 8839

Bootstrap—制作常用下拉菜单

项目中常常需要用到下来菜单,下面来讲一下如何使用Bootstrap的下拉菜单组件。 先来看一下效果: 这个demo代码如下: 下拉菜单 ...
  • nongweiyilady
  • nongweiyilady
  • 2016-12-14 11:32:06
  • 939

Bootstrap在导航栏上用下拉菜单并保持对齐

Bootstrap简直就是前速成的宝典尽管bootstrap很牛逼,但是在实际运用中还是会有一些问题,比如: 出现了不对齐的情况,我们看看代码: ...
  • tydyz
  • tydyz
  • 2017-07-25 20:07:45
  • 1032

Bootstrap—按钮下拉菜单

按钮下拉菜单,顾名思义,就是一个按钮,点击按钮,弹出下拉菜单。使用bootstrap制作按钮下拉菜单,只需要在一个.btn-grounp中放置按钮和下拉菜单即可。 一般的按钮下拉菜单是这样的: 实现...
  • nongweiyilady
  • nongweiyilady
  • 2016-12-14 14:12:44
  • 1206

Bootstrap下拉菜单使用方法

如何使用Bootstrap下拉菜单组件 Bootstrap下拉菜单组件使用起来非常容易,首先你需要定义一个class="dropdown"的div,然后在这个div标签中写入触发下拉框的按钮以及...
  • u012238748
  • u012238748
  • 2017-01-16 14:52:33
  • 3235

4.2Bootstrap学习js插件篇之下拉菜单

案例 通过此插件可以为几乎所有东西添加下拉菜单,包括导航条、标签页、胶囊式按钮。 用于导航条...
  • a316212802
  • a316212802
  • 2014-05-06 19:06:56
  • 9370

Bootstrap源码解读(第四弹:下拉菜单)

下拉菜单 基本用法 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。因为Bootstrap的组件交互效果都是依赖于jQuery库写的...
  • lianjiww
  • lianjiww
  • 2016-12-22 22:35:41
  • 1094

bootstrap 1-导航条和下拉菜单

1、导航条的制作 基于bootstrap的官网,下载bootstrap的环境,就不多说了。 导航条依赖JavaScript,响应式导航条依赖折叠(collapse)插件 加入以下三个环境的路径 ...
  • sanluo11
  • sanluo11
  • 2017-01-25 13:45:22
  • 1284
收藏助手
不良信息举报
您举报文章:Bootstrap下拉菜单
举报原因:
原因补充:

(最多只允许输入30个字)