By GokiSoft.com|
19:21 20/03/2021|
Học Bootstrap
[Share Code] Tìm hiểu bootstrap - Lập trình Bootstrap/jQuery - Hoc Bootstrap
#index.html
<!DOCTYPE html>
<html>
<head>
<!-- https://icons.getbootstrap.com/ -->
<!-- https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp -->
<title>Bootstrap tutorial</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
<style type="text/css">
.nav-link {
/*border-right: solid #d1d1d1 1px;*/
}
.navbar {
padding: 0px !important;
}
</style>
</head>
<body>
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="bi bi-house-fill"></i> Trang Chu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-folder2-open"></i> Lap Trinh C</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-folder2-open"></i> Frontend</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-folder2-open"></i> Backend</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-folder2-open"></i> Android</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-folder2-open"></i> Java</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-folder2-open"></i> Tools</a>
</li>
</ul>
</div>
</nav>
<div class="container table-responsive" style="padding-top: 20px;">
<table class="table table-bordered table-hover table-striped">
<thead class="bg-info text-light">
<th><i class="bi bi-grid-3x3-gap-fill"></i> No</th>
<th>Full Name</th>
<th>Email</th>
<th>Address</th>
<th>Gender</th>
</thead>
<tbody>
<tr>
<td>01</td>
<td>TRAN VAN A</td>
<td>A@GMAIL.COM</td>
<td>HA NOI</td>
<td>NAM</td>
</tr>
<tr>
<td>02</td>
<td>TRAN VAN A</td>
<td>A@GMAIL.COM</td>
<td>HA NOI</td>
<td>NAM</td>
</tr>
<tr>
<td>03</td>
<td>TRAN VAN A</td>
<td>A@GMAIL.COM</td>
<td>HA NOI</td>
<td>NAM</td>
</tr>
<tr>
<td>04</td>
<td>TRAN VAN A</td>
<td>A@GMAIL.COM</td>
<td>HA NOI</td>
<td>NAM</td>
</tr>
<tr>
<td>05</td>
<td>TRAN VAN A</td>
<td>A@GMAIL.COM</td>
<td>HA NOI</td>
<td>NAM</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<!-- section -->
<div class="row">
<div class="col-md-3 col-6">
<img src="https://www.focus2move.com/wp-content/uploads/2020/01/Tesla-Roadster-2020-1024-03.jpg" style="width: 100%">
<p>Noi dung tin tuc</p>
</div>
<div class="col-md-3 col-6">
<img src="https://www.focus2move.com/wp-content/uploads/2020/01/Tesla-Roadster-2020-1024-03.jpg" style="width: 100%">
<p>Noi dung tin tuc</p>
</div>
<div class="col-md-3 col-6">
<img src="https://www.focus2move.com/wp-content/uploads/2020/01/Tesla-Roadster-2020-1024-03.jpg" style="width: 100%">
<p>Noi dung tin tuc</p>
</div>
<div class="col-md-3 col-6">
<img src="https://www.focus2move.com/wp-content/uploads/2020/01/Tesla-Roadster-2020-1024-03.jpg" style="width: 100%">
<p>Noi dung tin tuc</p>
</div>
<div class="col-md-3 col-6">
<img src="https://www.focus2move.com/wp-content/uploads/2020/01/Tesla-Roadster-2020-1024-03.jpg" style="width: 100%">
<p>Noi dung tin tuc</p>
</div>
<div class="col-md-3 col-6">
<img src="https://www.focus2move.com/wp-content/uploads/2020/01/Tesla-Roadster-2020-1024-03.jpg" style="width: 100%">
<p>Noi dung tin tuc</p>
</div>
<div class="col-md-3 col-6">
<img src="https://www.focus2move.com/wp-content/uploads/2020/01/Tesla-Roadster-2020-1024-03.jpg" style="width: 100%">
<p>Noi dung tin tuc</p>
</div>
<div class="col-md-3 col-6">
<img src="https://www.focus2move.com/wp-content/uploads/2020/01/Tesla-Roadster-2020-1024-03.jpg" style="width: 100%">
<p>Noi dung tin tuc</p>
</div>
<div class="col-md-3 col-6">
<img src="https://www.focus2move.com/wp-content/uploads/2020/01/Tesla-Roadster-2020-1024-03.jpg" style="width: 100%">
<p>Noi dung tin tuc</p>
</div>
<div class="col-md-3 col-6">
<img src="https://www.focus2move.com/wp-content/uploads/2020/01/Tesla-Roadster-2020-1024-03.jpg" style="width: 100%">
<p>Noi dung tin tuc</p>
</div>
<div class="col-md-3 col-6">
<img src="https://www.focus2move.com/wp-content/uploads/2020/01/Tesla-Roadster-2020-1024-03.jpg" style="width: 100%">
<p>Noi dung tin tuc</p>
</div>
<div class="col-md-3 col-6">
<img src="https://www.focus2move.com/wp-content/uploads/2020/01/Tesla-Roadster-2020-1024-03.jpg" style="width: 100%">
<p>Noi dung tin tuc</p>
</div>
</div>
</div>
</body>
</html>Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
