Để 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 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).

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

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://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>

    <!-- Các thẻ HTML ở đây -->
    
<script src="https://code.jquery.com/jquery-3.5.1.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-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</html>

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

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

Series: Dự án Blog cá nhân