By GokiSoft.com|
20:25 01/03/2022|
Học JS
[Video] Tìm hiểu về Bootstrap/jQuery - Giới thiệu
#vidu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap/jQuery tutorial</title>
<!-- ICONS: https://icons.getbootstrap.com/ -->
<!-- ICONS: https://fontawesome.com/ -->
<!-- Bootstrap: framework cua CSS -->
<!-- Bootstrap -> css file -> thiet ke san class, tag, ... -> hoc cach su dung sao cho hop ly -->
<!-- Ket hop code css (rieng) + bootstrap -> Bien thanh 1 du an hoan thien -->
<!-- Thiet ke responsive -> ung dung trong du an -> code rat nhan -> based on jQuery -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<!-- jQuery: library js -> tao san cac function -> giup code nhanh + tuong thich vs nhieu trinh duyet web (chrome, cococ, IE, firefox, opera, ...) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style type="text/css">
.navbar {
margin: 0px;
padding: 0px;
}
.nav-item {
font-weight: bold;
color: white !important;
text-transform: uppercase;
padding-top: 6px !important;
padding-bottom: 6px !important;
}
.nav-item a {
color: white !important;
}
.active {
background-color: #0dcaf0;
}
.nav-item:hover {
background-color: #0dcaf0;
}
.row {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<img src="https://all-digital.org/wp-content/uploads/2018/02/CODINC-logo-600x323-rgb.png" style="height: 120px">
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
<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 active">
<a class="nav-link" href="#"><i class="bi bi-house-fill" style="color: white;"></i> TRANG CHU</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">GIOI THIEU</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">TIN TUC</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CHIA SE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">QUAN DIEM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LIEN HE</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container" style="margin-top: 20px">
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-12 table-responsive">
<table class="table table-hover table-bordered">
<thead class="bg-info text-white">
<tr>
<th>No</th>
<th>Full Name</th>
<th>Email</th>
<th>Phone Number</th>
<th style="width: 60px"></th>
<th style="width: 60px"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>TRAN VAN A</td>
<td>a@gmail.com</td>
<td>123456</td>
<td>
<button class="btn btn-warning">Edit</button>
</td>
<td>
<button class="btn btn-danger">Remove</button>
</td>
</tr>
<tr>
<td>2</td>
<td>TRAN VAN A</td>
<td>a@gmail.com</td>
<td>123456</td>
<td>
<button class="btn btn-warning">Edit</button>
</td>
<td>
<button class="btn btn-danger">Remove</button>
</td>
</tr>
<tr>
<td>3</td>
<td>TRAN VAN A</td>
<td>a@gmail.com</td>
<td>123456</td>
<td>
<button class="btn btn-warning">Edit</button>
</td>
<td>
<button class="btn btn-danger">Remove</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-6 col-md-6 col-lg-4 col-xl-3 col-xxl-2">
<img src="https://gokisoft.com/uploads/2021/03/bt01-huong-dan-tao-ra-1-trang-web-don-gian-nhat-htmlcss.jpg" style="width: 100%">
<p>Noi dung bai viet</p>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xl-3 col-xxl-2">
<img src="https://gokisoft.com/uploads/2021/03/bt01-huong-dan-tao-ra-1-trang-web-don-gian-nhat-htmlcss.jpg" style="width: 100%">
<p>Noi dung bai viet</p>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xl-3 col-xxl-2">
<img src="https://gokisoft.com/uploads/2021/03/bt01-huong-dan-tao-ra-1-trang-web-don-gian-nhat-htmlcss.jpg" style="width: 100%">
<p>Noi dung bai viet</p>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xl-3 col-xxl-2">
<img src="https://gokisoft.com/uploads/2021/03/bt01-huong-dan-tao-ra-1-trang-web-don-gian-nhat-htmlcss.jpg" style="width: 100%">
<p>Noi dung bai viet</p>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xl-3 col-xxl-2">
<img src="https://gokisoft.com/uploads/2021/03/bt01-huong-dan-tao-ra-1-trang-web-don-gian-nhat-htmlcss.jpg" style="width: 100%">
<p>Noi dung bai viet</p>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xl-3 col-xxl-2">
<img src="https://gokisoft.com/uploads/2021/03/bt01-huong-dan-tao-ra-1-trang-web-don-gian-nhat-htmlcss.jpg" style="width: 100%">
<p>Noi dung bai viet</p>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xl-3 col-xxl-2">
<img src="https://gokisoft.com/uploads/2021/03/bt01-huong-dan-tao-ra-1-trang-web-don-gian-nhat-htmlcss.jpg" style="width: 100%">
<p>Noi dung bai viet</p>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xl-3 col-xxl-2">
<img src="https://gokisoft.com/uploads/2021/03/bt01-huong-dan-tao-ra-1-trang-web-don-gian-nhat-htmlcss.jpg" style="width: 100%">
<p>Noi dung bai viet</p>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xl-3 col-xxl-2">
<img src="https://gokisoft.com/uploads/2021/03/bt01-huong-dan-tao-ra-1-trang-web-don-gian-nhat-htmlcss.jpg" style="width: 100%">
<p>Noi dung bai viet</p>
</div>
<div class="col-6 col-md-6 col-lg-4 col-xl-3 col-xxl-2">
<img src="https://gokisoft.com/uploads/2021/03/bt01-huong-dan-tao-ra-1-trang-web-don-gian-nhat-htmlcss.jpg" style="width: 100%">
<p>Noi dung bai viet</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-header bg-info text-white" style="font-weight: bold; text-transform: uppercase;">
Tin Moi
</div>
<div class="card-body">
<div class="row">
<div class="col-md-3">
<img src="https://gokisoft.com/uploads/2021/03/bt01-huong-dan-tao-ra-1-trang-web-don-gian-nhat-htmlcss.jpg" style="width: 100%">
</div>
<div class="col-md-9">
noi dung bai viet
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="https://gokisoft.com/uploads/2021/03/bt01-huong-dan-tao-ra-1-trang-web-don-gian-nhat-htmlcss.jpg" style="width: 100%">
</div>
<div class="col-md-9">
noi dung bai viet
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="https://gokisoft.com/uploads/2021/03/bt01-huong-dan-tao-ra-1-trang-web-don-gian-nhat-htmlcss.jpg" style="width: 100%">
</div>
<div class="col-md-9">
noi dung bai viet
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="https://gokisoft.com/uploads/2021/03/bt01-huong-dan-tao-ra-1-trang-web-don-gian-nhat-htmlcss.jpg" style="width: 100%">
</div>
<div class="col-md-9">
noi dung bai viet
</div>
</div>
<div class="row">
<div class="col-md-3">
<img src="https://gokisoft.com/uploads/2021/03/bt01-huong-dan-tao-ra-1-trang-web-don-gian-nhat-htmlcss.jpg" style="width: 100%">
</div>
<div class="col-md-9">
noi dung bai viet
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>#vidu2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery tutorial</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style type="text/css">
.form-group {
margin-bottom: 20px;
}
</style>
</head>
<body>
<script type="text/javascript">
var index = 0
$(document).ready(function() {
// tuong tu phia duoi
// code se dc xu ly sau khi tai xong trang web
$('#address_id').change(function() {
var v = $('#address_id').val()
console.log('v = ' + v)
})
})
$(function() {
// code nay se dc xu ly -> khi trang web da tai xong
// dat code chay ngay tu dau tai day
$('form').submit(function() {
console.log('submit ...')
var fullname = $('#name_id').val()
var email = $('#email_id').val()
var address = $('#address_id').val()
// document.getElementById('result').innerHTML += `<tr>
// <td>${++index}</td>
// <td>${fullname}</td>
// <td>${email}</td>
// <td>${address}</td>
// </tr>`
$('#result').append(`<tr>
<td>${++index}</td>
<td>${fullname}</td>
<td>${email}</td>
<td>${address}</td>
</tr>`)
// $('#result').prepend(`<tr>
// <td>${++index}</td>
// <td>${fullname}</td>
// <td>${email}</td>
// <td>${address}</td>
// </tr>`)
return false
})
})
function changeFullname() {
// var v = document.getElementById('name_id').value
// selector: id, tag name, class name, name, ...
// var v = $('#name_id').val()
// var v = $('.name-cls').val()
// var v = $('input').val()
// $('input').val('123123123123123')
var v = $('[name=name]').val()
// $('[name=email_name]').val()
// $('[name=address_name]').val()
console.log('change ... ' + v)
}
</script>
<div class="container">
<!-- <form method="post" onsubmit="return saveData()"> -->
<form method="post">
<div class="form-group">
<label>Full Name</label>
<input required type="text" name="name" id="name_id" class="form-control name-cls" onchange="changeFullname()">
</div>
<div class="form-group">
<label>Email</label>
<input required type="email" name="email_name" id="email_id" class="form-control email-cls">
</div>
<div class="form-group">
<label>Address</label>
<input required type="text" name="address_name" id="address_id" class="form-control address-cls">
</div>
<div class="form-group">
<button class="btn btn-success">Register</button>
</div>
</form>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>No</th>
<th>Full Name</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody id="result"></tbody>
</table>
</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)
