如何在Bootstrap中创建 “添加到购物车 “按钮
Bootstrap包含了大量的按钮样式,每个按钮都有一些共同的属性和一些不同的属性在里面。添加到购物车 “按钮作为一个容器,就像商场里的一个典型的购物车,你在那里收集你想购买的东西。”添加到购物车 “按钮通常在电子商务网站上提供,也在其他包括购买产品的网站上使用。
Bootstrap CDN链接:
- 在代码之前,你只需要包含以下库或脚本,以便在应用程序中添加 “添加到购物车 “按钮。
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js”> </script>
- 要包括一个我们在下面的例子中使用的小车图标,你只需要在你的程序中添加这个样式表。
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css”>
- 而且你还需要在你想显示车标的地方包含以下类。
<span class=”glyphicon glyphicon-shopping-cart”> </span>
示例:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Shopping Cart</title>
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<!-- CSS only -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
<!-- JavaScript Bundle with Popper -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
<!--CSS Code-->
<style>
.container {
margin-top: 30px;
color: green;
}
span {
color: green;
}
</style>
</head>
<!--Body tag-->
<body>
<div class="container" align="center">
<h2>GeeksforGeeks</h2>
<h3>Shopping-cart</h3>
<p>
<button type="button"
class="btn btn-default btn-sm">
<span class="glyphicon
glyphicon-shopping-cart">
</span>
<b> Add to Cart </b>
</button>
</p>
</div>
</body>
</html>
输出:现在,你可以在输出中看到,我们在HTML主体中包含了添加到购物车按钮,上面有一个小的购物车图标。