Day-9 bootstrap 卡片、下拉菜单

最新推荐文章于 2024-07-06 06:47:38 发布
最新推荐文章于 2024-07-06 06:47:38 发布
阅读量388 收藏 3
点赞数
分类专栏： BootStrap4 文章标签： html bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43756494/article/details/109102242
版权

卡片、下拉菜单

卡片

1. 简单的卡片（.card .card-body）

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="card">
				<div class="card-body">简单的卡片</div>
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

2. 头部和底部（.card .card-head .card-body .card-footer）

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="card">
				<div class="card-header">头部</div>
				<div class="card-body">内容</div>
				<div class="card-footer">底部</div>
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

3. 多种颜色卡片

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="card">
				<div class="card-body">Basic card</div>
			</div>
			<br>
			<div class="card bg-primary text-white">
				<div class="card-body">Primary card</div>
			</div>
			<br>
			<div class="card bg-success text-white">
				<div class="card-body">Success card</div>
			</div>
			<br>
			<div class="card bg-info text-white">
				<div class="card-body">Info card</div>
			</div>
			<br>
			<div class="card bg-warning text-white">
				<div class="card-body">Warning card</div>
			</div>
			<br>
			<div class="card bg-danger text-white">
				<div class="card-body">Danger card</div>
			</div>
			<br>
			<div class="card bg-secondary text-white">
				<div class="card-body">Secondary card</div>
			</div>
			<br>
			<div class="card bg-dark text-white">
				<div class="card-body">Dark card</div>
			</div>
			<br>
			<div class="card bg-light text-dark">
				<div class="card-body">Light card</div>
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

4. 标题、文本和链接（.card-title .card-text .card-link）

  .card-title 类来设置卡片的标题 。 .card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="card">
				<div class="card-body">
					<h4 class="card-title">FULTON雨伞</h4>
					<p class="card-text">英国王室御用 一键自动开关 双层抗风伞</p>
					<a href="#" class="card-link">加入购物车</a>
					<a href="#" class="card-link">立即付款</a>
				</div>
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

5. 图片卡片

1. 卡片在头部 / 底部（.card-img-top / .card-img-bottom）

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
	
			<p>图片在头部:</p>
			<div class="card" style="width:400px">
				<img class="card-img-top" src="img/1.jpg" alt="Card image" style="width:100%">
				<div class="card-body">
					<h4 class="card-title">FULTON雨伞</h4>
					<p class="card-text">英国王室御用 一键自动开关 双层抗风伞</p>
					<a href="#" class="btn btn-primary">立即付款</a>
				</div>
			</div>
			<br>

			<p>图片在底部:</p>
			<div class="card" style="width:400px">
				<div class="card-body">
					<h4 class="card-title">FULTON雨伞</h4>
					<p class="card-text">英国王室御用 一键自动开关 双层抗风伞</p>
					<a href="#" class="btn btn-primary">立即付款</a>
				</div>
				<img class="card-img-top" src="img/1.jpg" alt="Card image" style="width:100%">
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述
在这里插入图片描述

2. 图片设置为背景（.card-img-overlay）

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="card img-fluid" style="width:500px">
				<img class="card-img-top" src="img/1.png" alt="Card image" style="width:100%">
				<div class="card-img-overlay">
					<h4 class="card-title">FULTON雨伞</h4>
					<p class="card-text">英国王室御用 一键自动开关 双层抗风伞</p>
					<a href="#" class="btn btn-primary">立即付款</a>
				</div>
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

下拉菜单

1. 基础下拉菜单（.dropdown .dropdown-menu .dropdown-toggle data-toggle=“dropdown” 属性）

  Bootstrap4 下拉菜单依赖于 popper.min.js。

  下拉菜单是可切换的以列表格式显示链接的上下文菜单。

  .dropdown 类用来指定一个下拉菜单。.dropdown-menu 类来设置实际下拉菜单。我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 属性。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="dropdown">
				<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
					dropdown button
				</button>
				<div class="dropdown-menu">
					<a href="#" class="dropdown-item">1</a>
					<a href="#" class="dropdown-item">2</a>
					<a href="#" class="dropdown-item">3</a>
				</div>
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述
  也可以在 < a > 标签中使用：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="dropdown">
				<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					Dropdown link
				</a>
				<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
					<a class="dropdown-item" href="#">Action</a>
					<a class="dropdown-item" href="#">Another action</a>
					<a class="dropdown-item" href="#">Something else here</a>
				</div>
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述
注：1. aria-haspopup :true表示点击的时候会出现菜单或是浮动元素； false表示没有pop-up效果。aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的。

  2. 正常情况下，form表单的input组件有对应 的label，当input组件获取焦点时，屏幕阅读器读出相应的label里的文本。但是如果我们没有给输入框设置label时，当其获得焦点时，屏幕阅读器会读出aria-label属性的值，aria-label不会在视觉上呈现效果。当想要的标签文本已在其他元素中存在时，可以使用aria-labelledby，并将其值为所有读取的元素的id。如果一个元素同时有aria-labelledby和aria-label，读屏软件会优先读出aria-labelledby的内容。

2. 下拉菜单中的分割线（.dropdown-divider）

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="dropdown">
				<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
					dropdown button
				</button>
				<div class="dropdown-menu">
					<a href="#" class="dropdown-item">1</a>
					<a href="#" class="dropdown-item">2</a>
					<a href="#" class="dropdown-item">3</a>
					<div class="dropdown-divider"></div>
					<a href="#" class="dropdown-item">4</a>
				</div>
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

3. 下拉菜单中的标题（.dropdown-header）

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="dropdown">
				<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
					dropdown button
				</button>
				<div class="dropdown-menu">
					<h5 class="dropdown-header">标题</h5>
					<a href="#" class="dropdown-item">1</a>
					<a href="#" class="dropdown-item">2</a>
					<a href="#" class="dropdown-item">3</a>
					<h5 class="dropdown-header">标题</h5>
					<a href="#" class="dropdown-item">4</a>
				</div>
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

4. 下拉菜单中的可用项与禁用项（.active .disabled）

  .active 类：下拉菜单的选项高亮显示 (添加蓝色背景)。

  .disabled 类：禁用下拉菜单的选项。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="dropdown">
				<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
					dropdown button
				</button>
				<div class="dropdown-menu">
					<a href="#" class="dropdown-item">1</a>
					<a href="#" class="dropdown-item active">2</a>
					<a href="#" class="dropdown-item disabled">3</a>
				</div>
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

5. 下拉菜单的定位（.dropdown-menu-right / left）

代码如下：下拉菜单右对齐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="dropdown">
				<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
					dropdown button
				</button>
				<div class="dropdown-menu dropdown-menu-right">
					<a href="#" class="dropdown-item">1</a>
					<a href="#" class="dropdown-item">2</a>
					<a href="#" class="dropdown-item">3</a>
				</div>
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

6. 按钮中设置下拉菜单

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="btn-group">
				<button type="button" class="btn btn-primary">水果</button>
				<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
					<span class="caret"></span>
				</button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="#">苹果</a>
					<a class="dropdown-item" href="#">桃子</a>
				</div>
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

7. 下拉菜单弹出方向设置（.dropup / .dropright / .dropleft）

  下拉菜单弹出方向默认为向下，也可以指定向右 / 左 / 上弹出的下拉菜单。

代码如下：指定向右弹出的下拉菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="btn-group dropright">
				<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
				 aria-expanded="false">
					Dropright
				</button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="#">1</a>
					<a class="dropdown-item" href="#">2</a>
					<a class="dropdown-item" href="#">3</a>
					<div class="dropdown-divider"></div>
					<a class="dropdown-item" href="#">4</a>
				</div>
			</div>

			<!-- Split dropright button -->
			<div class="btn-group dropright">
				<button type="button" class="btn btn-primary">
					Split dropright
				</button>
				<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
				 aria-haspopup="true" aria-expanded="false">
					<span class="sr-only"> Dropright</span>
				</button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="#">1</a>
					<a class="dropdown-item" href="#">2</a>
					<a class="dropdown-item" href="#">3</a>
					<div class="dropdown-divider"></div>
					<a class="dropdown-item" href="#">4</a>
				</div>
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述
代码如下：指定向左弹出的下拉菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="btn-group dropleft">
				<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
				 aria-expanded="false">
					Dropright
				</button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="#">1</a>
					<a class="dropdown-item" href="#">2</a>
					<a class="dropdown-item" href="#">3</a>
					<div class="dropdown-divider"></div>
					<a class="dropdown-item" href="#">4</a>
				</div>
			</div>

			<!-- Split dropright button -->
			<div class="btn-group dropleft">
				<button type="button" class="btn btn-primary">
					Split dropright
				</button>
				<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
				 aria-haspopup="true" aria-expanded="false">
					<span class="sr-only"> Dropright</span>
				</button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="#">1</a>
					<a class="dropdown-item" href="#">2</a>
					<a class="dropdown-item" href="#">3</a>
					<div class="dropdown-divider"></div>
					<a class="dropdown-item" href="#">4</a>
				</div>
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

Bootstrap 按钮下拉菜单
xyq2024的博客
04-02 356
Bootstrap 按钮下拉菜单是一种实用的组件，可以帮助开发者快速构建丰富的交互体验。通过本文的介绍，相信读者已经掌握了按钮下拉菜单的基本结构、创建方法、样式定制以及使用场景。在实际开发中，可以根据具体需求进行相应的调整和优化。
bootstrap中分页、面包屑导航、列表组、卡片、下拉菜单、折叠
专研前端，探索后端
05-16 1404
分页： 分页功能是当遇到数据很多时，如果都放到一个页面上，那么找起来很不方便，而且不利于性能。此时采用分页功能就能很好的优化用户体验，可是如果自己开发分页功能，那么就会影响开发效率，bootstrap提供了分页功能，可以很好的解决这个问题，其用法：给父级ul标签添加pagination类，给子级li添加page-item,类样式如下： 类名 描述 .pagination 分页功能的容器添加的类名，用于布局 .page-item 给分页功能里面每一项添加的类名，用于选择伪类 ，布局链接样式
HTML5折叠卡片式下拉菜单代码
10-25
HTML5折叠卡片式下拉菜单代码
bootstrap js插件篇——下拉菜单、滚动监测、选项卡
大小都是愁的成长之路
07-14 3078
三、下拉菜单 3.1基本结构 3.2 触发方式  注：1、测试时发现js触发的下拉菜单点时只出现无法消失，建议data-toggle触发         2、如果触发下拉菜单的元素是一个链接元素，为了避免点击链接，页面跳到顶部，可以使用                 data-target="#"来替代href="#" 四、滚动侦测 4.1 基本结构
【干货】通过Bootstrap框架添加下拉框到导航栏
未名编程
08-16 1595
代码文件为https://v3.bootcss.com/components/#navbar-default 要使上面的代码正常工作，您需要引入Bootstrap的CSS和JavaScript文件。这些文件可以从Bootstrap官方网站下载，也可以使用CDN（内容分发网络）链接引入。以下是引入所需文件的方法：引入Bootstrap的CSS文件：在页面的部分添加以下代码，用于引入Bootstrap的CSS文件，以确保样式正确应用。
Bootstrap的下拉菜单组件相关知识
昊虹AI笔记
10-12 3420
Bootstrap的下拉菜单组件
day53:bootstrap live 3
05-15
2. **组件**：Bootstrap包含多种预定义的UI组件，例如导航条（`<nav>`）、下拉菜单（`.dropdown`）、按钮组（`.btn-group`）、卡片（`.card`）等。熟练运用这些组件可以提高开发效率。 3. **响应式设计**：...
bootstrap_day1：探索酒店管理系统的设计与实现
例如，模态框、下拉菜单、轮播图等。因此，在开发酒店管理系统时，理解和运用JavaScript是必不可少的。 6. 开发环境搭建 为了开始开发一个基于Bootstrap的酒店管理系统，需要先搭建开发环境。这包括安装必要的开发...
35.BootStrap.zip
09-16
3. **组件**：Bootstrap包含许多可重用的UI组件，如导航条（navbar）、按钮（buttons）、表单（forms）、模态框（modals）、下拉菜单（dropdowns）和卡片（cards）。这些组件都遵循一致的设计风格，使得整个网站看...
Top 10 swift projects on github
fishmai的专栏
05-15 1093
1.iina A few of the Features: Based on mpv, which provides the best decoding capacity on macOS Designed for modern macOS (10.10+), aims to offer the best user experience All the features you nee...
bootstrap4 popper.min.js
qq_32304985的博客
04-10 7412
bootstrap4 popper.min.js popper.min.js 用于设置弹窗、提示、下拉菜单，是第三方插件，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js，所以bootstarp4的js只引用 bootstrap.bundle.min.js即可 <script src="bootstrap-4.4.1/js/popper.min.js" ></script> <script src="bootstrap-4.4.1
使用Bootstrap设计一个下拉菜单
m0_64962002的博客
05-18 839
使用Bootstrap设计一个下拉列表框
【前端开发】bootstrap框架：下拉菜单
`雾博客
06-18 4005
如需使用下拉菜单，只需要在 class。
bootstrap multiselect下拉列表多选组件[转载]
willeny的博客
08-16 4694
转载地址：http://www.cnblogs.com/landeanfen/p/7457283.html 阅读目录 一、组件开源地址以及API说明 二、组件效果示例 三、使用示例 1、基础示例 2、其他效果示例 3、组件取值赋值 4、组件其他用法 5、组件封装 四、源码下载 五、总结 正文 前言：之前分享过两篇bootstrap下拉框的组件：JS组件系列——两种bootstrap ...
Bootstrap框架--1.5下拉菜单
weixin_46479909的博客
07-07 349
target="_blank"：新开一个窗口打开链接。
零基础Bootstrap入门教程(19)--下拉菜单、按钮式下拉菜单
程序员大阳
02-28 4087
本文目录1. 概述2. 下拉菜单2.1 普通下拉菜单2.2 更换颜色2.3 更换尺寸2.4 添加分割线2.5 菜单分组2.6 上拉菜单3. 按钮式下拉菜单4. 小结 1. 概述 下拉菜单使用频率也是比较高的，比较常见的使用场景是在导航菜单栏，某个主菜单含有下拉的子菜单。 Bootstrap为下拉菜单提供了两种实现方式，即普通的下拉菜单还有按钮式的下拉菜单。我们先看一张图观察下，从图中可以看出，普通下拉菜单和按钮式下拉菜单的样式基本相同，唯一比较明显的区别是：普通下拉菜单相当于菜单，前后自动换行；而按钮式的下
Bootstrap 下拉菜单
最新发布
csbysj2020的博客
07-06 595
Bootstrap 下拉菜单是一种交互式组件，它允许用户点击一个按钮或链接，从而打开一个包含多个选项的列表。用户可以从这个列表中选择一个选项，然后下拉菜单会关闭，并显示用户的选择。下拉菜单通常用于表单、导航栏和其他需要从多个选项中选择一个值的场景。虽然 Bootstrap 提供了一套默认的样式，但你可能需要根据项目的需求来定制下拉菜单的样式。你可以通过编写自定义 CSS 来实现这一点。例如，你可以改变下拉菜单的背景颜色、边框颜色、字体大小等。
Bootstrap可输入的下拉框
qq_43384268的博客
07-21 3523
datalist>标签被用来在为元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。请使用标签以及标签，轻松实现。标签规定了元素可能的选项列表。请使用元素的list属性来绑定元素。标签规定了元素可能的选项列表。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值