Bắt đầu với Bootstrap

Trong hướng dẫn này, bạn sẽ học cách tạo một trang web bằng Bootstrap.

Bắt đầu với Bootstrap

Trong hướng dẫn này, bạn sẽ tìm hiểu 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ề HTMLCSS.

Vâng, bây giờ hãy bắt đầu tạo trang web hỗ trợ Bootstrap đầu tiên của chúng ta.

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 thông qua CDN. Bootstrap yêu cầu thư viện bên thứ ba Popper.js cho một số thành phần của nó như popover và tooltip. Bạn có thể bao gồm nó một cách riêng biệt hoặc chỉ cần bao gồm Bootstrap JS đi kèm với Popper.

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 (Content Delivery Network - 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ì chúng được 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 bạn 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">
    <title>Basic HTML File</title>
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>
Mẹo: Luôn bao gồm thẻ <meta>  viewport bên trong phần <head> tài liệu của bạn để kích hoạt tính năng zoom chạm và đảm bảo hiển thị phù hợp trên thiết bị di động.

Bước 2: Sử dụng Bootstrap trong tệp HTML

Để 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 CSS và JS của Bootstrap bằng cách sử dụng các liên kết CDN của chúng. Ngoài ra, bạn nên bao gồm các tệp JavaScript ở cuối trang, ngay trước thẻ </body> đóng để cải thiện hiệu suất của các trang web của bạn.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Basic Bootstrap Template</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

Và chúng ta đã sẵn sàng! Sau khi thêm các tệp CSS và JS của Bootstrap vào trang HTML của mình, chúng ta có thể bắt đầu phát triển bất kỳ trang web hoặc ứng dụng thích ứng nào với framework Bootstrap.

Các thuộc tính integritycrossorigin đã được thêm vào liên kết CDN để triển khai Tính toàn vẹn của 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.

Lưu ý: Thay đổi lớn nhất trong Bootstrap 5 là nó không yêu cầu jQuery nữa. Tuy nhiên, bạn vẫn có thể sử dụng jQuery để nhanh chóng triển khai các phương thức và tùy chọn của thành phần Bootstrap. Nếu Bootstrap phát hiện jQuery trong đối tượng window, nó sẽ thêm tất cả các thành phần của nó vào hệ thống plugin của jQuery. Bạn sẽ tìm hiểu về chúng trong phần nâng cao của loạt bài hướng dẫn này.
Mẹo: Nếu khách truy cập trang web của bạn đã tải xuống tệp CSS và JS của Bootstrap từ cùng một CDN trong khi truy cập các trang web khác, thì tệp đó sẽ được tải từ bộ nhớ cache của trình duyệt thay vì tải xuống lại, dẫn đến thời gian tải nhanh hơn.

Bước 3: Lưu và xem tệp HTML

Bây giờ hãy lưu tệp HTML của bạn với tên là "bootstrap-template.html".

Để mở tệp này trong trình duyệt web, hãy di chuyển đến thư mục chứa tệp HTML, 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ó thành tệp .txt.

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 Bootstrap mã nguồnBootstrap đã biên dịch . Bạn có thể tải xuống tệp Bootstrap 5 từ đây.

Bản 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. Phiên bản đã biên dịch cũng bao gồm các phụ thuộc JavaScript tùy chọn như Popper đi kèm với Bootstrap JS (bootstrap.bundle.*). Trong khi đó, bản tải xuống mã nguồn chứa các tệp mã 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 các tệp bootstrap.min.cssbootstrap.bundle.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.

Mẹo: Không cần bắt buộc phải bao gồm tệp Popper.js riêng biệt (để làm cho tooltip và popover của Bootstrap hoạt động), vì nó đã được bao gồm trong  tệp "bootstrap.bundle.js" và "bootstrap.bundle.min.js".
BootstrapBootstrap Cơ Bản
Bài Viết Liên Quan:
Bootstrap Toast
Trung Nguyen 14/04/2022
Bootstrap Toast

Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.

Bootstrap ScrollSpy
Trung Nguyen 13/04/2022
Bootstrap ScrollSpy

Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.

Bootstrap Typeahead
Trung Nguyen 13/04/2022
Bootstrap Typeahead

Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.

Bootstrap Carousel
Trung Nguyen 12/04/2022
Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.