Chuẩn bị giao diện
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
Was this helpful?
Last updated
Was this helpful?
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>