Bootstarp4总节(2)

最新推荐文章于 2024-05-10 16:46:02 发布
最新推荐文章于 2024-05-10 16:46:02 发布
阅读量129 收藏
点赞数
分类专栏： Bootstrap4 文章标签： css html5 html bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wildkingxue/article/details/119916869
版权

一.Bootstrap4 按钮

按钮类可用于 <a>, <button>, 或 <input> 元素上。

.btn设置边框
.btn-lg设置大按钮
.btn-sm设置小按钮
.btn-block 

设置块级按钮

.active 设置按钮可用
.disabled 设置按钮不可用

 注意 <a> 元素不支持 disabled 属性，你可以通过添加 .disabled 类来禁止链接的点击。

1.<a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
		<title>Bootstrap4 按钮</title>
	</head>
	<body>
		<div class="container">
			<a class="btn btn-link btn-outline-success btn-lg btn-block" href="#"><span>按钮</span></a>
			<a class="btn btn-primary btn-outline-success btn-block" href="#"><span>按钮</span></a>
			<a class="btn btn-warning btn-outline-success btn-sm btn-block" href="#"><span>按钮</span></a>
		</div>
	</body>
</html>

2.<button>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
		<title>Bootstrap4 按钮</title>
	</head>
	<body>
		<div class="container">
			<!-- btn 基本按钮
			btn-outline-** 设置鼠标移动到按钮上的背景颜色
			btn-** 设置边框背景颜色
			btn-block 设置为块级按钮
			btn-lg 设置大按钮
			btn-sm 设置小按钮 -->
			<button class="btn btn-success btn-lg btn-outline-primary btn-block">按钮</button>
			<button class="btn btn-info btn-outline-primary btn-block">按钮</button>
			<button class="btn btn-secondary btn-sm btn-outline-primary btn-block">按钮</button>
			<button class="btn btn-secondary btn-sm btn-outline-primary btn-block disabled">按钮</button>
		</div>
	</body>
</html>

3.<input>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
		<title>Bootstrap4 按钮</title>
	</head>
	<body>
		<div class="container">
			<input type="button" value="按钮" class="btn btn-secondary btn-outline-success btn-lg btn-block"/>
			<input type="button" value="按钮" class="btn btn-info btn-outline-success btn-block"/>
			<input type="button" value="按钮" class="btn btn-primary btn-outline-success btn-sm btn-block"/>
		</div>
	</body>
</html>

 二.Bootstrap4 按钮组

Bootstrap 4 中允许我们将按钮放在同一行上。

.btn-group 创建按钮组
.btn-group-lg大按钮
.btn-group-lg小按钮
.btn-group-vertical垂直按钮

1.使用<a>标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
		<title>Bootstrap4 按钮</title>
	</head>
	<body>
		<div class="container">
			<!-- btn-group按钮组
			btn-group-lg大按钮组
			btn-group-sm小按钮组 -->
			<div class="btn-group btn-group-lg">
				<a class="btn btn-link btn-outline-success" href="#"><span>按钮</span></a>
				<a class="btn btn-primary btn-outline-success" href="#"><span>按钮</span></a>
				<a class="btn btn-warning btn-outline-success" href="#"><span>按钮</span></a>
			</div>
			<div class="btn-group">
				<a class="btn btn-link btn-outline-success" href="#"><span>按钮</span></a>
				<a class="btn btn-primary btn-outline-success" href="#"><span>按钮</span></a>
				<a class="btn btn-warning btn-outline-success" href="#"><span>按钮</span></a>
			</div>
			<div class="btn-group btn-group-sm">
				<a class="btn btn-link btn-outline-success" href="#"><span>按钮</span></a>
				<a class="btn btn-primary btn-outline-success" href="#"><span>按钮</span></a>
				<a class="btn btn-warning btn-outline-success" href="#"><span>按钮</span></a>
			</div>
		</div>
	</body>
</html>

2.使用<button>标签

不列举

3.使用<input>标签

不列举

4.垂直按钮组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
		<title>下拉菜单</title>
	</head>
	<body>
		<div class="container">
			<div class="btn-group btn-group-lg btn-group-vertical">
				<button class="btn btn-success btn-outline-primary">运动</button>
				<button class="btn btn-success btn-outline-primary">游戏</button>
				<button class="btn btn-success btn-outline-primary">舞蹈</button>
			</div>
		</div>
	</body>
</html>

 

5.内嵌按钮及下拉菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
		<title>下拉菜单</title>
	</head>
	<body>
		<div class="container">
			<div class="btn-group btn-group-lg">
				<button class="btn btn-success btn-outline-primary">运动</button>
				<div class="btn-group">
					<button class="btn btn-success btn-outline-primary dropdown-toggle" data-toggle="dropdown">游戏</button>
					<div class=" dropdown-menu">
						<a href="#" class="dropdown-item">王者荣耀</a>
						<a href="#" class="dropdown-item">刺激战场</a>
					</div>
				</div>
				<button class="btn btn-success btn-outline-primary">舞蹈</button>
			</div>
		</div>
	</body>
</html>

  

6.垂直按钮组及下拉菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
		<title>垂直下拉菜单</title>
	</head>
	<body>
		<div class="container">
			<!-- btn-group-vertical垂直下拉 -->
			<div class="btn-group btn-group-vertical">
				<div class="btn-group">
					<button class="btn btn-success btn-outline-primary dropdown-toggle"data-toggle="dropdown">游戏</button>
					<div class=" dropdown-menu">
						<span class="dropdown-item">王者荣耀</span>
						<span class="dropdown-item">刺激战场</span>
					</div>
				</div>
				<div class="btn-group">
					<button class="btn btn-success btn-outline-primary dropdown-toggle"data-toggle="dropdown">运动</button>
					<div class=" dropdown-menu">
						<span class="dropdown-item">游泳</span>
						<span class="dropdown-item">跑步</span>
					</div>
				</div>
				<div class="btn-group">
					<button class="btn btn-success btn-outline-primary dropdown-toggle"data-toggle="dropdown">舞蹈</button>
					<div class=" dropdown-menu">
						<span class="dropdown-item">机械舞</span>
						<span class="dropdown-item">地板舞</span>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

 三.Bootstrap4 徽章（Badges）

徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 <span> 元素上即可。 徽章可以根据父元素的大小的变化而变化。

.badge-**--设置颜色

.badge-pill--设置药丸形状的徽章

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
		<title>Bootstrap4 徽章</title>
	</head>
	<body>
		<div class="container">
			<h1>测试徽章 <span class="badge badge-secondary">New</span></h1>
			<h2>测试徽章 <span class="badge badge-success">New</span></h2>
			<h3>测试徽章 <span class="badge badge-primary">New</span></h3>
			<h4>测试徽章 <span class="badge badge-danger">New</span></h4>
			<h5>测试徽章 <span class="badge badge-warning">New</span></h5>
			<h6>测试徽章 <span class="badge badge-info">New</span></h6>
		</div>
	</body>
</html>

 四.Bootstrap4 进度条

创建一个基本的进度条的步骤如下：

1.添加一个带有 .progress 类的 <div>。

2.接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。

3.添加一个带有百分比表示的宽度的 style 属性。

 .progress-bar-striped ---设置条纹进度条

 .progress-bar-animated---进度条添加动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
		<title>Bootstrap4 进度条</title>
	</head>
	<body>
		<div class="container">
			<!-- progress-bar精度标签
			bg-info颜色
			progress-bar-striped带有条纹
			progress-bar-animated添加动画 -->
			<div class="progress">
				<div class="progress-bar bg-info progress-bar-striped progress-bar-animated"style="width: 60%;">60%</div>
			</div>
		</div>
	</body>
</html>

混合色彩进度条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
		<title>Bootstrap4 混合色进度条</title>
	</head>
	<body>
		<div class="container">
			<!-- progress-bar精度标签
			bg-info颜色
			progress-bar-striped带有条纹
			progress-bar-animated添加动画 -->
			<div class="progress">
				<div class="progress-bar bg-info progress-bar-striped progress-bar-animated"style="width: 20%;"></div>
				<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated"style="width: 35%;"></div>
				<div class="progress-bar bg-success progress-bar-striped progress-bar-animated"style="width: 40%;"></div>
			</div>
		</div>
	</body>
</html>

 六.Bootstrap4 分页

要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类

.active 

高亮显示

.disabled

分页链接不可点击

.pagination-lg大字体的分页条目
.pagination-sm小字体的分页条目
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
		<title>Bootstrap4 分页</title>
	</head>
	<body>
		<div class="container">
			<!-- 给&lt;ul&gt;添加.pagination;给&lt;li&gt;添加.page-item;给&lt;a&gt;添加.page-link实现分页效果 
			.active高亮显示
			.disabled不可被点击 -->
			<ul class="pagination">
				<li class="page-item"><a href="#" class="page-link">首页</a></li>
				<li class="page-item disabled"><a href="#" class="page-link">上一页</a></li>
				<li class="page-item active"><a href="#" class="page-link">1</a></li>
				<li class="page-item"><a href="#" class="page-link">2</a></li>
				<li class="page-item"><a href="#" class="page-link">3</a></li>
				<li class="page-item"><a href="#" class="page-link">下一页</a></li>
				<li class="page-item"><a href="#" class="page-link">尾页</a></li>
			</ul>
		</div>
	</body>
</html>

七.Bootstrap4 列表组

创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类:

.active 类来设置激活状态的列表项

.disabled 类用于设置禁用的列表项

1.用<ul>创建列表组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
		<title>列表组</title>
	</head>
	<body>
		<div class="container">
			<ul class="list-group text-danger" style="width: 100px;height: 40px;">
				<li class="list-group-item bg-info">男装</li>
				<li class="list-group-item bg-info">女装</li>
				<li class="list-group-item bg-info">家具</li>
				<li class="list-group-item bg-info">家电</li>
			</ul>
		</div>
	</body>
</html>

 2.使用<a>创建列表

创建一个链接的列表项，可以将<div> 替换为<ul> ， <a> 替换 <li>即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
		<title>列表组</title>
	</head>
	<body>
		<div class="container">
			<div class="list-group text-center" style="width: 100px;height: 40px;">
				<a href="#" class="list-group-item list-group-item-success list-group-item-action">男装</a>
				<a href="#" class="list-group-item list-group-item-info list-group-item-action">女装</a>
				<a href="#" class="list-group-item list-group-item-secondary list-group-item-action">家具</a>
				<a href="#" class="list-group-item active list-group-item-light list-group-item-action">家电</a>
			</div>
		</div>
	</body>
</html>

 3.鼠标悬停显示灰色背景

添加.list-group-item-action 可以使鼠标悬停显示灰色背景。

4.列表颜色

设置列表颜色有：

.list-group-item-success,

.list-group-item-secondary, 

.list-group-item-info, 

.list-group-item-warning, 

.list-group-item-danger,

. list-group-item-dark 

.list-group-item-light......

5.链接的多种颜色列表项

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
		<title>多种颜色列表组</title>
	</head>
	<body>
		<div class="container">
			<div class="list-group">
				<a href="#" class="list-group-item list-group-item-action">激活列表项</a>
				<a href="#" class="list-group-item list-group-item-success">成功列表项</a>
				<a href="#" class="list-group-item list-group-item-secondary">次要列表项</a>
				<a href="#" class="list-group-item list-group-item-info">信息列表项</a>
				<a href="#" class="list-group-item list-group-item-warning">警告列表项</a>
				<a href="#" class="list-group-item list-group-item-danger">危险列表项</a>
				<a href="#" class="list-group-item list-group-item-primary">主要列表项</a>
				<a href="#" class="list-group-item list-group-item-dark">深灰色列表项</a>
				<a href="#" class="list-group-item list-group-item-light">浅色列表项</a>
			</div>
		</div>

	</body>
</html>

八.Bootstrap4 卡片

.card-header卡片的头部
.card-body卡片的身体
.card-footer卡片的底部
.card-title卡片的标题
.card-text卡片的正文
.card-link链接设置颜色
.card-img-top图片在文字上方
.card-img-bottom图片在文字下方
.card-img-overlay图片要设置为背景
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
		<title>Bootstrap4 卡片</title>
	</head>
	<body>
		<div class="container">
			<div style="width: 150px;height: 300px;" class="card bg-secondary">
				<div class="card-header">
					<p class="card-title">法拉利488</p>
				</div>
				<div class="card-body">
					<img style="width: 100px;" src="img/fala.jpg" >
					<span class="card-text">售价:<br>418.80-449.90万</span>
				</div>
				<div class="card-footer">
					<a href="https://price.pcauto.com.cn/sg12191/">查询最新消息</a>
				</div>
			</div>
		</div>
	</body>
</html>

 

九.Bootstrap4 下拉菜单

.dropdown 指定一个下拉菜单
.dropdown-divider

下拉菜单中的分割线

.dropdown-header 

下拉菜单中的标题

.active下拉菜单的选项高亮显示
.disabled 禁用下拉菜单
.dropdown-menu-right下拉菜单右对齐
.dropdown-menu-left下拉菜单左对齐
.dropright下拉菜单向右弹出
.dropleft下拉菜单向左弹出
.dropup下拉菜单向上弹出
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
		<title>Bootstrap4 下拉列表</title>
	</head>
	<body>
		<div class="container">
			<div class="btn-group">
				<a href="#" class="btn btn-success btn-outline-secondary dropdown-toggle" data-toggle="dropdown">游戏</a>
				<div class="dropdown-menu">
					<p class="dropdown-header">手游</p>
					<a href="#" class="dropdown-item">元神</a>
					<a href="#" class="dropdown-item">王者荣耀</a>
					<a href="#" class="dropdown-item">刺激战场</a>
					<div class="dropdown-divider"></div>
					<p class="dropdown-header">端游</p>
					<a href="#" class="dropdown-item">穿越火线</a>
					<a href="#" class="dropdown-item">英雄联盟</a>
					<a href="#" class="dropdown-item">地下城与勇士</a>
				</div>
			</div>
		</div>
	</body>
</html>

 十.Bootstrap4 折叠

.collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
		<title>Bootstrap4 折叠</title>
	</head>
	<body>
		<div class="container">
			<div class="">
				<button style="width: 200px;height: 40px;" class="btn btn-warning btn-outline-info"
					data-toggle="collapse" data-target="#p1">很高兴认识你！</button>
				<div id="p1" class="collapse">
					<p>交一个新朋友</p>
				</div>
			</div>
			<div class="">
				<button style="width: 200px;height: 40px;" class="btn btn-warning btn-outline-info"
					data-toggle="collapse" data-target="#p2">我也很高兴认识你</button>
				<div id="p2" class="collapse">
					<p>交到一个新朋友</p>
				</div>
			</div>
		</div>
	</body>
</html>

通过点击按钮使折叠元素显示或隐藏。

通过添加.show让内容默认显示。

十一.Bootstrap4 导航

.justify-content-center设置导航居中显示
.justify-content-end 设置导航右对齐
.flex-column创建垂直导航
.nav-tabs选项卡
.nav-pills 设置成胶囊形状
.nav-justified 设置导航项齐行等宽

1.水平导航栏

创建一个简单的水平导航栏，可以在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
		<title>Bootstrap4 导航</title>
	</head>
	<body>
		<div class="container">
			<ul class="nav">
				<li class="nav-item"><a href="#" class="nav-link">淘宝</a></li>
				<li class="nav-item"><a href="#" class="nav-link">京东</a></li>
				<li class="nav-item"><a href="#" class="nav-link">拼多多</a></li>
				<li class="nav-item"><a href="#" class="nav-link">苏宁</a></li>
			</ul>
			<ul class="nav justify-content-center">
				<li class="nav-item"><a href="#" class="nav-link">淘宝</a></li>
				<li class="nav-item"><a href="#" class="nav-link">京东</a></li>
				<li class="nav-item"><a href="#" class="nav-link">拼多多</a></li>
				<li class="nav-item"><a href="#" class="nav-link">苏宁</a></li>
			</ul>
			<ul class="nav justify-content-end">
				<li class="nav-item"><a href="#" class="nav-link">淘宝</a></li>
				<li class="nav-item"><a href="#" class="nav-link">京东</a></li>
				<li class="nav-item"><a href="#" class="nav-link">拼多多</a></li>
				<li class="nav-item"><a href="#" class="nav-link">苏宁</a></li>
			</ul>
		</div>
	</body>
</html>

 2.垂直导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
		<title>Bootstrap4 导航</title>
	</head>
	<body>
		<div class="container">
			<!-- .flex-column垂直排列
			.nav-tabs 类可以将导航转化为选项卡
			.nav-pills 类可以将导航项设置成胶囊形状。​ -->
			<ul class="nav flex-column nav-tabs" style="width: 100px;">
				<li class="nav-item"><a href="#" class="nav-link bg-danger">淘宝</a></li>
				<li class="nav-item"><a href="#" class="nav-link bg-danger">京东</a></li>
				<li class="nav-item"><a href="#" class="nav-link bg-danger">拼多多</a></li>
				<li class="nav-item"><a href="#" class="nav-link bg-danger">苏宁</a></li>
			</ul>
			<br>
			<ul class="nav flex-column nav-pills" style="width: 100px;">
				<li class="nav-item"><a href="#" class="nav-link bg-danger">淘宝</a></li>
				<li class="nav-item"><a href="#" class="nav-link bg-danger">京东</a></li>
				<li class="nav-item"><a href="#" class="nav-link bg-danger">拼多多</a></li>
				<li class="nav-item"><a href="#" class="nav-link bg-danger">苏宁</a></li>
			</ul>
		</div>
	</body>
</html>

3.胶囊形状

<ul class="nav flex-column nav-pills" style="width: 100px;">
 <li class="nav-item"><a href="#" class="nav-link bg-danger">淘宝</a></li>
 <li class="nav-item"><a href="#" class="nav-link bg-danger">京东</a></li>
 <li class="nav-item"><a href="#" class="nav-link bg-danger">拼多多</a></li>
 <li class="nav-item"><a href="#" class="nav-link bg-danger">苏宁</a></li>
</ul>

 4.导航项齐行等宽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
		<!--  jQuery文件 务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- 用于弹窗、提示、下拉菜单，包含了 popper.min.js  -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 注意：popper.min.js 用于设置弹窗、提示、下拉菜单，目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。 -->
		<title>Bootstrap4 导航</title>
	</head>
	<body>
		<div class="container">
			<!-- .nav-justified 类可以设置导航项齐行等宽显示。
			.nav-tabs 类可以将导航转化为选项卡 -->
			<ul class="nav nav-tabs nav-justified ">
				<li class="nav-item"><a href="#nav1" class="nav-link" data-toggle="pill">淘宝</a></li>
				<li class="nav-item"><a href="#nav2" class="nav-link" data-toggle="pill">京东</a></li>
				<li class="nav-item"><a href="#nav3" class="nav-link" data-toggle="pill">拼多多</a></li>
				<li class="nav-item"><a href="#nav4" class="nav-link" data-toggle="pill">苏宁</a></li>
			</ul>
			<div class="tab-content">
				<div id="nav1" class="container tab-pane">
					<a href="https://www.taobao.com/">taobao</a>
				</div>
				<div id="nav2" class="container tab-pane">
					<a href="https://www.jd.com/">jingdong</a>
				</div>
				<div id="nav3" class="container tab-pane">
					<a href="https://youhui.pinduoduo.com/">pinduoduo</a>
				</div>
				<div id="nav4" class="container tab-pane">
					<a href="https://www.suning.com/">suning</a>
				</div>
			</div>
		</div>
	</body>
</html>

 

WildKingxue
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于 Bootstrap 4 构建的家居装饰和家具 购物主题 HTML 网站模板
06-02
- 有效的 HTML5 和 CSS3 - 整洁、干净、简单的设计 - 创意和现代平面设计 - 基于 Bootstrap 4 构建 - 选择 + 色板选项 - 商店网格/列表视图
bootstrap学习（四）
dengfengling999的博客
11-26 843
静态控件用在修改页面的id属性，只让用户看到不让他修改：还可以用readOnly。添加一个P标签：添加calss属性，但是p标签不能提交数据，可以设置一个隐藏标签。如果想要再一行展示则需要加： calss：form-inline。默认按钮尺寸可以不加，它是自动显示默认尺寸。bootstrap中图片、按钮、表单。加btn-block：class。水平表单：水平排列分行显示。
bootstrap a标签按钮样式
念着倒障智
12-05 9327
&lt;a class='btn btn-outline-success btn-sm' href="#"&gt;查看&lt;/a&gt; 结果如下图:
bootstrap a标签_最受欢迎的前端框架Bootstrap
weixin_42676824的博客
02-01 1626
Bootstrap的一些基本样式和组件，包括容器、页头、媒体组件、图片、列表组。重新实现了上节课的hello.html。我们并未写CSS文件，仅使用Bootstrap就达到了这样的效果，所以讲Bootstrap是一个强大的前端框架！Bootstrap通过CSS文件来提供样式，同样在中加以引入：<link rel="stylesheet" href="http://cdn.bootc...
（4）bootstrap标签页
zouk‘s blogs
07-21 2710
导读： 我希望实现的功能：点击导航栏下的某一选项，在固定区域呈现我需要的页面。 如图：点击1，在右侧出现2页面 （1）所用到的技术：bootstrap的标签页 依然老样子，先给出官方文档链接 http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html （2）要点说明：【一共三步】 1.在左侧导航
bootstrap 将a标签 链接变成按钮
dudfur的专栏
08-25 9916
在jquery-ui http://www.bootcss.com/p/jquery-ui-bootstrap/#dialog 有个类ui-state-default可以将链接变成按钮样式。 同时要有CSS代码： /*Dialog*/ #dialog_link,#modal_link { padding: .4em 1em .4em 20px; text-decoration: non
Bootstrap圣诞节主题商城网站模板
06-06
一套精美的圣诞节主题商城网站HTML模板，使用Bootstrap4框架构造，圣诞节礼品促销电子商务网站模板。HTML文件相应组织良好,所以它很容易定制和更新。
bootstrap视频教程
05-16
该套bootstrap视频教程是从网上扒下来的 非当前的最新版本教程，但是对于新手还是挺不错的。视频时间很短，每节只有几分钟。
aurora:最初从https克隆的用于学习的Bootstrap网站
03-31
一个用于学习Bootstrap 4的单页网站 更新后的版本 修补程序和增强功能的洗衣列表 修复了页眉和页脚中的问题。 添加了自定义flexbox类，以使contact和footer部分居中。 中心有理博客卡阅读更多。 固定顶部导航并向...
bootstrap<a>标签的显示与隐藏
热门推荐
霓虹丶夏天
06-07 1万+
&lt;a id="modal-revoke1" role="button" onclick="openModal(4)" class="btn btn-success btn-xs disabled" data-toggle="modal"&gt;撤销&lt;/a&gt;$("#modal-revoke1").addClass('disab
asp.net div显示带样式的字符串_Bootstrap的按钮样式
weixin_35599815的博客
12-26 210
Bootstrap包括多个预定义的按钮样式，每个样式都有自己的语义目的，另外还有一些额外的功能可以用于更多的控制。颜色class.btn-primary.btn-secondary.btn-success.btn-danger.btn-warning.btn-info.btn-light.btn-dark.btn-link按钮标签.btn可以在<button>元素上使用，您也可以在&l...
bootstrap 4-标签页制作和弹出框（模态框）制作
sanluo11的博客
01-25 9827
1、标签页（Tabs） 标签页是一个经常使用的组件，可以放置较多的内容，又可以节省页面空间。 如下： 无需写任何JavaScript代码，只需要简单的为页面元素指定data-toggle="tab",为url添加nav和nav-tab class  案例代码： Chrome Firefox Safari Opera
html5制作垂直列表,Bootstrap超炫垂直手风琴列表特效
weixin_42527665的博客
06-10 376
这是一款基于Bootstrap网格系统和Collapse插件制作的炫酷垂直手风琴列表特效。该特效对原生的Bootstrap Accordion进行美化，制作非常美观的垂直手风琴效果。使用方法在页面中引入bootstrap的相关文件。HTML结构该垂直手风琴特效的HTML结构如下：href="#collapseOne" aria-expanded="true" aria-controls="coll...
HTML_CSS学习：定位
m0_74972727的博客
05-06 544
【代码】HTML_CSS学习：定位。
CSS学习笔记之中级教程（一）
最新发布
wz_1992的博客
05-10 747
1、CSS 布局 - display 属性 1.1 display 属性 display 属性是用于控制布局的最重要的 CSS 属性。 display 属性规定是否/如何显示元素。 每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。 1.2 块级元素（block element） 块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。 会占领页面的一行，其后多个block元素
CSS 样式清单整理：文字超出部分显示省略号和设置placeholder的字体样式
weixin_44487537的博客
05-07 200
【代码】CSS 样式清单整理：文字超出部分显示省略号。
CSS基础(盒子模型、浮动、定位)
eh的博客
05-08 993
元素可以左浮动右浮动这样可以打破元素原本只能上下排列的形式，且元素于元素之间没有间隙，是紧挨着的。利用position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。其中子元素应在父元素范围内排列，否则容易导致下一个父元素同级元素被遮盖掉，产生。元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。浮动可以控制元素排列方向但对于准确到某个位置却不好控制，这时我们可以使用定位。clear 属性指定元素两侧不能出现浮动元素。，该属性其设置了元素溢出时所需的行为，使用。
今日分享【CSS中的经典使用】
fengGer的博客
05-06 678
css中的经典样式案例，双飞翼布局
CSS-浮动
Kevin7_35Durant的博客
05-10 151
right 浮动在网页右边。作用：盒子的顶点是一样的，具备行内块的特征，能设置宽高。属性值：left 浮动在网页左边。三个盒子都是紧密相联的。
bootstrap4 栅格长度修改总长度
05-20
Bootstrap 4 栅格系统的总长度是通过 `.container` 类来定义的，默认情况下，`.container` 的宽度为 100%。如果你想要修改它的长度，可以通过以下两种方式实现： 1. 通过 CSS 修改 `.container` 的宽度 在 CSS ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值