Bootstrap 创建一个”加入购物车”按钮

Bootstrap是一个流行的前端框架，使设计和开发响应式和移动优先的网站更加容易。它提供了几个组件和插件，可以用来创建一个加入购物车的按钮，并在网站上实现这个功能。它包含了预构建的样式和功能，可以节省时间和精力。

步骤

使用内容分发网络（CDN）加载必要的库和文件。
定义页面的HTML结构，包括产品图片、名称、描述、价格和”加入购物车”按钮。
定义当点击”加入购物车”按钮时出现的模态窗口结构。
定义当点击”加入购物车”按钮时触发模态窗口显示的Javascript功能。
页面加载完成后，等待”加入购物车”按钮被点击。
当点击”加入购物车”按钮时，显示带有消息”产品已添加到购物车”的模态窗口。
当模态窗口显示时，允许用户点击”关闭”按钮来关闭它。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Link to the Bootstrap CSS file hosted on a content delivery network (CDN) -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <!-- Link to the jQuery library hosted on a CDN -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

  <!-- Link to the Bootstrap JavaScript file hosted on a CDN -->
  <script  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <title>Add to Cart</title>
</head>
<body>

  <!-- Modal window that will appear when "Add to Cart" button is clicked -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <!-- Title of the modal window -->
          <h4 class="modal-title">Added to cart</h4>
          <!-- Close button to dismiss the modal window -->
          <button type="button" class="close" data-dismiss="modal">Ã—</button>
        </div>
        <div class="modal-body">
          <!-- Text displayed in the body of the modal window to confirm that the product has been added to the cart -->
          The product has been added to your cart.
        </div>
        <div class="modal-footer">
          <!-- Button to close the modal window -->
          <button type="button" class="Close" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Product information displayed on the webpage -->
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <!-- Image of the product -->
        <img src="https://www.tutorialspoint.com/bootstrap/images/tutimg.png" class="img-fluid">  
      </div>
      <div class="col-md-6">
        <!-- Name of the product -->
        <h2>Product Name</h2>
        <!-- Description of the product -->
        <p>Description of the product</p>
        <!-- Price of the product -->
        <h4> $19.99</h4> <!-- Button to add the product to the cart --> <button class="btn btn-primary add-to-cart"> <i class="fa fa-shopping-cart"></i> Add to cart </button> </div> </div> </div> <!-- Javascript functionality --> <script>$ (document).ready(function(){
      // When the "Add to Cart" button is clicked, display the modal window
       $(".add-to-cart").click(function(){$ ("#myModal").modal();
      });
    });
  </script>

</body>
</html>

使用Bootstrap和jQuery库使得实现和定制模态窗口变得容易。

这段代码使用jQuery库来添加模态窗口的功能，比如在点击“加入购物车”按钮时显示它。

结论

这段代码依赖于托管在内容分发网络（CDN）上的外部Bootstrap CSS和JavaScript文件。如果CDN不可用或遇到停机时间，可能会影响代码的功能。代码可以包含库的本地副本来提高安全性，而不是依赖托管在CDN上的外部库。Bootstrap与大多数现代Web浏览器兼容，但一些旧版浏览器可能不支持框架的所有功能。此外，Bootstrap CSS和JavaScript文件可能相当大，这可能会减慢网页的加载时间。