By GokiSoft.com|
15:10 09/11/2020|
Học Bootstrap
[Share Code] Tìm hiểu bootstrap
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap/JQuery 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>
<!-- 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">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<div class="panel panel-primary">
<div class="panel-heading">
Thong Tin Sinh Vien
</div>
<div class="panel-body">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>STT</th>
<th>Ho & Ten</th>
<th>Email</th>
<th>SDT</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>TRAN VAN DIEP</td>
<td>tranvandiep.it@gmail.com</td>
<td>123445345</td>
<td>
<button class="btn btn-warning">Edit</button>
</td>
<td>
<button class="btn btn-danger">Remove</button>
</td>
</tr>
<tr>
<td>1</td>
<td>TRAN VAN DIEP</td>
<td>tranvandiep.it@gmail.com</td>
<td>123445345</td>
<td>
<button class="btn btn-warning">Edit</button>
</td>
<td>
<button class="btn btn-danger">Remove</button>
</td>
</tr>
<tr>
<td>1</td>
<td>TRAN VAN DIEP</td>
<td>tranvandiep.it@gmail.com</td>
<td>123445345</td>
<td>
<button class="btn btn-warning">Edit</button>
</td>
<td>
<button class="btn btn-danger">Remove</button>
</td>
</tr>
<tr>
<td>1</td>
<td>TRAN VAN DIEP</td>
<td>tranvandiep.it@gmail.com</td>
<td>123445345</td>
<td>
<button class="btn btn-warning">Edit</button>
</td>
<td>
<button class="btn btn-danger">Remove</button>
</td>
</tr>
<tr>
<td>1</td>
<td>TRAN VAN DIEP</td>
<td>tranvandiep.it@gmail.com</td>
<td>123445345</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-md-3" style="background-color: red">
1
</div>
<div class="col-md-1" style="background-color: yellow">
1
</div>
<div class="col-md-1" style="background-color: red">
1
</div>
<div class="col-md-1" style="background-color: yellow">
1
</div>
<div class="col-md-1" style="background-color: red">
1
</div>
<div class="col-md-1" style="background-color: yellow">
1
</div>
<div class="col-md-1" style="background-color: red">
1
</div>
<div class="col-md-1" style="background-color: yellow">
1
</div>
<div class="col-md-1" style="background-color: red">
1
</div>
<div class="col-md-1" style="background-color: yellow">
1
</div>
</div>
<div class="row">
<div class="col-md-3 col-xs-3" style="background-color: red">
1
</div>
<div class="col-md-1 col-xs-3" style="background-color: yellow">
1
</div>
<div class="col-md-1 col-xs-3" style="background-color: red">
1
</div>
<div class="col-md-1 col-xs-3" style="background-color: yellow">
1
</div>
<div class="col-md-1 col-xs-3" style="background-color: red">
1
</div>
<div class="col-md-1 col-xs-3" style="background-color: yellow">
1
</div>
<div class="col-md-1 col-xs-3" style="background-color: red">
1
</div>
<div class="col-md-1 col-xs-3" style="background-color: yellow">
1
</div>
<div class="col-md-1 col-xs-3" style="background-color: red">
1
</div>
<div class="col-md-1 col-xs-3" style="background-color: yellow">
1
</div>
</div>
</div>
<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto text-primary">Toast Header</strong>
<small class="text-muted">5 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
</body>
</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>
<!-- 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">
</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" id="address">
</div>
<button class="btn btn-success">Register</button>
</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)
![TRẦN VĂN ĐIỆP [Teacher]](https://www.gravatar.com/avatar/ae8d66100c882095c429167b0fc6737f.jpg?s=80&d=mm&r=g){kind=avatar}
TRẦN VĂN ĐIỆP
2020-11-09 08:10:44
<!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>
<!-- 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">
<!-- POST & GET -->
<form method="post" onsubmit="return checkData();" id="myForm">
<div class="form-group">
<label for="usr">Name:</label>
<input required="true" type="text" class="form-control" id="usr" name="username" value="">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input required="true" type="email" class="form-control" id="email" name="email">
</div>
<div class="form-group">
<label for="birthday">Birthday:</label>
<input type="date" class="form-control" id="birthday" name="birthday">
</div>
<div class="form-group">
<label for="address">Address:</label>
<input type="text" class="form-control" id="address" name="address">
</div>
<button type="submit" class="btn btn-success">Register</button>
<button type="button" class="btn btn-danger" onclick="registerUser2()">Register User</button>
</form>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>STT</th>
<th>Name</th>
<th>Email</th>
<th>Birthday</th>
<th>Address</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
function registerUser2() {
//code bat ky source code => theo nhu nghiep vu yeu cau
//Kich hoat => day du lieu len server
// document.getElementById('myForm').submit()
// $('#myForm').submit()
//Cach 2: Su dung Ajax
//su ly du lieu
// fullname = $('#usr').val()
// email = $('#email').val()
// birthday = $('#birthday').val()
// address = $('#address').val()
// console.log(fullname)
// console.log(email)
// console.log(birthday)
// console.log(address)
var tags = $('input')
for (var i = 0; i < tags.length; i++) {
v = $(tags[i]).val()
console.log(v)
}
$('input').each(function() {
v = $(this).val()
console.log(v)
})
}
function checkData() {
console.log('test....')
//TH: username => nhan cac gia tri sau (abc, a123, a234, b123, c123) => chi co the su dung dc bang js.
return false;//Su dung return false.
}
</script>
</body>
</html>TRẦN VĂN ĐIỆP
2020-10-28 10:06:14
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 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>
<!-- 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>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!-- https://fontawesome.com/icons?from=io -->
</head>
<body>
<nav class="navbar navbar-expand-md bg-info navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">GokiSoft</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Trang Chu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Danh Sach Lop Hoc</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Goc Lap Trinh</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="card">
<div class="card-header bg-warning" style="color: white">
<i class="fas fa-ambulance"></i> Thong Tin Sinh Vien
</div>
<div class="card-body">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>STT</th>
<th>Ho & Ten</th>
<th>Email</th>
<th>SDT</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>TRAN VAN DIEP</td>
<td>tranvandiep.it@gmail.com</td>
<td>123445345</td>
<td>
<button class="btn btn-warning">Edit</button>
</td>
<td>
<button class="btn btn-danger">Remove</button>
</td>
</tr>
<tr>
<td>1</td>
<td>TRAN VAN DIEP</td>
<td>tranvandiep.it@gmail.com</td>
<td>123445345</td>
<td>
<button class="btn btn-warning">Edit</button>
</td>
<td>
<button class="btn btn-danger">Remove</button>
</td>
</tr>
<tr>
<td>1</td>
<td>TRAN VAN DIEP</td>
<td>tranvandiep.it@gmail.com</td>
<td>123445345</td>
<td>
<button class="btn btn-warning">Edit</button>
</td>
<td>
<button class="btn btn-danger">Remove</button>
</td>
</tr>
<tr>
<td>1</td>
<td>TRAN VAN DIEP</td>
<td>tranvandiep.it@gmail.com</td>
<td>123445345</td>
<td>
<button class="btn btn-warning">Edit</button>
</td>
<td>
<button class="btn btn-danger">Remove</button>
</td>
</tr>
<tr>
<td>1</td>
<td>TRAN VAN DIEP</td>
<td>tranvandiep.it@gmail.com</td>
<td>123445345</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>
</body>
</html>
