Cách sử dụng Bootstrap trong dự án của bạn

Posted on by mtoplistChuyên mục:Top List

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.html vờ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>

 

 

mtoplist