IMG-LOGO
Trang Chủ Học Bootstrap [Share Code] Hướng dẫn tìm hiểu Bootstrap/jQuery
×

Lý Thuyết

01. Hướng dẫn cài đặt bootstrap + jquery - học lập trình bằng bootstrap+ Jquery 02. Học bootstrap qua ví dụ 2- Bootstrap 03. Học bootstrap qua ví dụ 3 - Bootstrap 04. Thao tác lên tags html bằng jquery - Bootstrap 05. Xử lý sự kiện trong jquery (events in jquery) - Bootstrap 06. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 1 07. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 2 08. Hướng dẫn học bootstrap qua ví dụ dự án web đồng hồ - bootstrap

Bài Tập

Bài 1 - Tạo website bằng bootstrap 4 Thiết kế website -> Su dung Bootstrap 4 Thiết kế web bán rau củ quả - t010.gokisoft.com Bài tập - Thiết kế website sử dụng Bootstrap/jQuery Bài tập - Thiết kế trang web báo dân trí

Examination & Test

TEST - Yêu cầu thiết kế website - landing page html/css/js - bootstrap/jquery

Source Code Chia Sẻ

[Share Code] Tìm hiểu bootstrap Bài 2 - Tạo website bằng bootstrap - Lập trình bootstrap/jquery [Share Code] Tìm hiều bootstrap - Lập trình Bootstrap/jQuery [Share Code] Tìm hiểu Bootstrap - jQuery - Lập trình Bootstrap/jQuery [Share Code] Hướng dẫn tìm hiểu Bootstrap/jQuery [Share Code] Tìm hiểu bootstrap - Lập trình Bootstrap/jQuery - Hoc Bootstrap [Share Code] Tìm hiểu về Bootstrap + jQuery - Viết chương trình quản lý sản phẩm

Tài Liệu Học

Bootstrap 4 - Giới Thiệu Bootstrap 4 Containers Bootstrap 4 Grids Bootstrap 4 Text/Typography Bootstrap 4 Colors Bootstrap 4 Tables Bootstrap 4 Images Bootstrap 4 Jumbotron Bootstrap 4 Alerts Bootstrap 4 Buttons Bootstrap 4 Button Groups Bootstrap 4 Badges Bootstrap 4 Progress Bars Bootstrap 4 Spinners Bootstrap 4 Pagination Bootstrap 4 List Groups Bootstrap 4 Cards Bootstrap 4 Dropdowns Bootstrap 4 Collapse Bootstrap 4 Navs Bootstrap 4 Navigation Bar Bootstrap 4 Forms Bootstrap 4 Form Inputs Bootstrap 4 Inputs Group Bootstrap 4 Custom Forms Bootstrap 4 Carousel Bootstrap 4 Modal Bootstrap 4 Tooltip Bootstrap 4 Popover Bootstrap 4 Toast Bootstrap 4 Scrollspy (Advanced) Bootstrap 4 Utilities Bootstrap 4 Flex Bootstrap 4 Icons Bootstrap 4 Media Objects Bootstrap 4 Filters (Advanced) Bootstrap 4 - Form đăng ký tài khoản người dùng




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

by TRẦN VĂN ĐIỆP - 09:44 19/02/2021 1,316 Lượt Xem

#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>


Theo dõi cập nhật nội dung học trên Youtube & Facebook


Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Danh Sách Bài Học

Đã sao chép!!!