Tạo bởi Trắc Nghiệm Việt|
[Share Code] Tìm hiểu bootstrap
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>