Cách dùng Bootstrap với HTML

Chủ nhật - 18/12/2022 23:54
In ra
Đóng cửa sổ này

Bootstrap là một framework HTML, CSS và Javascript mã nguồn mở, giúp bạn phát triển UI dễ hơn bằng các class phản hồi có sẵn và tiện ích khác. Framework mã nguồn mở này hiện đã giúp hơn 18 triệu web hoạt động và con số này dự kiến sẽ còn tăng lên trong tương lai.

Bootstrap và HTML

JS và CSS JavaScripts có thể tái sử dụng sẵn có cùng với Bootstrap có thể giúp bạn đạt được kết quả như mong đợi. Dùng Bootstrap với HTML có thể khá khó với người mới bắt đầu. Thế nhưng, đừng lo, hướng dẫn từng bước dưới đây sẽ giúp bạn biết cách sử dụng Bootstrap với HTML nhanh chóng.

Yêu cầu:

Bạn cần có kiến thức cơ bản về HTML/CSS và JS.

Hướng dẫn dùng Bootstrap với HTML

Để bao gồm Bootstrap trong HTML, bạn có thể dùng một trong số 3 phương pháp sau:

Dùng Bootstrap CDN

CSS

Chỉ cần sao chép link stylesheet này với <head> của file HTML:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Các chức năng JavaScript của một số phần tử như dropdown, tab… phụ thuộc vào jQuery và popper.js.

Vì thế, bao gồm jQuery và popper.js theo thứ tự sau ngay trước khi tải file JavaScript bootstrap để đảm bảo hoạt động bình thường.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Tải file cục bộ

Thay vì dùng CDN, bạn có thể tải file cục bộ cho thư mục dự án từ https://getbootstrap.com/docs/4.3/getting-started/download/. Sau đó, bạn có thể bao gồm tệp bootstrap.min.css trong <head> và bootstrap.min.js trong <body>. Thậm chí nếu đang dùng file bootstrap đã tải về, bạn phải bao gồm jquery.min.js và popper.min.js trước khi tải bootstrap.min.js.

Sử dụng trình quản lý gói

Bạn có thể dễ dàng đưa Bootstrap vào bất kỳ dự án của bạn bằng cách dùng trình quản lý gói như npm, yarn… Vì npm là trình quản lý gói phổ biến nhất được dùng bởi nhà phát triển front-end, chúng ta sẽ tiếp tục với lệnh npm để cài đặt bootstrap. Nhập lệnh sau vào thư mục dự án của bạn (giả sử bạn đã khởi tao npm trogn dự án).

npm install bootstrap

Lệnh này sẽ tải một bản sao file bootstrap cục bộ bên trong thư mục node_modules trong dự án. Sau đó, bạn có thể bao gồm file bootstap.min.css ở <head> và bootstrap.min.js ở <body>. Như đã đề cập ở phương pháp số 2, bạn phải bao gồm jquery.min.js và popper.min.js trước khi tải bootstrap.min.js.

Sử dụng

Một file HTML mẫu sau khi bao gồm bootstrap CSS và js sẽ trông như ví dụ bên dưới. Ở đây phương pháp CDN đã được sử dụng. Bạn có thể chỉnh sửa thuộc tính HREF cho stylesheet và src cho javascript với đường dẫn proper nếu chọn phương pháp khác.

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Bootstrap example</title>
</head>
<body>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Sau khi đã bao gồm Bootstrap trong dự án của bạn bằng bất kỳ phương pháp kể trên, bạn có thể dùng tất cả các thành phần có sẵn trong bootstrap dễ dàng.

Ví dụ, để tạo một button Bootstrap trong màu chính (Primary), bạn phải dùng markup.

<button type="button" class="btn btn-primary">Primary
</button>

Với 2 class này, bạn sẽ có một nút bấm với tất cả các kiểu liên quan, nhờ đó, bạn tiết kiệm được đáng kể thời gian tạo kiểu nút HTML mặc định.

Trên đây là cách dùng Bootstrap với HTML. Hi vọng bài viết hữu ích với các bạn.

Nguồn tin: Quantrimang.com