bootstrap 下拉框制作

最新推荐文章于 2024-09-01 16:17:05 发布

.Passion

最新推荐文章于 2024-09-01 16:17:05 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_43923045/article/details/104099508

版权

bootstrap 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.响应式布局
bootstrap 4 文档
基本概念：
一个屏幕分成12等份
看代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>

	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	
	<style>
		div{border:1px #1B6D85 solid;}
	</style>

</head>
<body>
	 
	 
	<div class="container">
		<!-- row只能放在 container 里面	-->
		<div class="col-md-1"></div>
		<div class="col-md-1"></div>
		<div class="col-md-1">col-md-1</div>
		<div class="col-md-1">col-md-1</div>
		<div class="col-md-1">col-md-1</div>
		<div class="col-md-1">col-md-1</div>
		<div class="col-md-1">col-md-1</div>
		<div class="col-md-1">col-md-1</div>
		<div class="col-md-1">col-md-1</div>
		<div class="col-md-1">col-md-1</div>
		<div class="col-md-1">col-md-1</div>
		<div class="col-md-1">col-md-1</div>
	</div>
	<div class="row">
		<!--
			一行 12 份
			小屏幕 6 6 分
			中等屏幕 8 4 分
		-->
		<div class="col-md-8 col-sm-6">8</div>
		<div class="col-md-4 col-sm-6">4</div>
	</div>
	
</body>
</html>

extra small	small	mdeium	large	extra large
.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-

下面使用 bootstrap 制作简单的下拉框

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>

	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	
	<style>
		div{border:1px #1B6D85 solid;}
	</style>

</head>
<body>
	<!--
		下拉菜单
	-->
	
	<div class="container">
		<div class="dropdown">
			<button type="button" class="btn btn-danger">
				下拉菜单
				<span class="caret"></span>
			</button>
		</div>
		<!--
		
			加上 pull-right 右对齐
		-->
		
		<div class="dropdown pull-right">
			<button type="button" class="btn btn-primary" data-toggle="dropdown">
				<span class="glyphicon glyphicon-user">用户消息</span>
				<span class="caret"></span><!-- 小三角 -->
			</button>
			<!-- 下拉选项 加上 dropdown-menu 才有样式  -->
			<ul class="dropdown-menu">
				<li><a href="#">用户管理</a></li>
				<li><a href="#">用户注销</a></li>
			</ul>
		</div>
	</div>
	 
	 
	 
	
</body>
</html>

在这里插入图片描述

<div class="dropdown pull-right">
			<button type="button" class="btn btn-primary" data-toggle="dropdown">
				<span class="glyphicon glyphicon-user">用户消息</span>
				<span class="caret"></span><!-- 小三角 -->
			</button>
			<!-- 下拉选项 加上 dropdown-menu 才有样式  -->
			<ul class="dropdown-menu">
				<li class="dropdown-header">功能模块</li>
				<!-- 标题 -->
				<li><a href="#">用户管理</a></li>
				<li><a href="#">用户注销</a></li>
				<li class="divider"></li>
				<li><a href="#">用户管理</a></li>
				<li><a href="#">用户注销</a></li>
			</ul>
		</div>