Trong hướng dẫn sử dụng Bootstrap này, bạn sẽ học cách tạo một trang web bằng Bootstrap dễ dàng như thế nào. Nhưng trước khi bắt đầu, hãy đảm bảo có một trình soạn thảo mã và một số kiến thức làm việc về HTML và CSS.
Vâng, hãy bắt đầu tạo trang web hỗ trợ Bootstrap đầu tiên của chúng tôi.
Tạo trang web đầu tiên của bạn với Bootstrap
Bây giờ chúng ta sẽ tạo một mẫu Bootstrap cơ bản bằng cách bao gồm các tệp Bootstrap CSS và JS, cũng như các phụ thuộc JavaScript khác như jQuery và Popper.js thông qua CDN.
Chúng tôi khuyên bạn nên thêm Bootstrap vào dự án của mình thông qua CDN (Mạng phân phối nội dung) vì CDN mang lại lợi ích về hiệu suất bằng cách giảm thời gian tải, vì họ đang lưu trữ tệp trên nhiều máy chủ trên toàn cầu để khi người dùng yêu cầu, tệp sẽ được phân phát từ máy chủ gần họ nhất. Chúng tôi cũng đang sử dụng các liên kết CDN trong các ví dụ của chúng tôi:
Hãy đi qua các bước sau đây. Ở phần cuối của hướng dẫn này, bạn sẽ tạo một trang web hỗ trợ Bootstrap đơn giản hiển thị thông báo "Hello world" trong trình duyệt web của bạn.
Bước 1: Tạo tệp HTML cơ bản
Mở trình soạn thảo mã yêu thích của bạn và tạo một tệp HTML mới. Bắt đầu với một cửa sổ trống và nhập mã sau và lưu nó dưới dạng "basic.html" trên màn hình của bạn.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Basic HTML File</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Bước 2: Đặt Tệp HTML này làm Mẫu Bootstrap
Để làm cho tệp HTML thuần túy này trở thành mẫu Bootstrap, chỉ cần bao gồm các tệp Bootstrap CSS và JS cũng như jQuery và Popper.js bắt buộc bằng cách sử dụng liên kết CDN của chúng.
Bạn nên bao gồm các tệp JavaScript ở cuối trang, ngay trước </body>thẻ đóng để cải thiện hiệu suất của các trang web của bạn, như được hiển thị trong ví dụ sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Cơ Bản</title>
<!-- Bootstrap CSS file -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<h1>Hello, world!</h1>
<!-- JS files: jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
Và chúng tôi đã sẵn sàng! Sau khi thêm các tệp CSS và JS của Bootstrap cũng như thư viện jQuery và Popper.js cần thiết, chúng tôi có thể bắt đầu phát triển bất kỳ trang web hoặc ứng dụng nào với khung Bootstrap.
Các thuộc tính integrityvà crossorigin đã được thêm vào liên kết CDN để triển khai Tính toàn vẹn nguồn phụ (SRI). Đây là một tính năng bảo mật cho phép bạn giảm thiểu nguy cơ tấn công bắt nguồn từ các CDN bị xâm nhập, bằng cách đảm bảo rằng các tệp mà trang web của bạn tìm nạp (từ CDN hoặc bất kỳ nơi nào) đã được phân phối mà không có các sửa đổi bất ngờ hoặc độc hại. Nó hoạt động bằng cách cho phép bạn cung cấp hàm băm mật mã mà tệp được tìm nạp phải khớp.
Bước 3: Lưu và xem tệp
Bây giờ hãy lưu tệp trên màn hình của bạn dưới dạng "bootstrap-template.html".
Để mở tệp này trong trình duyệt web, hãy điều hướng đến tệp, sau đó nhấp chuột phải vào tệp và chọn trình duyệt web yêu thích của bạn. Ngoài ra, bạn có thể mở trình duyệt của mình và kéo tệp này vào đó.
Lưu ý: Điều quan trọng là phần mở rộng .htmlđược chỉ định, một số trình soạn thảo văn bản, chẳng hạn như Notepad trên Windows, sẽ tự động lưu nó như .txtcách khác.
Tải xuống tệp Bootstrap
Ngoài ra, bạn cũng có thể tải xuống các tệp CSS và JS của Bootstrap từ trang web chính thức của họ và đưa vào dự án của bạn. Có hai phiên bản có sẵn để tải xuống, tệp nguồn Bootstrap và Bootstrap đã biên dịch . Bạn có thể tải xuống tệp Bootstrap 4 từ đây .
Tải xuống được biên dịch chứa phiên bản đã biên dịch và rút gọn của các tệp CSS và JavaScript để phát triển web nhanh hơn và dễ dàng hơn. Tuy nhiên, phiên bản đã biên dịch không bao gồm bất kỳ phụ thuộc JavaScript tùy chọn nào như jQuery và Popper.js. Trong khi đó, bản tải xuống nguồn chứa các tệp nguồn gốc cho tất cả CSS và JavaScript, cùng với bản sao cục bộ của tài liệu.
Tải xuống và giải nén Bootstrap đã biên dịch. Bây giờ nếu bạn nhìn vào bên trong các thư mục, bạn sẽ thấy nó chứa các tệp CSS và JS đã biên dịch ( bootstrap.*), cũng như CSS và JS ( bootstrap.min.*) đã được biên dịch và rút gọn . Sử dụng tệp bootstrap.min.cssvà bootstrap.min.js.
Sử dụng phiên bản rút gọn của các tệp CSS và JS sẽ cải thiện hiệu suất trang web của bạn và tiết kiệm băng thông quý giá do yêu cầu HTTP và kích thước tải xuống nhỏ hơn.
No comments:
Post a Comment