Chương 3-Bài 2. Cách sử dụng Bootstrap trong dự án của bạn
Tác giả: Dương Nguyễn Phú Cường
Số phút học: 65 phút
Số phút học: 65 phút
Ngày đăng:
29/10/2025, 3:4
Lượt xem: 2268
Step 1: Tạo cấu trúc thư mục dự án
- Mục tiêu của việc tạo cấu trúc dự án giúp cho Việc quản lý các tập tin (các file code HTML, CSS, JS; các file Media, Hình ảnh, Âm thanh, Video) được gọn gàng, dễ dàng phát triển, thuận lợi trong làm việc nhóm.
- Có nhiều cách tạo cấu trúc thư mục dự án, sau đây là gợi ý về cách tổ chức Source code.
- Tạo cấu trúc thư mục dự án theo đề nghị như sau:
website-netashop/ <- Thư mục gốc của dự án
+---assets/ <- Thư mục chứa các file Css, Js, Image, Video, ...
| \---img/ <- Thư mục chứa các ảnh dùng cho Trang web
| \---video/ <- Thư mục chứa các file video dùng cho Trang web
| \---css/ <- Thư mục chứa các file CSS do chúng ta tự viết
| \---js/ <- Thư mục chứa các file JS do chúng ta tự viết
\---vendor/ <- Thư mục chứa các thư viện (library) do các nhà cung cấp (vendor) / bên thứ 3 (3rd party)
+---bootstrap/ <- Thư viện Bootstrap
| +---css/
| \---js/
\---jquery/ <- Thư viện JQuery
\---popperjs/ <- Thư viện PopperJS
\---index.html <- File sẽ được chạy đầu tiên khi truy cập vào Trang web, thường đặt tên là index (hay còn gọi là Trang chủ)
Step 2: download thư viện Bootstrap và JQuery
Bootstrap
- Truy cập trang chủ: https://getbootstrap.com/docs/4.5/getting-started/download/ hoặc download trực tiếp version 4.5 Bootstrap
- Giải nén, chép vào thư mục
/vendor/bootstrap
Jquery
- Bootstrap sử dụng cú pháp Jquery để viết. Nên chúng ta sẽ cần thư viện Jquery đi kèm.
- Truy cập: https://jquery.com/ hoặc "Click vào đây" (phiên bản mới nhất 3.4.1)
- Lưu vào trong
/vendor/jquery/jquery.min.js
PopperJS
- Truy cập: https://unpkg.com/popper.js
- Lưu vào trong
/vendor/popperjs/popper.min.js
Step 3: tạo một trang HTML đơn giản
- Tạo file
index.htmlvời nội dung như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap lesson 1</title>
</head>
<body>
</body>
</html>
Step 4: liên kết thư viện Bootstrap, JQuery và PopperJS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap lesson 1 | Nền tảng Kiến thức</title>
<!-- Liên kết CSS Bootstrap -->
<link href="vendor/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!-- Liên kết Jquery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Liên kết PopperJS -->
<script src="vendor/popperjs/popper.min.js"></script>
<!-- Liên kết Bootstrap -->
<script src="vendor/bootstrap/js/bootstrap.js"></script>
</body>
</html>
Ủng hộ tác giả
Bình luận
Bình luận của bạnNền tảng các kiến thức học tập
Cùng nhau học tập, khám phá các kiến thức nền tảng về Lập trình web, mobile, database nhé.
Nền tảng kiến thức - Hành trang tới tương lai hân hạnh phục vụ Quý khách!
Khám phá, trải nghiệm ngay
Vui lòng đăng nhập để gởi bình luận!
Đăng nhậpChưa có bình luận nào!