Tạo bởi Trắc Nghiệm Việt|
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>







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

5

Tổng 0 đánh giá

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó