By GokiSoft.com|
19:08 01/11/2023|
Học HTML5 - CSS3
[Share Code] Bài 1 - Tạo website bằng bootstrap 4 - C2307L
Bài 1 - Tạo website bằng bootstrap 4
#bt2045.html
<!DOCTYPE html>
<html>
<head>
<title>Website Bootstrap - Tutorial</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="javascript:void(0)">
<img src="https://gokisoft.com/styles/theme20/images/logo/logo.jpg" style="height: 35px;">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Trang Chu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">DS Khoa Hoc</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Goc Lap Trinh</a>
</li>
</ul>
<form class="d-flex">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"><i class="bi bi-person-fill"></i> Dang Ky</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#myLogin"><i class="bi bi-box-arrow-right"></i> Dang Nhap</a>
</li>
</ul>
</form>
</div>
</div>
</nav>
<div class="container mt-2 mb-5">
<div class="card">
<div class="card-header bg-info text-white">
QUAN LY THONG TIN SINH VIEN
</div>
<div class="card-body table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>STT</th>
<th>Ho & Ten</th>
<th>Email</th>
<th>SDT</th>
<th style="width: 160px"></th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>TRAN VAN A</td>
<td>tranvana@gmail.com</td>
<td>123213123</td>
<td>
<button class="btn btn-warning">Edit</button>
<button class="btn btn-danger">Remove</button>
</td>
</tr>
<tr>
<td>01</td>
<td>TRAN VAN A</td>
<td>tranvana@gmail.com</td>
<td>123213123</td>
<td>
<button class="btn btn-warning">Edit</button>
<button class="btn btn-danger">Remove</button>
</td>
</tr>
<tr>
<td>01</td>
<td>TRAN VAN A</td>
<td>tranvana@gmail.com</td>
<td>123213123</td>
<td>
<button class="btn btn-warning">Edit</button>
<button class="btn btn-danger">Remove</button>
</td>
</tr>
<tr>
<td>01</td>
<td>TRAN VAN A</td>
<td>tranvana@gmail.com</td>
<td>123213123</td>
<td>
<button class="btn btn-warning">Edit</button>
<button class="btn btn-danger">Remove</button>
</td>
</tr>
<tr>
<td>01</td>
<td>TRAN VAN A</td>
<td>tranvana@gmail.com</td>
<td>123213123</td>
<td>
<button class="btn btn-warning">Edit</button>
<button class="btn btn-danger">Remove</button>
</td>
</tr>
<tr>
<td>01</td>
<td>TRAN VAN A</td>
<td>tranvana@gmail.com</td>
<td>123213123</td>
<td>
<button class="btn btn-warning">Edit</button>
<button class="btn btn-danger">Remove</button>
</td>
</tr>
<tr>
<td>01</td>
<td>TRAN VAN A</td>
<td>tranvana@gmail.com</td>
<td>123213123</td>
<td>
<button class="btn btn-warning">Edit</button>
<button class="btn btn-danger">Remove</button>
</td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#"><</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">></a></li>
</ul>
</div>
</div>
<div class="card mt-3">
<div class="card-header bg-info text-white">
DANH SACH SAN PHAM
</div>
</div>
<div class="row">
<!-- item -->
<div class="col-md-3 col-6">
<div class="card mt-3">
<div class="card-header" style="padding: 0px !important;">
<img src="https://thumbs.dreamstime.com/b/portrait-funny-dog-behind-wheel-car-jack-russell-terrier-sunglasses-151057370.jpg" style="width: 100%">
</div>
<div class="card-body">
Việc Thái Lan thua Triều Tiên là điều đã nằm trong dự tính của giới chuyên môn. Bởi chênh lệch giữa hai bên là rất lớn.
<div class="row mt-2">
<div class="col-md-6" style="font-size: 22px; color: red">
$20,000
</div>
<div class="col-md-6" style="text-align: right;">
<button class="btn btn-sm btn-success">Add to card</button>
</div>
</div>
</div>
</div>
</div>
<!-- item ends -->
<!-- item -->
<div class="col-md-3 col-6">
<div class="card mt-3">
<div class="card-header" style="padding: 0px !important;">
<img src="https://thumbs.dreamstime.com/b/portrait-funny-dog-behind-wheel-car-jack-russell-terrier-sunglasses-151057370.jpg" style="width: 100%">
</div>
<div class="card-body">
Việc Thái Lan thua Triều Tiên là điều đã nằm trong dự tính của giới chuyên môn. Bởi chênh lệch giữa hai bên là rất lớn.
<div class="row mt-2">
<div class="col-md-6" style="font-size: 22px; color: red">
$20,000
</div>
<div class="col-md-6" style="text-align: right;">
<button class="btn btn-sm btn-success">Add to card</button>
</div>
</div>
</div>
</div>
</div>
<!-- item ends -->
<!-- item -->
<div class="col-md-3 col-6">
<div class="card mt-3">
<div class="card-header" style="padding: 0px !important;">
<img src="https://thumbs.dreamstime.com/b/portrait-funny-dog-behind-wheel-car-jack-russell-terrier-sunglasses-151057370.jpg" style="width: 100%">
</div>
<div class="card-body">
Việc Thái Lan thua Triều Tiên là điều đã nằm trong dự tính của giới chuyên môn. Bởi chênh lệch giữa hai bên là rất lớn.
<div class="row mt-2">
<div class="col-md-6" style="font-size: 22px; color: red">
$20,000
</div>
<div class="col-md-6" style="text-align: right;">
<button class="btn btn-sm btn-success">Add to card</button>
</div>
</div>
</div>
</div>
</div>
<!-- item ends -->
<!-- item -->
<div class="col-md-3 col-6">
<div class="card mt-3">
<div class="card-header" style="padding: 0px !important;">
<img src="https://thumbs.dreamstime.com/b/portrait-funny-dog-behind-wheel-car-jack-russell-terrier-sunglasses-151057370.jpg" style="width: 100%">
</div>
<div class="card-body">
Việc Thái Lan thua Triều Tiên là điều đã nằm trong dự tính của giới chuyên môn. Bởi chênh lệch giữa hai bên là rất lớn.
<div class="row mt-2">
<div class="col-md-6" style="font-size: 22px; color: red">
$20,000
</div>
<div class="col-md-6" style="text-align: right;">
<button class="btn btn-sm btn-success">Add to card</button>
</div>
</div>
</div>
</div>
</div>
<!-- item ends -->
<!-- item -->
<div class="col-md-3 col-6">
<div class="card mt-3">
<div class="card-header" style="padding: 0px !important;">
<img src="https://thumbs.dreamstime.com/b/portrait-funny-dog-behind-wheel-car-jack-russell-terrier-sunglasses-151057370.jpg" style="width: 100%">
</div>
<div class="card-body">
Việc Thái Lan thua Triều Tiên là điều đã nằm trong dự tính của giới chuyên môn. Bởi chênh lệch giữa hai bên là rất lớn.
<div class="row mt-2">
<div class="col-md-6" style="font-size: 22px; color: red">
$20,000
</div>
<div class="col-md-6" style="text-align: right;">
<button class="btn btn-sm btn-success">Add to card</button>
</div>
</div>
</div>
</div>
</div>
<!-- item ends -->
<!-- item -->
<div class="col-md-3 col-6">
<div class="card mt-3">
<div class="card-header" style="padding: 0px !important;">
<img src="https://thumbs.dreamstime.com/b/portrait-funny-dog-behind-wheel-car-jack-russell-terrier-sunglasses-151057370.jpg" style="width: 100%">
</div>
<div class="card-body">
Việc Thái Lan thua Triều Tiên là điều đã nằm trong dự tính của giới chuyên môn. Bởi chênh lệch giữa hai bên là rất lớn.
<div class="row mt-2">
<div class="col-md-6" style="font-size: 22px; color: red">
$20,000
</div>
<div class="col-md-6" style="text-align: right;">
<button class="btn btn-sm btn-success">Add to card</button>
</div>
</div>
</div>
</div>
</div>
<!-- item ends -->
<!-- item -->
<div class="col-md-3 col-6">
<div class="card mt-3">
<div class="card-header" style="padding: 0px !important;">
<img src="https://thumbs.dreamstime.com/b/portrait-funny-dog-behind-wheel-car-jack-russell-terrier-sunglasses-151057370.jpg" style="width: 100%">
</div>
<div class="card-body">
Việc Thái Lan thua Triều Tiên là điều đã nằm trong dự tính của giới chuyên môn. Bởi chênh lệch giữa hai bên là rất lớn.
<div class="row mt-2">
<div class="col-md-6" style="font-size: 22px; color: red">
$20,000
</div>
<div class="col-md-6" style="text-align: right;">
<button class="btn btn-sm btn-success">Add to card</button>
</div>
</div>
</div>
</div>
</div>
<!-- item ends -->
<!-- item -->
<div class="col-md-3 col-6">
<div class="card mt-3">
<div class="card-header" style="padding: 0px !important;">
<img src="https://thumbs.dreamstime.com/b/portrait-funny-dog-behind-wheel-car-jack-russell-terrier-sunglasses-151057370.jpg" style="width: 100%">
</div>
<div class="card-body">
Việc Thái Lan thua Triều Tiên là điều đã nằm trong dự tính của giới chuyên môn. Bởi chênh lệch giữa hai bên là rất lớn.
<div class="row mt-2">
<div class="col-md-6" style="font-size: 22px; color: red">
$20,000
</div>
<div class="col-md-6" style="text-align: right;">
<button class="btn btn-sm btn-success">Add to card</button>
</div>
</div>
</div>
</div>
</div>
<!-- item ends -->
<!-- item -->
<div class="col-md-3 col-6">
<div class="card mt-3">
<div class="card-header" style="padding: 0px !important;">
<img src="https://thumbs.dreamstime.com/b/portrait-funny-dog-behind-wheel-car-jack-russell-terrier-sunglasses-151057370.jpg" style="width: 100%">
</div>
<div class="card-body">
Việc Thái Lan thua Triều Tiên là điều đã nằm trong dự tính của giới chuyên môn. Bởi chênh lệch giữa hai bên là rất lớn.
<div class="row mt-2">
<div class="col-md-6" style="font-size: 22px; color: red">
$20,000
</div>
<div class="col-md-6" style="text-align: right;">
<button class="btn btn-sm btn-success">Add to card</button>
</div>
</div>
</div>
</div>
</div>
<!-- item ends -->
<!-- item -->
<div class="col-md-3 col-6">
<div class="card mt-3">
<div class="card-header" style="padding: 0px !important;">
<img src="https://thumbs.dreamstime.com/b/portrait-funny-dog-behind-wheel-car-jack-russell-terrier-sunglasses-151057370.jpg" style="width: 100%">
</div>
<div class="card-body">
Việc Thái Lan thua Triều Tiên là điều đã nằm trong dự tính của giới chuyên môn. Bởi chênh lệch giữa hai bên là rất lớn.
<div class="row mt-2">
<div class="col-md-6" style="font-size: 22px; color: red">
$20,000
</div>
<div class="col-md-6" style="text-align: right;">
<button class="btn btn-sm btn-success">Add to card</button>
</div>
</div>
</div>
</div>
</div>
<!-- item ends -->
<!-- item -->
<div class="col-md-3 col-6">
<div class="card mt-3">
<div class="card-header" style="padding: 0px !important;">
<img src="https://thumbs.dreamstime.com/b/portrait-funny-dog-behind-wheel-car-jack-russell-terrier-sunglasses-151057370.jpg" style="width: 100%">
</div>
<div class="card-body">
Việc Thái Lan thua Triều Tiên là điều đã nằm trong dự tính của giới chuyên môn. Bởi chênh lệch giữa hai bên là rất lớn.
<div class="row mt-2">
<div class="col-md-6" style="font-size: 22px; color: red">
$20,000
</div>
<div class="col-md-6" style="text-align: right;">
<button class="btn btn-sm btn-success">Add to card</button>
</div>
</div>
</div>
</div>
</div>
<!-- item ends -->
<!-- item -->
<div class="col-md-3 col-6">
<div class="card mt-3">
<div class="card-header" style="padding: 0px !important;">
<img src="https://thumbs.dreamstime.com/b/portrait-funny-dog-behind-wheel-car-jack-russell-terrier-sunglasses-151057370.jpg" style="width: 100%">
</div>
<div class="card-body">
Việc Thái Lan thua Triều Tiên là điều đã nằm trong dự tính của giới chuyên môn. Bởi chênh lệch giữa hai bên là rất lớn.
<div class="row mt-2">
<div class="col-md-6" style="font-size: 22px; color: red">
$20,000
</div>
<div class="col-md-6" style="text-align: right;">
<button class="btn btn-sm btn-success">Add to card</button>
</div>
</div>
</div>
</div>
</div>
<!-- item ends -->
<!-- item -->
<div class="col-md-3 col-6">
<div class="card mt-3">
<div class="card-header" style="padding: 0px !important;">
<img src="https://thumbs.dreamstime.com/b/portrait-funny-dog-behind-wheel-car-jack-russell-terrier-sunglasses-151057370.jpg" style="width: 100%">
</div>
<div class="card-body">
Việc Thái Lan thua Triều Tiên là điều đã nằm trong dự tính của giới chuyên môn. Bởi chênh lệch giữa hai bên là rất lớn.
<div class="row mt-2">
<div class="col-md-6" style="font-size: 22px; color: red">
$20,000
</div>
<div class="col-md-6" style="text-align: right;">
<button class="btn btn-sm btn-success">Add to card</button>
</div>
</div>
</div>
</div>
</div>
<!-- item ends -->
<!-- item -->
<div class="col-md-3 col-6">
<div class="card mt-3">
<div class="card-header" style="padding: 0px !important;">
<img src="https://thumbs.dreamstime.com/b/portrait-funny-dog-behind-wheel-car-jack-russell-terrier-sunglasses-151057370.jpg" style="width: 100%">
</div>
<div class="card-body">
Việc Thái Lan thua Triều Tiên là điều đã nằm trong dự tính của giới chuyên môn. Bởi chênh lệch giữa hai bên là rất lớn.
<div class="row mt-2">
<div class="col-md-6" style="font-size: 22px; color: red">
$20,000
</div>
<div class="col-md-6" style="text-align: right;">
<button class="btn btn-sm btn-success">Add to card</button>
</div>
</div>
</div>
</div>
</div>
<!-- item ends -->
<!-- item -->
<div class="col-md-3 col-6">
<div class="card mt-3">
<div class="card-header" style="padding: 0px !important;">
<img src="https://thumbs.dreamstime.com/b/portrait-funny-dog-behind-wheel-car-jack-russell-terrier-sunglasses-151057370.jpg" style="width: 100%">
</div>
<div class="card-body">
Việc Thái Lan thua Triều Tiên là điều đã nằm trong dự tính của giới chuyên môn. Bởi chênh lệch giữa hai bên là rất lớn.
<div class="row mt-2">
<div class="col-md-6" style="font-size: 22px; color: red">
$20,000
</div>
<div class="col-md-6" style="text-align: right;">
<button class="btn btn-sm btn-success">Add to card</button>
</div>
</div>
</div>
</div>
</div>
<!-- item ends -->
<!-- item -->
<div class="col-md-3 col-6">
<div class="card mt-3">
<div class="card-header" style="padding: 0px !important;">
<img src="https://thumbs.dreamstime.com/b/portrait-funny-dog-behind-wheel-car-jack-russell-terrier-sunglasses-151057370.jpg" style="width: 100%">
</div>
<div class="card-body">
Việc Thái Lan thua Triều Tiên là điều đã nằm trong dự tính của giới chuyên môn. Bởi chênh lệch giữa hai bên là rất lớn.
<div class="row mt-2">
<div class="col-md-6" style="font-size: 22px; color: red">
$20,000
</div>
<div class="col-md-6" style="text-align: right;">
<button class="btn btn-sm btn-success">Add to card</button>
</div>
</div>
</div>
</div>
</div>
<!-- item ends -->
<!-- item -->
<div class="col-md-3 col-6">
<div class="card mt-3">
<div class="card-header" style="padding: 0px !important;">
<img src="https://thumbs.dreamstime.com/b/portrait-funny-dog-behind-wheel-car-jack-russell-terrier-sunglasses-151057370.jpg" style="width: 100%">
</div>
<div class="card-body">
Việc Thái Lan thua Triều Tiên là điều đã nằm trong dự tính của giới chuyên môn. Bởi chênh lệch giữa hai bên là rất lớn.
<div class="row mt-2">
<div class="col-md-6" style="font-size: 22px; color: red">
$20,000
</div>
<div class="col-md-6" style="text-align: right;">
<button class="btn btn-sm btn-success">Add to card</button>
</div>
</div>
</div>
</div>
</div>
<!-- item ends -->
<!-- item -->
<div class="col-md-3 col-6">
<div class="card mt-3">
<div class="card-header" style="padding: 0px !important;">
<img src="https://thumbs.dreamstime.com/b/portrait-funny-dog-behind-wheel-car-jack-russell-terrier-sunglasses-151057370.jpg" style="width: 100%">
</div>
<div class="card-body">
Việc Thái Lan thua Triều Tiên là điều đã nằm trong dự tính của giới chuyên môn. Bởi chênh lệch giữa hai bên là rất lớn.
<div class="row mt-2">
<div class="col-md-6" style="font-size: 22px; color: red">
$20,000
</div>
<div class="col-md-6" style="text-align: right;">
<button class="btn btn-sm btn-success">Add to card</button>
</div>
</div>
</div>
</div>
</div>
<!-- item ends -->
<!-- item -->
<div class="col-md-3 col-6">
<div class="card mt-3">
<div class="card-header" style="padding: 0px !important;">
<img src="https://thumbs.dreamstime.com/b/portrait-funny-dog-behind-wheel-car-jack-russell-terrier-sunglasses-151057370.jpg" style="width: 100%">
</div>
<div class="card-body">
Việc Thái Lan thua Triều Tiên là điều đã nằm trong dự tính của giới chuyên môn. Bởi chênh lệch giữa hai bên là rất lớn.
<div class="row mt-2">
<div class="col-md-6" style="font-size: 22px; color: red">
$20,000
</div>
<div class="col-md-6" style="text-align: right;">
<button class="btn btn-sm btn-success">Add to card</button>
</div>
</div>
</div>
</div>
</div>
<!-- item ends -->
<!-- item -->
<div class="col-md-3 col-6">
<div class="card mt-3">
<div class="card-header" style="padding: 0px !important;">
<img src="https://thumbs.dreamstime.com/b/portrait-funny-dog-behind-wheel-car-jack-russell-terrier-sunglasses-151057370.jpg" style="width: 100%">
</div>
<div class="card-body">
Việc Thái Lan thua Triều Tiên là điều đã nằm trong dự tính của giới chuyên môn. Bởi chênh lệch giữa hai bên là rất lớn.
<div class="row mt-2">
<div class="col-md-6" style="font-size: 22px; color: red">
$20,000
</div>
<div class="col-md-6" style="text-align: right;">
<button class="btn btn-sm btn-success">Add to card</button>
</div>
</div>
</div>
</div>
</div>
<!-- item ends -->
</div>
</div>
<!-- modal login -->
<!-- The Modal -->
<div class="modal" id="myLogin">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">DANG NHAP</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form method="post">
<div class="form-group">
<label for="email">Email: </label>
<input type="text" name="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Mat Khau: </label>
<input type="password" name="pwd" class="form-control" id="pwd">
</div>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-success" data-bs-dismiss="modal">DANG NHAP</button>
</div>
</div>
</div>
</div>
<!-- modal login end -->
</body>
</html>Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
