資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究在 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://tutorialspoint.tw/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 檔案可能相當大，這可能會減慢網頁的載入速度。
更新於：2023年8月18日
955 次瀏覽
廣告