IMG-LOGO
Trang Chủ Chủ Đề Bài 1 - Tạo website bằng bootstrap 4
× 1. Bài 1 - Tạo website bằng bootstrap 4 2) Thiết kế website >> nettruyen.com 3) Thiết kế web bán rau củ quả - t010.gokisoft.com

Bài 1 - Tạo website bằng bootstrap 4

by TRẦN VĂN ĐIỆP - 14:45 28/10/2020 2,124 Lượt Xem

Thiết kế trang web như hình sau



Theo dõi cập nhật nội dung học trên Youtube


Bình luận



Chia sẻ từ lớp học

Nguyễn Anh Vũ [T2008A]

Ngày viết: 14:00 06/11/2020


#fullname.html


<!DOCTYPE html>
<html lang="en">
<head>
	<title></title>
	<meta charset="utf-8">
	<!-- 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>
	<meta name='viewport' content='width=device-width, initial-scale=1'>
	<script src='https://kit.fontawesome.com/a076d05399.js'></script>
	<style type="text/css">
		a{
			color: white;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="nav nav-tabs" style="background-color: black;">
			<div class="nav-item">
				<a href="#" class="nav-link active">GokiSoft</a>
			</div>
			<li class="nav-item">
				<a href="#" class="nav-link">Trang chu</a>
			</li>
			<li class="nav-item dropdown">
				<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">DS Khoa Hoc</a>
				<div class="dropdown-menu">
					<a href="#" class="dropdown-item">1</a>
					<a href="#" class="dropdown-item">2</a>
					<a href="#" class="dropdown-item">3</a>
				</div>
			</li>
			<li class="nav-item">
				<a href="#" class="nav-link">Goc Lap Trinh</a>
			</li>
			<div class="nav-item" style="margin-left: 400px; display: flex;">
				<a href="#" class="nav-link"><i class="fas fa-user-alt" style="font-size: 14px;"></i>DangKy</a>
				<a href="#" class="nav-link"><i class="fas fa-sign-in-alt"></i>Dang Nhap</a>
			</div>
		</div>
	</div>
	<div class="container" style="margin-top: 30px; color: white">
		<div class="card">
			<div class="card-header bg-primary">Quan ly thong tin sinh vien</div>
		<div class="card-body">
			<table class="table table-hover table-bordered">
				<thead>
					<tr>
						<td>STT</td>
						<td>Fullname</td>
						<td>Age</td>
						<td>Email</td>
						<td>Phone Number</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>Nguyen Van A</td>
						<td>12</td>
						<td>[email protected]</td>
						<td>123456</td>
					</tr>
					<tr>
						<td>2</td>
						<td>Nguyen Van B</td>
						<td>11</td>
						<td>[email protected]</td>
						<td>14253631</td>
					</tr>
					<tr>
						<td>3</td>
						<td>Nguyen Van C</td>
						<td>14</td>
						<td>[email protected]</td>
						<td>124346346</td>
					</tr>
					<tr>
						<td>4</td>
						<td>Nguyen Van D</td>
						<td>43</td>
						<td>[email protected]</td>
						<td>2353462523</td>
					</tr>
					<tr>
						<td>5</td>
						<td>Nguyen Van E</td>
						<td>23</td>
						<td>[email protected]</td>
						<td>2353464</td>
					</tr>
					<tr>
						<td>6</td>
						<td>Nguyen Van F</td>
						<td>434</td>
						<td>[email protected]</td>
						<td>26523535</td>
					</tr>
					<tr>
						<td>7</td>
						<td>Nguyen Van G</td>
						<td>32</td>
						<td>[email protected]</td>
						<td>23635636</td>
					</tr>
				</tbody>
			</table>
		</div>
		</div>
		<div class="card bg-primary" style="margin-top: 30px; text-align: center; color: white;	">100%</div>
	</div>
</body>
</html>


Triệu Văn Lăng [T2008A]

Ngày viết: 16:00 30/10/2020



<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>gokisoft.com</title>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
	<!-- 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>
	<style type="text/css">
	
		ul {
			background-color: grey;
		}
		li {
			color: white;
		}
	</style>
</head>
<body>
	<ul class="nav nav-tabs">
		<li class="nav-item">
			<a class="nav-link active" data-toggle="tab" href="#">Gokisoft</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" data-toggle="tab" href="#">Trang Chu</a>
		</li>
		<li class="nav-item dropdown">
		    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">DS Khoa Hoc</a>
		    <div class="dropdown-menu">
		      <a class="dropdown-item" href="#">Link 1</a>
		      <a class="dropdown-item" href="#">Link 2</a>
		      <a class="dropdown-item" href="#">Link 3</a>
		    </div>
		  </li>
		<li class="nav-item">
			<a class="nav-link" data-toggle="tab" href="#">Goc Khoa Hoc</a>
		</li>
		
		<div class="nav-item"  style="margin-left: 400px; display: flex;">
			<li>				
				<a class="nav-link" data-toggle="tab" href="#">
				<i class="	fas fa-user-circle"></i> Dang Ki</a>
			</li>
			<li>				
				<a class="nav-link" data-toggle="tab" href="#">
					<i class="fas fa-file-import" style="background-color: white"></i>Dang Nhap</a>
			</li>	
		</div>
	</ul>
	<div class="container" style="margin-top: 30px ">
		<div class="card">
			<div class="card-header bg-primary" style="color: white">Quản lí thông tin sinh viên</div>
			<div class="card-body">
				<table class="table table-bordered table-hover">
					<thead>
						<tr>
							<th>No</th>
							<th>Full name</th>
							<th>Age</th>
							<th>Email</th>
							<th>Phone Number</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td>TRẦN VĂN ĐIỆP</td>
							<td>16</td>
							<td>[email protected]</td>
							<td>123456789</td>
						</tr>
						<tr>
							<td>2</td>
							<td>TRẦN VĂN ĐIỆP</td>
							<td>16</td>
							<td>[email protected]</td>
							<td>123456789</td>
						</tr>
						<tr>
							<td>3</td>
							<td>TRẦN VĂN ĐIỆP</td>
							<td>16</td>
							<td>[email protected]</td>
							<td>123456789</td>
						</tr>
						<tr>
							<td>4</td>
							<td>TRẦN VĂN ĐIỆP</td>
							<td>16</td>
							<td>[email protected]</td>
							<td>123456789</td>
						</tr>
						<tr>
							<td>5</td>
							<td>TRẦN VĂN ĐIỆP</td>
							<td>16</td>
							<td>[email protected]</td>
							<td>123456789</td>
						</tr>
						<tr>
							<td>6</td>
							<td>TRẦN VĂN ĐIỆP</td>
							<td>16</td>
							<td>[email protected]</td>
							<td>123456789</td>
						</tr>
						<tr>
							<td>7</td>
							<td>TRẦN VĂN ĐIỆP</td>
							<td>16</td>
							<td>[email protected]</td>
							<td>123456789</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

</body>
</html>


Nguyễn Xuân Mai [T2008A]

Ngày viết: 10:27 30/10/2020



<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<!-- 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>

	<meta name='viewport' content='width=device-width, initial-scale=1'>
	<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
	<div class="container-fluid">
		<div class="nav nav-tabs" style="background-color: black; color: white">
			<ul class="nav">
			 	<li class="nav-item">
			    	<a class="nav-link disabled" href="#">GokiSoft</a>
			  	</li>
			  	<li class="nav-item">
			    	<a class="nav-link disabled" href="#">Trang chủ</a>
			  	</li>
			  	<li class="nav-item dropdown">
				    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">DS khóa học</a>
				    <div class="dropdown-menu">
				      <a class="dropdown-item disabled" href="#">HTML</a>
				      <a class="dropdown-item disabled" href="#">Lập trình C</a>
				      <a class="dropdown-item disabled" href="#">Bootstrap</a>
				    </div>
				</li>
			  	<li class="nav-item">
			    	<a class="nav-link" href="#">Góc lập trình</a>
			  	</li>
			  	<li class="nav-item" style="margin-left: 300px; display: flex;">
					<a href="#" class="nav-link disabled"><i class="fas fa-user-alt" style="font-size: 14px;"></i>DangKy</a>
					<a href="#" class="nav-link disabled"><i class="fas fa-sign-in-alt"></i>Dang Nhap</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="container" style="margin-top: 5%">
		<div class="card">
			<div class="card-header bg-primary" style="color: white">Quan ly thong tin sinh vien</div>
			<div class="card-body">
			<table class="table table-bordered table-hover">
				<thead>
					<tr>
						<th>No</th>
						<th>Fullname</th>
						<th>Age</th>
						<th>Email</th>
						<th>Phone Number</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>TRAN VAN DIEP</td>
						<th>31</th>
						<td>[email protected]</td>
						<td>123445345</td>
					</tr>
					<tr>
						<td>2</td>
						<td>TRAN VAN DIEP</td>
						<th>31</th>
						<td>[email protected]</td>
						<td>123445345</td>
					</tr>
					<tr>
						<td>3</td>
						<td>TRAN VAN DIEP</td>
						<th>31</th>
						<td>[email protected]</td>
						<td>123445345</td>
					</tr>
					<tr>
						<td>4</td>
						<td>TRAN VAN DIEP</td>
						<th>31</th>
						<td>[email protected]</td>
						<td>123445345</td>
					</tr>
					<tr>
						<td>5</td>
						<td>TRAN VAN DIEP</td>
						<th>31</th>
						<td>[email protected]</td>
						<td>123445345</td>
					</tr>
				</tbody>
			</table>
			</div>
		</div>
</body>
</html>


Do Trung Duc [T2008A]

Ngày viết: 10:19 30/10/2020


#gokisoft_bai1.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>

	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
  <div style="display: flex;">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark" style="width: 70%">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Gokissoft</a>

  <!-- Links -->

  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Trang chu</a>
    </li>

    <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        DS khoa hoc
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">JS</a>
        <a class="dropdown-item" href="#">C</a>
        <a class="dropdown-item" href="#">HTML</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Goc Lap trinh</a>
    </li>
  </ul>
</nav>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark" style="width: 30%">
  <!-- Links -->
  <ul class="navbar-nav" style="margin-left: 20%; width: 70%">
    <li class="nav-item" style="display: flex; width: 100%">
     <i style="color: white; font-size: 25px; margin-top: 5px;" class="fas fa-user-alt"></i> <a class="nav-link" href="#">Dang ki</a>
    </li>

    <li class="nav-item" style="display: flex; width: 100%">
      <i style="color: white;font-size: 25px;margin-top: 8px;" class="fas fa-sign-in-alt"></i><a class="nav-link" href="#">Dang nhap</a>
    </li>
  </ul>
</nav>
</div>

<div class="container" style="margin-top: 1%">
	<div class="card bg-primary">
		<div class="card-header text-light">Quan li thong tin sinh vien</div>
	</div>
<div style="width: 100%; margin: 0 auto; padding: 2%; border: thin solid #007bff">
 <table class="table table-hover table-bordered">
    <thead>
      <tr>
        <th>No</th>
        <th>Fullname</th>
        <th>Age</th>
        <th>Email</th>
        <th>Phone Number</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Tran Van Diep</td>
        <td>32</td>
        <td>[email protected]</td>
        <td>0986.567.124</td>
      </tr>
       <tr>
        <td>1</td>
        <td>Tran Van Diep</td>
        <td>32</td>
        <td>[email protected]</td>
        <td>0986.567.124</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Tran Van Diep</td>
        <td>32</td>
        <td>[email protected]</td>
        <td>0986.567.124</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Tran Van Diep</td>
        <td>32</td>
        <td>[email protected]</td>
        <td>0986.567.124</td>
      </tr>
       <tr>
        <td>1</td>
        <td>Tran Van Diep</td>
        <td>32</td>
        <td>[email protected]</td>
        <td>0986.567.124</td>
      </tr>
    </tbody>
  </table>
</div>

	<div class="card bg-primary" style="margin-top: 1%;">
		<div class="card-footer text-light" style="text-align: center;">100%</div>
	</div>
</div>

</body>
</html>


Trần Văn Lâm [T2008A]

Ngày viết: 20:47 29/10/2020


#bai1.html


<!DOCTYPE html>
<html lang="en">
<head>
	<title>Thong Tin</title>
	<meta charset="utf-8">
	<!-- 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">
	<style type="text/css">
		.card{
			color: white;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="nevigation">
			<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
				<a class="navbar-brand" href="#">GokiSoft</a>
				<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="#">DS Khoa Hoc</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Goc Lap Trinh</a>
					</li>
				</ul>
			</nav>
		</div>

		<div style="margin-top: 25px;">
			<div class="card">
				<div class="card-header bg-primary"><i class="fas fa-car">Quan li thong tin sinh vien</i></div>
			</div>
	    </div>
		</div>
		<table class="table table-hover table-bordered table-dark" style="margin-top: 8px; width: 80%; margin: 0 auto; border: solid blue 2px;">
			<thead>
				<tr>
					<th>No</th>
					<th>Fullname</th>
					<th>Age</th>
					<th>Email</th>
					<th>Phone Number</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>Tran Van Lam</td>
					<td>18</td>
					<td>[email protected]</td>
					<td>123456789</td>
				</tr>
				<tr>
					<td>2</td>
					<td>Tran Van Lam</td>
					<td>18</td>
					<td>[email protected]</td>
					<td>123456789</td>
				</tr>
				<tr>
					<td>3</td>
					<td>Tran Van Lam</td>
					<td>18</td>
					<td>[email protected]</td>
					<td>123456789</td>
				</tr>
				<tr>
					<td>4</td>
					<td>Tran Van Lam</td>
					<td>18</td>
					<td>[email protected]</td>
					<td>123456789</td>
				</tr>
				<tr>
					<td>5</td>
					<td>Tran Van Lam</td>
					<td>18</td>
					<td>[email protected]</td>
					<td>123456789</td>
				</tr>
				<tr>
					<td>6</td>
					<td>Tran Van Lam</td>
					<td>18</td>
					<td>[email protected]</td>
					<td>123456789</td>
				</tr>
				<tr>
					<td>7</td>
					<td>Tran Van Lam</td>
					<td>18</td>
					<td>[email protected]</td>
					<td>123456789</td>
				</tr>
			</tbody>
		</table>
		<div style="text-align: center; width: 80%; margin: 0 auto; margin-top: 15px;" class="card bg-primary">100%</div>
	</div>

</body>
</html>


Quick Quizzz!!!

User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User Image
User ImageUser ImageUser Image
>> Hiển Thị Quizzz
Đã sao chép!!!