IMG-LOGO
Trang Chủ Học Bootstrap [Share Code] Tìm hiểu Bootstrap - jQuery - 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 - jQuery - Lập trình Bootstrap/jQuery

by TRẦN VĂN ĐIỆP - 15:39 05/01/2021 1,442 Lượt Xem



<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap/jQuery Tutorial</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://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>
<body>
	<div class="container">
		<div class="card">
			<div class="card-header bg-primary">
				Calculator
			</div>
			<div class="card-body">
				<div class="form-group">
					<label for="x">X: </label>
					<input type="number" name="name_x" id="x" class="form-control" placeholder="Enter x" value="">
				</div>
				<div class="form-group">
					<label for="y">Y: </label>
					<input type="number" name="name_y" id="y" class="form-control" placeholder="Enter y">
				</div>
				<button class="btn btn-success" onclick="clickPlus()">+</button>
				<button class="btn btn-warning" name="button_minus" id="id_button_minus">-</button>
				<button class="btn btn-danger">*</button>
				<button class="btn btn-info">/</button>
				<button class="btn" name="reset">Reset</button>
			</div>
		</div>
		<div class="card">
			<div class="card-header bg-warning">
				History
			</div>
			<div class="card-body">
				<table class="table table-bordered table-hover">
					<thead>
						<tr>
							<th>STT</th>
							<th>X</th>
							<th>Y</th>
							<th>Phép Tính</th>
							<th>Kết Quả</th>
						</tr>
					</thead>
					<tbody id="result">
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		var count = 0

		function clickPlus() {
			console.log('click + ...')
			var x = $('#x').val()
			var y = $('[name=name_y]').val()
			var r = parseInt(x) + parseInt(y)
			console.log(r)

			// document.getElementById('result').innerHTML += `<tr>
			// 				<td>${++count}</td>
			// 				<td>${x}</td>
			// 				<td>${y}</td>
			// 				<td>+</td>
			// 				<td>${r}</td>
			// 			</tr>`
			//Su dung jquery
			// $('#result').append(`<tr>
			// 				<td>${++count}</td>
			// 				<td>${x}</td>
			// 				<td>${y}</td>
			// 				<td>+</td>
			// 				<td>${r}</td>
			// 			</tr>`)
			$('#result').prepend(`<tr>
							<td>${++count}</td>
							<td>${x}</td>
							<td>${y}</td>
							<td>+</td>
							<td>${r}</td>
						</tr>`)
			// $('#result').html('')
			// $('#result').empty()
		}

		$('#id_button_minus').click(function() {
			console.log('click - ...')
		})

		$('[name=reset]').click(function() {
			// $('#x').val('')
			// $('#y').val('')
			$('input').val('')
		})
	</script>
</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!!!