Site icon Init HTML

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

Admin

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/popper.js@1.16.0/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ẻ!

Exit mobile version