By GokiSoft.com| 09:44 19/02/2021|
Học Bootstrap

[Share Code] Hướng dẫn tìm hiểu Bootstrap/jQuery

#vidu.html


<!DOCTYPE html>
<html>
<head>
	<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>
</head>
<body>
	<div class="container-fluid">
		<div class="alert alert-success">
			<button type="button" class="close" data-dismiss="alert">&times;</button>
		  	<strong>Success!</strong> Indicates a successful or positive action.
		</div>

		<button class="btn btn-danger">Send Email</button>

		<ul class="pagination" style="margin-top: 15px;">
		  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
		  <li class="page-item active"><a class="page-link" href="#">1</a></li>
		  <li class="page-item"><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="#">Next</a></li>
		</ul>

		<table class="table table-bordered table-hover table-striped table-dark">
			<thead>
				<tr class="bg-info">
					<th>No</th>
					<th>Full Name</th>
					<th>Birthday</th>
					<th>Gender</th>
					<th>Address</th>
				</tr>
			</thead>
			<tbody>
				<tr class="text-danger">
					<td>01</td>
					<td>TRAN VAN A</td>
					<td>01/01/1999</td>
					<td>MALE</td>
					<td>NAM DINH</td>
				</tr>
				<tr class="table-danger">
					<td>02</td>
					<td>TRAN VAN A</td>
					<td>01/01/1999</td>
					<td>MALE</td>
					<td>NAM DINH</td>
				</tr>
				<tr>
					<td>03</td>
					<td>TRAN VAN A</td>
					<td>01/01/1999</td>
					<td>MALE</td>
					<td>NAM DINH</td>
				</tr>
				<tr>
					<td>04</td>
					<td>TRAN VAN A</td>
					<td>01/01/1999</td>
					<td>MALE</td>
					<td>NAM DINH</td>
				</tr>
				<tr>
					<td>05</td>
					<td>TRAN VAN A</td>
					<td>01/01/1999</td>
					<td>MALE</td>
					<td>NAM DINH</td>
				</tr>
			</tbody>
		</table>

		<div class="row">
			<!-- 12 cell -->
			<div class="col-md-3 col-6">
				<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_19_83_37978841/1946f8073a44d31a8a55.jpg" style="width: 100%">
				<p>
					Nguyên Phó Thủ tướng Trương Vĩnh Trọng từ trần
				</p>
			</div>
			<div class="col-md-3 col-6">
				<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_19_83_37978841/1946f8073a44d31a8a55.jpg" style="width: 100%">
				<p>
					Nguyên Phó Thủ tướng Trương Vĩnh Trọng từ trần
				</p>
			</div>
			<div class="col-md-3 col-6">
				<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_19_83_37978841/1946f8073a44d31a8a55.jpg" style="width: 100%">
				<p>
					Nguyên Phó Thủ tướng Trương Vĩnh Trọng từ trần
				</p>
			</div>
			<div class="col-md-3 col-6">
				<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_19_83_37978841/1946f8073a44d31a8a55.jpg" style="width: 100%">
				<p>
					Nguyên Phó Thủ tướng Trương Vĩnh Trọng từ trần
				</p>
			</div>
			<div class="col-md-3 col-6">
				<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_19_83_37978841/1946f8073a44d31a8a55.jpg" style="width: 100%">
				<p>
					Nguyên Phó Thủ tướng Trương Vĩnh Trọng từ trần
				</p>
			</div>
			<div class="col-md-3 col-6">
				<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_19_83_37978841/1946f8073a44d31a8a55.jpg" style="width: 100%">
				<p>
					Nguyên Phó Thủ tướng Trương Vĩnh Trọng từ trần
				</p>
			</div>
			<div class="col-md-3 col-6">
				<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_19_83_37978841/1946f8073a44d31a8a55.jpg" style="width: 100%">
				<p>
					Nguyên Phó Thủ tướng Trương Vĩnh Trọng từ trần
				</p>
			</div>
			<div class="col-md-3 col-6">
				<img src="https://photo-baomoi.zadn.vn/w200_r3x2/2021_02_19_83_37978841/1946f8073a44d31a8a55.jpg" style="width: 100%">
				<p>
					Nguyên Phó Thủ tướng Trương Vĩnh Trọng từ trần
				</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)