Cấu trúc cơ bản cho một dự án Bootstrap

Để bắt đầu một dự án mới một cách nhanh nhất, bạn cần một cấu trúc cơ bản cho một dự án Bootstrap mẫu được tạo sẵn và luôn sẵn sàng để sử dụng bất kì lúc nào. Bài viết này mình sẽ giới thiệu các bạn một thư mục mẫu để bắt đầu dự án Bootstrap theo chuẩn (của mình).

Bootstrap là một front-end framework phổ biến nhất cho việc phát triển các ứng dụng responsive, mobile trên nền web. Trong cách bài viết sau, mình sẽ hướng dẫn chi tiết và sâu hơn về framework này.

Một dự án Bootstrap sẽ có cấu trúc như sau:

init-html/
├── css/
│   ├── main.css
├── img/
│   ├── favicon.ico
├── js/
│   ├── main.js
├── index.html

Tập tin main.css là các style riêng của trang web.

/* Cơ bản */
img {
    max-width: 100%;
    height: auto;
}

Tập tin main.js chứa các đoạn JavaScript.

$(document).ready(function() {
    // JavaScript ở đây
});

Thư mục img chứa hình ảnh, và tập tin index.html là phần quan trọng nhất.

<!doctype html>
<html class="no-js" lang="vi">
<head>
<meta charset="utf-8">
<title>Init HTML</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
<link rel="shortcut icon" href="img/favicon.ico">
</head>
<body>

    <!-- Các thẻ HTML ở đây -->
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</body>
</html>

Nội dung trên đã bao gồm Bootstrap 3, jQuery, các tập tin CSS, JavaScript và Favicon.

Bạn có thể tải về cấu trúc web này tại đây, để sử dụng bạn chỉ cần copy vào thư mục htdocs, đổi tên init-html thành tên dự án của bạn.

Tải về

Với Bootstrap 4, bạn chỉ cần thay đổi liên kết đến mã nguồn. Cụ thể:

<!doctype html>
<html class="no-js" lang="vi">
<head>
<meta charset="utf-8">
<title>Init HTML</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>

    <!-- Các thẻ HTML ở đây -->
    
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
</html>

Với Popper.js là thư viện hỗ trợ cho các thành phần như Tooltips, Popovers…

Bootstrap 5 cũng tương tự.

<!doctype html>
<html class="no-js" lang="vi">
<head>
<meta charset="utf-8">
<title>Init HTML</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>

    <!-- Các thẻ HTML ở đây -->
    
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
</html>

Chúc các bạn bắt đầu dự án suôn sẻ!

5/5 (1 bình chọn)