如何在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>