By GokiSoft.com| 16:32 17/01/2022|
Học HTML5 - CSS3

[Video] Giới thiệu Bootstrap/jQuery - C2110I


#bootstrap.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap Page</title>
	<!-- Nhung framework bootstrap vao trong du an -->
	<!-- bootstrap -> base on jquery (la thu vien js -> code nhanh, tien hon) -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
	<div class="row">
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
		<div class="col-md-3 col-6">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
			<p>OKosdfsdfksjhf dskfhsdfkshdkfsd fhsdf</p>
		</div>
	</div>
</div>
</body>
</html>


#jquery.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Bootstrap & jQuery</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="form-group">
			<label>Full Name:</label>
			<input type="text" name="fullname" class="form-control" id="fullname_id">
		</div>
		<div class="form-group">
			<label>Email:</label>
			<input type="email" name="email" class="form-control" id="email_id">
		</div>
		<div class="form-group">
			<button class="btn btn-success" onclick="saveData()">Save</button>
		</div>
	</div>

	<div class="container">
		<table class="table table-bordered">
			<thead>
				<tr>
					<th>No</th>
					<th>Full Name</th>
					<th>Email</th>
				</tr>
			</thead>
			<tbody id="result"></tbody>
		</table>
	</div>

<script type="text/javascript">
	// Selector trong jquery
	function saveData() {
		console.log('testing ...')
		//js -> tuong tac vs thanh phan tag trong html
		var fTag = document.getElementById('fullname_id')
		console.log(fTag.value)

		var fname = document.getElementById('fullname_id').value
		console.log(fname)

		//chuyen code tren -> su dung bang jquery
		var fname = $('#fullname_id').val()
		console.log(fname)

		//selector -> tag, name, id, class, bang bat ky thuoc tinh nao
		//Truy cap thong qua tag
		// var inputList = $('input')
		// console.log(inputList.length)
		// $('input').val('12345')

		//Truy cap thong quan class name
		// var inputList = $('.form-control')
		// console.log(inputList.length)
		// $('.form-control').val('4234234234')

		var fname = $('[name=fullname]').val()
		console.log(fname)

		// var resultTag = document.getElementById('result')
		// resultTag.innerHTML += `<tr>
		// 			<td>No</td>
		// 			<td>${$('#fullname_id').val()}</td>
		// 			<td>${$('#email_id').val()}</td>
		// 		</tr>`

		$('#result').append(`<tr>
					<td>No</td>
					<td>${$('#fullname_id').val()}</td>
					<td>${$('#email_id').val()}</td>
				</tr>`)
	}
</script>
</body>
</html>


Tags:

Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)