By GokiSoft.com|
20:10 13/12/2021|
Học Bootstrap
[Share Code] Giới thiệu Bootstrap/jQuery - C2108L
#register.html
<!DOCTYPE html>
<html>
<head>
<title>Registation Form * Form Tutorial</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="text-center">Registation Form - Input User's Detail Information</h2>
</div>
<div class="panel-body">
<div class="form-group">
<label for="usr">Name:</label>
<input required="true" type="text" class="form-control" id="usr" onchange="checkUser()">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input required="true" type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="birthday">Birthday:</label>
<input type="date" class="form-control" id="birthday">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input required="true" type="password" class="form-control" id="pwd">
</div>
<div class="form-group">
<label for="confirmation_pwd">Confirmation Password:</label>
<input required="true" type="password" class="form-control" id="confirmation_pwd">
</div>
<div class="form-group">
<label for="address">Address:</label>
<input type="text" class="form-control cls-address" id="address" abc="xyz">
</div>
<button class="btn btn-success">Register</button>
</div>
</div>
</div>
<ul id="list">
<li>Vi du 1</li>
<li>Vi du 2</li>
<li>Vi du 3</li>
</ul>
<script type="text/javascript">
$(function() {
//Noi dung code -> dat day -> thuc thi sau khi trang web tai xong
//selector
// console.log($('#email'))
// document.getElementById('email').value = "tranvandiep.it@gmail.com"
$('#email').val('tranvandiep.it@gmail.com')
$('.cls-address').val('Ha Noi')
$('input').val('123456')
$('[type=password]').val('12312312312')
$('[abc=xyz]').val('OKOK')
// listTag = document.getElementById('list')
// listTag.innerHTML += '<li>Vi du 4</li>'
$('#list').append('<li>Vi du 4</li>')
$('#list').append('<li>Vi du 5</li>')
$('#list').prepend('<li>Vi du 6</li>')
// $('#list').html('')
// $('#list').empty()
})
function checkUser() {
console.log('testing...')
}
</script>
</body>
</html>#vidu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Tutorial</title>
<!-- nhung thu vien -->
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"> -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<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.2/dist/js/bootstrap.bundle.min.js"></script> -->
<script type="text/javascript" src="assets/js/bootstrap.bundle.min.js"></script>
<style type="text/css">
.bg-abc {
background-color: #9edef0 !important;
}
</style>
</head>
<body>
<div class="container table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr class="bg-info bg-abc">
<th>STT</th>
<th>Full Name</th>
<th>Email</th>
<th>Gender</th>
<th>Address</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="bg-info">
<td>01</td>
<td>TRAN VAN A</td>
<td>TRANVANDIEP.IT@GMAIL.COM</td>
<td>NAM</td>
<td>HA NOI</td>
<td><button class="btn btn-warning">Edit</button></td>
<td><button class="btn btn-danger">Remove</button></td>
</tr>
<tr>
<td>01</td>
<td>TRAN VAN A</td>
<td>TRANVANDIEP.IT@GMAIL.COM</td>
<td>NAM</td>
<td>HA NOI</td>
<td><button class="btn btn-warning">Edit</button></td>
<td><button class="btn btn-danger">Remove</button></td>
</tr>
<tr>
<td>01</td>
<td>TRAN VAN A</td>
<td>TRANVANDIEP.IT@GMAIL.COM</td>
<td>NAM</td>
<td>HA NOI</td>
<td><button class="btn btn-warning">Edit</button></td>
<td><button class="btn btn-danger">Remove</button></td>
</tr>
<tr>
<td>01</td>
<td>TRAN VAN A</td>
<td>TRANVANDIEP.IT@GMAIL.COM</td>
<td>NAM</td>
<td>HA NOI</td>
<td><button class="btn btn-warning">Edit</button></td>
<td><button class="btn btn-danger">Remove</button></td>
</tr>
<tr>
<td>01</td>
<td>TRAN VAN A</td>
<td>TRANVANDIEP.IT@GMAIL.COM</td>
<td>NAM</td>
<td>HA NOI</td>
<td><button class="btn btn-warning">Edit</button></td>
<td><button class="btn btn-danger">Remove</button></td>
</tr>
<tr>
<td>01</td>
<td>TRAN VAN A</td>
<td>TRANVANDIEP.IT@GMAIL.COM</td>
<td>NAM</td>
<td>HA NOI</td>
<td><button class="btn btn-warning">Edit</button></td>
<td><button class="btn btn-danger">Remove</button></td>
</tr>
<tr>
<td>01</td>
<td>TRAN VAN A</td>
<td>TRANVANDIEP.IT@GMAIL.COM</td>
<td>NAM</td>
<td>HA NOI</td>
<td><button class="btn btn-warning">Edit</button></td>
<td><button class="btn btn-danger">Remove</button></td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<div class="row">
<!-- sm, md, lg, xl, xxl -->
<div class="col-6 col-md-3">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/khoa-hoc-lap-trinh-c-online.jpg" style="width: 100%;">
<h3>Khoá học lập trình C/C++ Dành cho người mới bắt đầu.</h3>
</div>
<div class="col-6 col-md-3">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/khoa-hoc-lap-trinh-c-online.jpg" style="width: 100%;">
<h3>Khoá học lập trình C/C++ Dành cho người mới bắt đầu.</h3>
</div>
<div class="col-6 col-md-3">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/khoa-hoc-lap-trinh-c-online.jpg" style="width: 100%;">
<h3>Khoá học lập trình C/C++ Dành cho người mới bắt đầu.</h3>
</div>
<div class="col-6 col-md-3">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/khoa-hoc-lap-trinh-c-online.jpg" style="width: 100%;">
<h3>Khoá học lập trình C/C++ Dành cho người mới bắt đầu.</h3>
</div>
</div>
<div class="row">
<div class="col-6 col-md-3">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/khoa-hoc-lap-trinh-c-online.jpg" style="width: 100%;">
<h3>Khoá học lập trình C/C++ Dành cho người mới bắt đầu.</h3>
</div>
<div class="col-6 col-md-3">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/khoa-hoc-lap-trinh-c-online.jpg" style="width: 100%;">
<h3>Khoá học lập trình C/C++ Dành cho người mới bắt đầu.</h3>
</div>
<div class="col-6 col-md-3">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/khoa-hoc-lap-trinh-c-online.jpg" style="width: 100%;">
<h3>Khoá học lập trình C/C++ Dành cho người mới bắt đầu.</h3>
</div>
<div class="col-6 col-md-3">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/khoa-hoc-lap-trinh-c-online.jpg" style="width: 100%;">
<h3>Khoá học lập trình C/C++ Dành cho người mới bắt đầu.</h3>
</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)
