bootstrap 下拉菜单组件与按钮组组件与按钮式下拉菜单

最新推荐文章于 2023-10-12 15:58:24 发布

purple_lumpy

最新推荐文章于 2023-10-12 15:58:24 发布

阅读量1k

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/purple_lumpy/article/details/82531903

版权

bootstrap 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

下拉菜单组件

使用bootstrap 下拉菜单组件，需要引入jquery 与 bootstrap文件夹下js目录下的 bootstrap.js。

	<script src="jq/jquery-3.3.1.min.js"></script>
	<script src="js/bootstrap.js"></script>

下拉菜单，都是包含在.dropdown 的容器里。

data-toggle 的值也为dropdown，菜单项的类名为dropdown-menu。其中，divider 为分割线。

主要代码：

<body>
	<!-- 下拉菜单 -->
	<ul class="nav navbar-nav">
		<li><a href="#">菜单一</a></li>
		<li class="dropdown">
			<a href="#" class="dropdown-toogle" data-toggle="dropdown">
				菜单二<span class="caret"></span>
			</a>
			<ul class="dropdown-menu">
				<li>子菜单一</li>
				<li class="divider"></li>
				<li>子菜单二</li>
			</ul>
		</li>
		<li><a href="#">菜单三</a></li>
	</ul>
</body>

按钮组件

需要放在 .btn-group 里。【按钮组，还有一个类 .btn-group-justified 可使按钮组件横向满屏】

其中，button 可以换成 a

<body>
	<!-- 按钮组 -->
	<div class="btn-group">
		<button class="btn btn-default">首页</button>
		<button class="btn btn-info">分类</button>
		<button class="btn btn-success">喜欢</button>
		
	</div>
	<div class="btn-group">
		<a class="btn btn-default">首页</a>
		<a class="btn btn-info">分类</a>
		<a class="btn btn-success">喜欢</a>
		
	</div>
</body>

按钮工具栏

	<!-- 按钮工具栏 -->
	<div class="btn-toolbar">
		<div class="btn-group">
			<button class="btn btn-default">首页</button>
			<button class="btn btn-info">分类</button>
			<button class="btn btn-success">喜欢</button>
		</div>
		<div class="btn-group">
			<button class="btn btn-default">首页</button>
			<button class="btn btn-info">分类</button>
		</div>
		<div class="btn-group">
			<button class="btn btn-success">喜欢</button>
		</div>
	</div>

按钮式下拉菜单

	<!-- 按钮下拉菜单 -->
	<div class="btn-group">
		<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
			首页 <span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">书1</a></li>
			<li><a href="#">书2</a></li>
		</ul>
	</div>

purple_lumpy

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
bootstrap 下拉菜单组件与按钮组组件与按钮式下拉菜单

下拉菜单组件使用bootstrap 下拉菜单组件，需要引入jquery 与 bootstrap文件夹下js目录下的 bootstrap.js。 &lt;script src="jq/jquery-3.3.1.min.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap.js"&gt;&lt;/script&gt;下拉菜单，都是包含在...
复制链接

扫一扫