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)