Chuẩn bị giao diện
C:\Users\Administrator\Desktop\typescript-master\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container-fluid">
<div class="row">
<img src="./images/header.png" alt="Header">
</div>
</div>
</header>
<main class="py-3">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="alert alert-primary" role="alert">Đã được thêm ...</div>
</div>
<div class="col-md-12">
<div class="jumbotron-fluid bg-light">
<div class="container">
<p class="lead py-2">Items <span id="countcart" class="text-success">( 2 items)</span></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="row">
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" id="productspurchased">
<div class="row">
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<img style=" max-width: 150px; object-fit: cover; " src="./images/1.jpg" alt="1.jpg">
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<a class="d-inline-block mb-2 text-success">Docter 1</a>
<p>Description Docter 1</p>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 mt-2">
<p class="text-success">1000 đ</p>
<input type="number" class="form-control countproduct" data-idproduct="1" min="1" value="1">
</div>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 mt-5">
<button type="button" class="btn btn-success deleteproduct" data-idproduct="1">DELETE</button>
</div>
</div>
<div class="row">
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<img style=" max-width: 150px; object-fit: cover; " src="./images/2.jpg" alt="2.jpg">
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<a class="d-inline-block mb-2 text-success">Docter 2</a>
<p>Description Docter 2</p>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 mt-2">
<p class="text-success">2000 đ</p>
<input type="number" class="form-control countproduct" data-idproduct="2" min="1" value="1">
</div>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 mt-5">
<button type="button" class="btn btn-success deleteproduct" data-idproduct="2">DELETE</button>
</div>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<ul class="list-group list-group-flush border">
<li class="list-group-item"><span>Tạm tính:</span><span id="provisionalprice">3000 đ</span></li>
<li class="list-group-item"><span>Tổng giá:</span><span id="intomoney">3000 đ</span>
<p class="text-warning mb-0">(Đã bao gồm VAT)</p>
</li>
</ul><button type="button" class="btn btn-success btn-lg btn-block mt-4">Xem thêm</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="jumbotron-fluid bg-light">
<div class="container">
<p class="lead py-2">Bài viết tương tự</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="row" id="relatedproducts">
<div class="col-md-3">
<div class="card mb-4 shadow-sm">
<img src="./images/1.jpg" alt="1.jpg">
<div class="card-body">
<p class="text-success text-center">1000</p>
<p class="text-success text-center">Docter 1</p>
<p class="card-text">Description Docter 1</p>
<div class="d-flex justify-content-center align-items-center">
<button type="button" class=" btn btn-primary btn-sm buynow" data-idsp="1">Xem thêm</button>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 shadow-sm">
<img src="./images/2.jpg" alt="2.jpg">
<div class="card-body">
<p class="text-success text-center">2000</p>
<p class="text-success text-center">Docter 2</p>
<p class="card-text">Description Docter 2</p>
<div class="d-flex justify-content-center align-items-center">
<button type="button" class=" btn btn-primary btn-sm buynow" data-idsp="2">Xem thêm</button>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 shadow-sm">
<img src="./images/3.jpg" alt="3.jpg">
<div class="card-body">
<p class="text-success text-center">3000</p>
<p class="text-success text-center">Docter 3</p>
<p class="card-text">Description Docter 3</p>
<div class="d-flex justify-content-center align-items-center">
<button type="button" class=" btn btn-primary btn-sm buynow" data-idsp="3">Xem thêm</button>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 shadow-sm">
<img src="./images/2.jpg" alt="2.jpg">
<div class="card-body">
<p class="text-success text-center">4000</p>
<p class="text-success text-center">Docter 4</p>
<p class="card-text">Description Docter 4</p>
<div class="d-flex justify-content-center align-items-center">
<button type="button" class=" btn btn-primary btn-sm buynow" data-idsp="4">Xem thêm</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="border-top">
<div class="container-fluid">
<div class="row">
<img src="./images/footer.png" alt="Footer">
</div>
</div>
</footer>
</body>
</html>PreviousMột bài mẫu để sử dụng html với typescript (ok)NextMột cách xuất trực tiếp js sử dụng cho html (ok)
Last updated