Thực hành tuần 4

Th.
S Ngô Thị Ngọc Thắm
Thực hành tuần 4

Phần 1: Phân chia layout bằng Bootstrap 5
Bước 1: Nhập đoạn code sau, cho biết kết quả
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Trang web Bán hàng Đơn giản | NenTang.vn</title>

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">


<link href="assets/css/app.css" type="text/css" rel="stylesheet" />
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="https://www.vlu.edu.vn/">SHOP
PHONE</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarResponsive" aria-
controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Trang chủ <span
class="sr-only">(current)</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Giới thiệu</a>
</li>
<a class="nav-link" href="#">Dịch vụ</a>
</li>
Th.S Ngô Thị Ngọc Thắm
<a class="nav-link" href="3">Liên hệ</a>

</li>
</ul>
</div>
</div>
</nav>

<div class="row">
<div class="col-lg-3">
NỘI DUNG CỘT 3
</div> 
<div class="col-lg-9">
NỘI DUNG CỘT 9
</div> 
</div>
</div> 

<footer class="py-5 bg-dark">
<p class="m-0 text-center text-white">Bản quyền bởi ©
<a href="https://nentang.vn">Đại học Văn Lang</a> ©
2023-2024
</p>
</div>
</footer>

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></
script>

<script src="vendor/bootstrap/js/bootstrap.js"></script>

<script src="assets/js/app.js"></script>
</body>
</html>
Bước 2: Tại div nội dung 3 thêm đoạn code này và cho biết kết quả
Bước 4: tại thẻ div NỘI DUNG 9 thêm vào chuyển slide (.Carousel), chạy cho kết quả
Bước 5: Tiếp t
Phần 2: Tìm hiểu Bootstrap 5
1. Bootstrap là gì? Nêu các đặc điểm của bootstrap

2. Hãy tạo trang web HTML sau và cho biết kết quả
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ Bootstrap</title>


</head>
<body>
<div class="container mt-5">
<h1 class="display-4">Ví dụ Bootstrap</h1>
<p>Một trang web đơn giản sử dụng Bootstrap.</p>


<button class="btn btn-primary">Click vào đây</button>


<table class="table mt-4">

<thead>
<tr>
<th scope="col">STT</th>
<th scope="col">Tên</th>
<th scope="col">Điểm số</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>85</td>
</tr>
<tr>
<td>Mary</td>
<td>92</td>
</tr>
<tr>
<td>David</td>
<td>78</td>
</tr>
</tbody>
</table>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ví dụ Bootstrap</title>

</head>
<body>
<h1 class="display-4">Biểu đồ và danh sách</h1>


<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 75%;" aria-
valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>


<ul class="list-group mt-4">
<li class="list-group-item">Mục 1</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Danh sách dạng grid với Bootstrap</title>

</head>
<body>
<h1 class="display-4">Danh sách dạng grid</h1>
<div class="row">
<div class="col-md-4">
<div class="card mb-4">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="Hình ảnh">
<div class="card-body">
<h5 class="card-title">Sản phẩm 1</h5>
<p class="card-text">Mô tả sản phẩm 1.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
5. Dùng Bootstrap cho ví dụ về cách dùng Tables

6. Dùng Bootstrap cho ví dụ về cách dùng Forms
7. Dùng Bootstrap cho ví dụ về cách dùng Modals
8. Dùng Bootstrap cho ví dụ về cách dùng Navbar
9. Dùng Bootstrap cho ví dụ về cách dùng Icon
10. Dùng Bootstrap cho ví dụ về cách dùng Carousel

Thực hành tuần 4

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Thực hành tuần 4

Uploaded by

Copyright:

Available Formats

Th.

S Ngô Thị Ngọc Thắm

Thực hành tuần 4

Bước 1: Nhập đoạn code sau, cho biết kết quả

<a class="nav-link" href="3">Liên hệ</a>

Phần 2: Tìm hiểu Bootstrap 5

1. Bootstrap là gì? Nêu các đặc điểm của bootstrap

<table class="table mt-4">

<h1 class="display-4">Biểu đồ và danh sách</h1>

5. Dùng Bootstrap cho ví dụ về cách dùng Tables

You might also like