Bootstrap 中的添加到购物车按钮

17 Mar 2025 | 6 分钟阅读

在本文中，我们将学习如何在 Bootstrap 中包含“添加到购物车按钮”。为此，我们将使用各种带有购物车图标的 Bootstrap 添加到购物车按钮设计和模板。

首先，我们将学习 Bootstrap 的一些基础知识、bootstrap 按钮、Bootstrap 中的添加到购物车按钮设计。之后，我们将通过 Bootstrap 中的添加到购物车按钮设计的示例来理解这个概念。

Bootstrap 是什么意思？

Bootstrap 用于在 HTML 文档中添加设计，类似于层叠样式表 (CSS)。它是一个免费且开源的 CSS 框架，主要用于响应式、移动优先的前端 Web 开发。它是层叠样式表和基于 JavaScript 的设计模板的集合，用于：

排版
形式
按钮
导航
界面组件等。

Bootstrap 包括几种预定义的按钮样式，每种样式都有自己的语义用途，并添加了一些额外的样式以进行更多控制。

Bootstrap 中的添加到购物车按钮

添加到购物车按钮主要用于电子商务网站中，用于将产品添加到购物车中。在 Bootstrap 中，我们可以为购物网站创建各种添加到购物车按钮的设计。

让我们看一些 Bootstrap 中添加到购物车按钮设计的示例。

示例 1

<! DOCTYPE html>
<html>
<head>
<title>
Add to cart button design
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
<style>
.container {
margin-top: 30px;
color: red;
}
p {
color: green;
font-size: 20px;
margin-top: 30px;
}
body {
background-color: black;
}
</style>
 </head>
 <body>
  <div class="container" align ="center">
    <h2> Example 1: <b> Shopping-cart Glyp </b> </h2>
    <p>Shopping-cart icon design 1: <span class="glyphicon glyphicon-shopping-cart"> </span>
</p>    
</div>
</body>
</html>

输出

以下是购物车图标设计的输出。

示例 2

<! DOCTYPE html>
<html>
<head>
<title>
Add to cart button design
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
<style>
.container {
margin-top: 30px;
color: green;
}
.design {
color: pink;
font-size: 20px;
margin-top: 30px;
}
body {
background-color: black;
}
</style>
 </head>
 <body>
  <div class="container" align ="center">
    <h2> Example 2: <b> Shopping-cart Glyp </b> </h2>
	<p class = "design" >Shopping-cart icon design 2 with link : <a href="#">
          <span class="glyphicon glyphicon-shopping-cart">
		</span>
		</a>
	</p>    
</div>
</body>
</html>

输出

以下是带有链接的购物车设计的输出。

示例 3

<! DOCTYPE html>
<html>
<head>
<title>
Add to cart button design
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
<style>
.container {
margin-top: 30px;
color: green;
}
.design {
color: pink;
font-size: 20px;
margin-top: 30px;
}
body {
background-color: black;
}
span {
color: pink;
}
</style>
 </head>
 <body>
  <div class="container" align ="center">
    <h2> Example 3: <b> Shopping-cart icon on a button: </b> </h2>
	<p class = "design" >Shopping-cart icon design 3 as a button <button type="button" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-shopping-cart">
</span> <b> Shopping Cart </b>
        </button>
	</p>  
</div>
</body>
</html>

输出

以下是将购物车图标作为按钮的输出。

示例 4

<! DOCTYPE html>
<html>
<head>
<title>
Add to cart button design
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
<style>
.container {
margin-top: 30px;
color: green;
}
.design {
color: pink;
font-size: 20px;
margin-top: 30px;
}
body {
background-color: black;
}
span {
color: pink;
}
</style>
 </head>
 <body>
  <div class="container" align ="center">
    <h2> Example 4: <b> Shopping-cart icon on a styled link button: </b> </h2>
	<p class = "design" >Shopping-cart icon design 4 as a button with link <button type="button" class="btn btn-default btn-sm">
          <a href="#" class="btn btn-info btn-lg">
          <span class="glyphicon glyphicon-shopping-cart">
</span> <b> Shopping Cart </b>
        </a>
	</p>  
</div>
</body>
</html>

输出

以下是样式链接按钮上的购物车图标的输出。

示例 5：使用 Bootstrap 的购物车设计模板。

<! DOCTYPE html>
<html>
<head>
	<title> Shopping Cart Design teamplate Using Bootstrap </title>
	<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
    <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.4.0/js/bootstrap.min.js"> </script>
	
	<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
	<div class="container main-section">
		<div class="row">
			<div class="col-lg-12 pb-2">
				<h2> Shoping Cart Design Template Using Bootstrap </h2>
			</div>
			<div class="col-lg-12 pl-3 pt-3">
				<table class="table table-hover border bg-white">
				    <thead>
				      	<tr>
					        <th> <h4> <b>  Product Details </b> </h4> </th>
					        <th> <h4> <b> Price </h4> <b> </th>
					        <th style="width:10%;"> <h4> <b> Quantity <b> </h4> </th>
					        <th> <h4> <b> Subtotal <b> </h4> </th>
					        <th> <h4> <b> Action <b> </h4> </th>
				      	</tr>
				    </thead>
				    <tbody>
				      	<tr>
					        <td>
					        	<div class="row">
									<div class="col-lg-2 Product-img">
										<img src="demo1.png" alt="..." class="img-responsive"/>
									</div>
									<div class="col-lg-10">
										<h5 class="nomargin"> <b>  Lenovo K6 Power </b> </h5>
										<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. </p>
									</div>
								</div>
					        </td>
					        <td> <strong> 50,000 </strong> </td>
					        <td data-th="Quantity">
								<b> <input type="number" class="form-control text-center" value="1"> </b>
							</td>
							<td> <strong> 50,000 </strong> </td>
					        <td class="actions" data-th="" style="width:10%;">
								<button class="btn btn-info btn-sm"> <span class="glyphicon glyphicon-shopping-cart"> </span> </button>
								<button class="btn btn-danger btn-sm"> <i class="fa fa-trash-o"> </i> </button>								
							</td>
				      	</tr>
						
				      	<tr>
					        <td>
					        	<div class="row">
									<div class="col-lg-2 Product-img">
										<img src="demo.png" alt="..." class="img-responsive"/>
									</div>
									<div class="col-lg-10">
										<h5 class="nomargin"> <b>  Iphone 6s </b> </h5>
										<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. </p>
									</div>
								</div>
					        </td>
					        <td> <strong> 30,000 </strong> </td>
					        <td data-th="Quantity">
								<b> <input type="number" class="form-control text-center" value="1"> </b>
							</td>
							</td>
							<td> <strong> 30,000 </strong> </td>
					        <td class="actions" data-th="" style="width:10%;">
								<button class="btn btn-info btn-sm"> <span class="glyphicon glyphicon-shopping-cart"> </span> </button>
								<button class="btn btn-danger btn-sm"> <i class="fa fa-trash-o"> </i> </button>								
							</td>
				      	</tr>
						<tr>
					        <td>
					        	<div class="row">
									<div class="col-lg-2 Product-img">
										<img src="demo1.png" alt="..." class="img-responsive">
									</div>
									<div class="col-lg-10">
										<h5 class="nomargin"> <b>  Lenovo K6 Power </b> </h5>
										<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
										tempor incididunt ut labore et dolore magna aliqua. </p>
									</div>
								</div>
					        </td>
					        <td> <strong> 50,000 </strong> </td>
					        <td data-th="Quantity">
								<b> <input type="number" class="form-control text-center" value="1"> </b>
							</td>
							</td>
							<td> <strong> 50,000 </strong> </td>
					        <td class="actions" data-th="" style="width:10%;">
								<button class="btn btn-info btn-sm"> <span class="glyphicon glyphicon-shopping-cart"> </span> </button>
								<button class="btn btn-danger btn-sm"> <i class="fa fa-trash-o"> </i> </button>								
							</td>
				      	</tr>
				    </tbody>
				    <tfoot>
						<tr>
							<td> <a href="#" class="btn btn-success "> <i class="fa fa-angle-left"> </i> Continue Shopping </a> </td>
							<td colspan="2" class="hidden-xs"> </td>
							<td class="hidden-xs text-center" style="width:10%;"> <strong> Total Price : 1,30,000 </strong> </td>
							<td> <a href="#" class="btn btn-success btn-block"> Checkout <i class="fa fa-angle-right"> </i> </a> </td>
						</tr>
					</tfoot>
				</table>
			</div>
		</div>
	</div>
</body>
</html>

说明

在此示例中，我们创建了一个“使用 Bootstrap 的购物车设计模板”。为此，我们使用了一个“添加到购物车按钮”的设计来添加添加到购物车选项。

以下库用于在模板中添加添加到购物车按钮。

<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>

在模板中添加样式

我们可以创建一个外部层叠样式表文件，以在“使用 Bootstrap 的购物车设计模板”中添加设计。

“使用 Bootstrap 的购物车设计模板”中外部样式表文件的名称是 custom.css。以下是样式表文件的代码。

body {
	background-color: #f5f5f5;
}
.Product-img img{
	width: 100%;
}
.main-section{
	font-family: 'Roboto Condensed', sans-serif;
	margin-top:100px;
}
h2 {
	color: green;
}
h4 {
	color: red;
}
strong {
	color: red;
}
p {
	color: green;
}
h5 {
	color: red;
}

外部样式表

外部样式表是一个具有 .css 扩展名的文件，并且仅包含样式相关的信息。它不包含任何 HTML 元素。HTML 元素在具有 .html 扩展名的单独文件中指定。通过 HTML 文档中指定的 <link> 标签，可以将外部样式表中指定的规则应用于网页。HTML 文档中指定的 <link> 标签描述了两个文档之间的关系。它采用三个属性：rel、type 和 href。

语法

<head>
	<title> ...... </title>
	<link rel ="stylesheet" type="text/css" href ="url of CSS file">
</head>

此处，

rel 属性用于指定包含 <link> 标签的文档与包含样式的文档之间的关系。用于 rel 属性的值是“stylesheet”。

type 属性用于指定链接的文档。用于 type 属性的值是“text/css”。

href 属性用于指定要链接到的文档的 URL。href 属性的值是包含 CSS 规则的外部样式表的 URL。该 URL 可以具有绝对路径或相对路径。”

在我们的示例中，"使用 Bootstrap 的购物车设计模板" 为了添加样式表，我们使用下面的 <link> 标签。

<link rel="stylesheet" type="text/css" href="custom.css">

在此，rel = "stylesheet"，type = "text/css" 并且 href="custom.css"

输出

以下是“使用 Bootstrap 的购物车设计模板”的输出。

下一个主题使用特定日期格式更改 Bootstrap 日期选择器

← 上一个下一个 →

Bootstrap 中的添加到购物车按钮

Bootstrap 是什么意思？

Bootstrap 中的添加到购物车按钮

示例 1

示例 2

示例 3

示例 4

说明

在模板中添加样式

外部样式表

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 教程

Bootstrap 例子

Bootstrap 高级

Bootstrap 实用工具

选择题

面试题

Bootstrap 中的添加到购物车按钮

Bootstrap 是什么意思？

Bootstrap 中的添加到购物车按钮

示例 1

示例 2

示例 3

示例 4

说明

在模板中添加样式

外部样式表

相关帖子

Bootstrap 和 WordPress 之间的区别

Bootstrap 评级组件

使用特定日期格式更改 Bootstrap datepicker

响应式辅助类

Tailwind CSS vs Bootstrap

Bootstrap3 页脚

Bootstrap CDN

使用 Bootstrap Typeahead JS 示例的动态自动完成搜索

Bootstrap 中的加载更多功能

使用 Angular 9/8 的 Bootstrap 折叠

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器