IMG-LOGO
Trang Chủ Học Bootstrap [Share Code] Tìm hiều bootstrap - Lập trình Bootstrap/jQuery
×

Lý Thuyết

01. Hướng dẫn cài đặt bootstrap + jquery - học lập trình bằng bootstrap+ Jquery 02. Học bootstrap qua ví dụ 2- Bootstrap 03. Học bootstrap qua ví dụ 3 - Bootstrap 04. Thao tác lên tags html bằng jquery - Bootstrap 05. Xử lý sự kiện trong jquery (events in jquery) - Bootstrap 06. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 1 07. Viết trang web quản lý sinh viên bằng jquey + bootstrap phần 2 08. Hướng dẫn học bootstrap qua ví dụ dự án web đồng hồ - bootstrap

Bài Tập

Bài 1 - Tạo website bằng bootstrap 4 Thiết kế website -> Su dung Bootstrap 4 Thiết kế web bán rau củ quả - t010.gokisoft.com Bài tập - Thiết kế website sử dụng Bootstrap/jQuery Bài tập - Thiết kế trang web báo dân trí

Examination & Test

TEST - Yêu cầu thiết kế website - landing page html/css/js - bootstrap/jquery

Source Code Chia Sẻ

[Share Code] Tìm hiểu bootstrap Bài 2 - Tạo website bằng bootstrap - Lập trình bootstrap/jquery [Share Code] Tìm hiều bootstrap - Lập trình Bootstrap/jQuery [Share Code] Tìm hiểu Bootstrap - jQuery - Lập trình Bootstrap/jQuery [Share Code] Hướng dẫn tìm hiểu Bootstrap/jQuery [Share Code] Tìm hiểu bootstrap - Lập trình Bootstrap/jQuery - Hoc Bootstrap [Share Code] Tìm hiểu về Bootstrap + jQuery - Viết chương trình quản lý sản phẩm

Tài Liệu Học

Bootstrap 4 - Giới Thiệu Bootstrap 4 Containers Bootstrap 4 Grids Bootstrap 4 Text/Typography Bootstrap 4 Colors Bootstrap 4 Tables Bootstrap 4 Images Bootstrap 4 Jumbotron Bootstrap 4 Alerts Bootstrap 4 Buttons Bootstrap 4 Button Groups Bootstrap 4 Badges Bootstrap 4 Progress Bars Bootstrap 4 Spinners Bootstrap 4 Pagination Bootstrap 4 List Groups Bootstrap 4 Cards Bootstrap 4 Dropdowns Bootstrap 4 Collapse Bootstrap 4 Navs Bootstrap 4 Navigation Bar Bootstrap 4 Forms Bootstrap 4 Form Inputs Bootstrap 4 Inputs Group Bootstrap 4 Custom Forms Bootstrap 4 Carousel Bootstrap 4 Modal Bootstrap 4 Tooltip Bootstrap 4 Popover Bootstrap 4 Toast Bootstrap 4 Scrollspy (Advanced) Bootstrap 4 Utilities Bootstrap 4 Flex Bootstrap 4 Icons Bootstrap 4 Media Objects Bootstrap 4 Filters (Advanced) Bootstrap 4 - Form đăng ký tài khoản người dùng




[Share Code] Tìm hiều bootstrap - Lập trình Bootstrap/jQuery

by TRẦN VĂN ĐIỆP - 14:34 31/12/2020 1,463 Lượt Xem

#vidu.html


<!DOCTYPE html>
<html>
<head>
	<title>HTML/CSS/JS tutorial</title>
	<meta charset="utf-8">

	<style type="text/css">
		.main {
			margin: 0px auto;
			width: 600px;
			background-color: red;
			height: 480px;
			display: flex;
		}

		.left {
			width: 30%;
			height: 100%;
			background-color: yellow;
		}
		 .right {
		 	width: 70%;
			height: 100%;
			background-color: blue;
		 }
	</style>
</head>
<body>
	<div class="main">
		<div class="left">Left</div>
		<div class="right">Right</div>
	</div>
</body>
</html>


#vidu2.html


<!DOCTYPE html>
<html>
<head>
	<title>Bootstral tutorial</title>
	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Su dung framework bootstrap -> Nhung css vao du an -->
	<!-- Cach 1: download tat ca css cua bootstrap ve du an => add vao file html -->
	<!-- Cach 2: su dung link cdn => cap boi bootstrap -->
	<!-- CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<!-- JS -->
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
	<!-- Step 1 -->
	<!-- <h1>Welcome to learn Bootstrap/jQuery</h1> -->
	<!-- <div class="h1 text-center text-danger">Welcome to learn Bootstrap/jQuery</div> -->
	<!-- NavBar -->
	<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
	  <ul class="navbar-nav">
	    <li class="nav-item">
	      <a class="nav-link" href="#">Trang Chu</a>
	    </li>
	    <li class="nav-item active">
	      <a class="nav-link" href="#">Blog Hoc Tap</a>
	    </li>
	    <li class="nav-item">
	      <a class="nav-link" href="#">Tin Tuc</a>
	    </li>
	    <li class="nav-item">
	      <a class="nav-link" href="#">Lien He</a>
	    </li>
	  </ul>
	</nav>

	<div class="container-fluid">
		<!-- Table -->
		<table class="table table-hover table-bordered table-striped table-responsive">
			<thead>
				<tr class="table-success" style="font-size: 20px; color: red">
					<th>STT</th>
					<th>Ho & Ten</th>
					<th>Email</th>
					<th>Phone Number</th>
					<th>Address</th>
					<th>Ho & Ten</th>
					<th>Email</th>
					<th>Phone Number</th>
					<th>Address</th>
					<th>Ho & Ten</th>
					<th>Email</th>
					<th>Phone Number</th>
					<th>Address</th>
					<th>Ho & Ten</th>
					<th>Email</th>
					<th>Phone Number</th>
					<th>Address</th>
					<th>Ho & Ten</th>
					<th>Email</th>
					<th>Phone Number</th>
					<th>Address</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>01</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
				</tr>
				<tr>
					<td>01</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
				</tr>
				<tr class="table-danger">
					<td>01</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
				</tr>
				<tr>
					<td>01</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
				</tr>
				<tr>
					<td>01</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
					<td>Tran Van Diep</td>
					<td>[email protected]</td>
					<td>0967025996</td>
					<td>Nam Dinh</td>
				</tr>
			</tbody>
		</table>

		<div class="row">
			<div class="col-md-3 col-6">
				<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" style="width: 100%">
				<p>
					Title 1
				</p>
			</div>
			<div class="col-md-3 col-6">
				<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" style="width: 100%">
				<p>
					Title 1
				</p>
			</div>
			<div class="col-md-3 col-6">
				<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" style="width: 100%">
				<p>
					Title 1
				</p>
			</div>
			<div class="col-md-3 col-6">
				<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" style="width: 100%">
				<p>
					Title 1
				</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-3 col-6">
				<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" style="width: 100%">
				<p>
					Title 1
				</p>
			</div>
			<div class="col-md-3 col-6">
				<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" style="width: 100%">
				<p>
					Title 1
				</p>
			</div>
			<div class="col-md-3 col-6">
				<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" style="width: 100%">
				<p>
					Title 1
				</p>
			</div>
			<div class="col-md-3 col-6">
				<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" style="width: 100%">
				<p>
					Title 1
				</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-3 col-6">
				<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" style="width: 100%">
				<p>
					Title 1
				</p>
			</div>
			<div class="col-md-3 col-6">
				<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" style="width: 100%">
				<p>
					Title 1
				</p>
			</div>
			<div class="col-md-3 col-6">
				<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" style="width: 100%">
				<p>
					Title 1
				</p>
			</div>
			<div class="col-md-3 col-6">
				<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" style="width: 100%">
				<p>
					Title 1
				</p>
			</div>
		</div>
	</div>
</body>
</html>


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


Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Danh Sách Bài Học

Đã sao chép!!!