IMG-LOGO
Trang Chủ Học Bootstrap Bài tập - Thiết kế website sử dụng 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




Bài tập - Thiết kế website sử dụng Bootstrap/jQuery

by TRẦN VĂN ĐIỆP - 11:09 19/02/2021 1,771 Lượt Xem


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


Bình luận



Phản Hồi Bởi:

(1) TRẦN VĂN ĐIỆP [Teacher]

Chia sẻ từ lớp học

TRẦN VĂN ĐIỆP [Teacher]

Ngày viết: 09:46 22/02/2021


#bt2162.html


<!DOCTYPE html>
<html>
<head>
	<title>BT2162 - Web Tin Tuc - Bootstrap/jQuery</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

	<style type="text/css">
		.navbar-nav .nav-item {
			border-right: solid #f15757 2px;
		}

		.carousel.slide img {
			width: 100%;
			height: 450px;
		}

		#section_2 button {
			width: 100% !important;
		}
	</style>
</head>
<body>
	<div class="container">
		<!-- Header -->
		<!-- Logo & Ads -->
		<div class="row">
			<div class="col-md-5">
				<img src="https://res.cloudinary.com/ziczacgroup/image/upload/v1587623413/qhwncq3wtjkrsyke6ayw.png" style="max-height: 80px; max-width: 100%">
			</div>
			<div class="col-md-7">
				<img src="https://res.cloudinary.com/ziczacgroup/image/upload/v1608611098/asbezpvx4yzt3gbqwtkz.jpg" style="width: 100%">
			</div>
		</div>
		<!-- Logo & Ads End -->
		<!-- Menu Start -->
		<nav class="navbar navbar-expand-sm bg-danger navbar-dark" style="margin-top: 10px;">
		  <ul class="navbar-nav">
		    <li class="nav-item active">
		      <a class="nav-link" href="#">Home</a>
		    </li>
		    <li class="nav-item">
		      <a class="nav-link" href="#">The Firm</a>
		    </li>
		    <li class="nav-item">
		      <a class="nav-link" href="#">Private Placement Program</a>
		    </li>
		    <li class="nav-item">
		      <a class="nav-link" href="#">Asset Management</a>
		    </li>
		    <li class="nav-item">
		      <a class="nav-link" href="#">Investment</a>
		    </li>
		    <li class="nav-item">
		      <a class="nav-link" href="#">Library</a>
		    </li>
		    <li class="nav-item">
		      <a class="nav-link" href="#">Contact Us</a>
		    </li>
		  </ul>
		</nav>
		<!-- Menu End -->
		<!-- Header End -->
		<!-- Main Start -->
		<!-- Banner Start -->
		<div id="demo" class="carousel slide" data-ride="carousel">

		  <!-- Indicators -->
		  <ul class="carousel-indicators">
		    <li data-target="#demo" data-slide-to="0" class="active"></li>
		    <li data-target="#demo" data-slide-to="1"></li>
		    <li data-target="#demo" data-slide-to="2"></li>
		  </ul>

		  <!-- The slideshow -->
		  <div class="carousel-inner">
		    <div class="carousel-item active">
		      <img src="https://www.extremetech.com/wp-content/uploads/2019/12/SONATA-hero-option1-764A5360-edit.jpg" alt="Los Angeles">
		      <div class="carousel-caption">
		        <h3>Los Angeles</h3>
		        <p>We had such a great time in LA!</p>
		      </div> 
		    </div>
		    <div class="carousel-item">
		      <img src="https://www.u-carmen.com/wp-content/uploads/2020/07/4.jpg" alt="Chicago">
		      <div class="carousel-caption">
		        <h3>Los Angeles</h3>
		        <p>We had such a great time in LA!</p>
		      </div> 
		    </div>
		    <div class="carousel-item">
		      <img src="https://news.hyundaimotorgroup.com/upload/image/mp210/mp210-39694-234687.jpg" alt="New York">
		      <div class="carousel-caption">
		        <h3>Los Angeles</h3>
		        <p>We had such a great time in LA!</p>
		      </div> 
		    </div>
		  </div>

		  <!-- Left and right controls -->
		  <a class="carousel-control-prev" href="#demo" data-slide="prev">
		    <span class="carousel-control-prev-icon"></span>
		  </a>
		  <a class="carousel-control-next" href="#demo" data-slide="next">
		    <span class="carousel-control-next-icon"></span>
		  </a>

		</div>
		<!-- Banner End -->
		<!-- Section: Private Placement Program -->
		<div class="row" style="margin-top: 15px; margin-bottom: 15px;">
			<div class="col-md-6">
				<div class="card" style="padding: 10px; border: 2px solid #dc3545;">
					Nóng: Hải Dương thêm 4 ca dương tính với SARS-CoV-2, riêng ổ dịch Kim Thành 3 ca - Texas hứng chịu thêm thảm họa giữa giá rét kỷ lục
				</div>
			</div>
			<div class="col-md-6">
				<div class="row">
					<div class="col-md-2">
						<img class="rounded-circle" src="https://news.hyundaimotorgroup.com/upload/image/mp210/mp210-39694-234687.jpg" style="width: 60px; height: 60px;">
					</div>
					<div class="col-md-2">
						<img class="rounded-circle" src="https://news.hyundaimotorgroup.com/upload/image/mp210/mp210-39694-234687.jpg" style="width: 60px; height: 60px;">
					</div>
					<div class="col-md-2">
						<img class="rounded-circle" src="https://news.hyundaimotorgroup.com/upload/image/mp210/mp210-39694-234687.jpg" style="width: 60px; height: 60px;">
					</div>
					<div class="col-md-2">
						<img class="rounded-circle" src="https://news.hyundaimotorgroup.com/upload/image/mp210/mp210-39694-234687.jpg" style="width: 60px; height: 60px;">
					</div>
					<div class="col-md-2">
						<img class="rounded-circle" src="https://news.hyundaimotorgroup.com/upload/image/mp210/mp210-39694-234687.jpg" style="width: 60px; height: 60px;">
					</div>
					<div class="col-md-2">
						<img class="rounded-circle" src="https://news.hyundaimotorgroup.com/upload/image/mp210/mp210-39694-234687.jpg" style="width: 60px; height: 60px;">
					</div>
				</div>
			</div>
		</div>
		<!-- Section: Private Placement Program -> End-->
		<!-- Section 2 -->
		<div class="row" id="section_2" style="margin-bottom: 15px;">
			<div class="col-md-4">
				<button class="btn btn-danger">Advisory Services</button>
			</div>
			<div class="col-md-4">
				<button class="btn btn-danger">Investing</button>
			</div>
			<div class="col-md-4">
				<button class="btn btn-danger">Trading</button>
			</div>
		</div>
		<!-- Section 2 -->
		<!-- Section 3 -->
		<div class="row">
			<div class="col-md-4">
				<div class="card">
					<img src="https://news.hyundaimotorgroup.com/upload/image/mp210/mp210-39694-234687.jpg" style="width: 100%">
					<p>
						Hôm nay (22/2), học sinh tỉnh Quảng Nam quay lại trường học tập trung như thường lệ. Trước đó, một văn bản về việc cho học sinh toàn tỉnh nghỉ học đến hết ngày 21/3 được lan truyền trên mạng.
					</p>
				</div>
			</div>
			<div class="col-md-4">
				<div class="card">
					<img src="https://news.hyundaimotorgroup.com/upload/image/mp210/mp210-39694-234687.jpg" style="width: 100%">
					<p>
						Hôm nay (22/2), học sinh tỉnh Quảng Nam quay lại trường học tập trung như thường lệ. Trước đó, một văn bản về việc cho học sinh toàn tỉnh nghỉ học đến hết ngày 21/3 được lan truyền trên mạng.
					</p>
				</div>
			</div>
			<div class="col-md-4">
				<div class="card">
					<img src="https://news.hyundaimotorgroup.com/upload/image/mp210/mp210-39694-234687.jpg" style="width: 100%">
					<p>
						Hôm nay (22/2), học sinh tỉnh Quảng Nam quay lại trường học tập trung như thường lệ. Trước đó, một văn bản về việc cho học sinh toàn tỉnh nghỉ học đến hết ngày 21/3 được lan truyền trên mạng.
					</p>
				</div>
			</div>
		</div>
		<!-- Section 3 End -->
		<!-- Main End -->
	</div>
</body>
</html>


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

Danh Sách Bài Học

Đã sao chép!!!