Bootstrap - Thiết lập Môi trường

Xin chào các bạn nhà phát triển web tương lai! Tôi rất vui mừng được hướng dẫn các bạn trong hành trình thú vị vào thế giới Bootstrap. Là một giáo viên khoa học máy tính với nhiều năm kinh nghiệm, tôi đã thấy biết bao nhiêu sinh viên rạng rỡ khi họ nhận ra Bootstrap có thể thay đổi kỹ năng phát triển web của họ. Hãy cùng nhau nhảy vào và thiết lập môi trường Bootstrap của chúng ta!

Bootstrap - Environment Setup

Bootstrap là gì?

Trước khi bắt đầu, hãy nhanh chóng ôn lại Bootstrap là gì. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. Bootstrap giống như một bộ kit tiền제 cung cấp cho bạn tất cả các bộ phận cần thiết để xây dựng một ngôi nhà vững chắc, đẹp mắt nhanh chóng. Trong thuật ngữ phát triển web, nó là một khung công tác front-end mạnh mẽ cung cấp các thành phần và phong cách tiền xây dựng để giúp bạn tạo ra các trang web响应式, mobile-first một cách dễ dàng.

CSS và JS đã biên dịch

Cách dễ nhất để bắt đầu sử dụng Bootstrap là bao gồm các tệp CSS và JavaScript đã biên dịch trong dự án của bạn. Nó giống như có một bộ công cụ sẵn sàng sử dụng - bạn không cần phải tự装配 các công cụ!

Dưới đây là cách bạn có thể bao gồm Bootstrap trong tệp HTML của mình:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trang Bootstrap của tôi</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Nội dung của bạn ở đây -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Trong ví dụ này, chúng ta đang liên kết tệp CSS của Bootstrap trong phần <head> và bao gồm tệp JavaScript ngay trước thẻ </body> đóng. Điều này đảm bảo rằng các phong cách được tải trước và JavaScript chạy sau khi nội dung trang được tải.

Tệp Nguồn

Đối với những bạn thích tinker và tùy chỉnh (tôi thấy bạn, các nhà phát triển tương lai!), Bootstrap cũng cung cấp các tệp nguồn. Đây là các nguyên liệu thô tạo nên Bootstrap, viết bằng Sass và JavaScript.

Để sử dụng các tệp nguồn, bạn sẽ cần thiết lập một quy trình xây dựng sử dụng một công cụ chạy nhiệm vụ như Gulp hoặc Webpack. Nó hơi phức tạp hơn, vì vậy chúng ta sẽ để dành phần này cho bài học sau. Chỉ cần nhớ, nó giống như có công thức và nguyên liệu để nướng một chiếc bánh từ đầu thay vì mua một chiếc bánh đã làm sẵn!

CDN qua jsDelivr

CDN có nghĩa là Content Delivery Network. Nó giống như việc có nhiều bản sao của một cuốn sách trong thư viện trên khắp thế giới - người dùng có thể truy cập bản sao gần nhất nhanh chóng. jsDelivr là một CDN miễn phí, mã nguồn mở lưu trữ các tệp Bootstrap.

Dưới đây là cách sử dụng Bootstrap qua jsDelivr:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

Các thuộc tính integritycrossorigin là để bảo mật. Chúng giống như một cuộc握手 bí mật đảm bảo rằng bạn nhận được chính xác các tệp bạn mong đợi.

Quản lý Gói

Đối với các dự án phức tạp hơn, bạn có thể sử dụng một công cụ quản lý gói như npm hoặc yarn. Đây là những công cụ giúp quản lý các phụ thuộc của dự án của bạn. Hãy tưởng tượng chúng như một trợ lý cá nhân跟踪 tất cả các nguyên liệu bạn cần cho các công thức phát triển web của mình.

Để cài đặt Bootstrap bằng npm, bạn sẽ mở terminal và gõ:

npm install bootstrap

Sau đó trong tệp JavaScript của bạn, bạn có thể nhập Bootstrap như này:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';

Mẫu HTML

Bây giờ, hãy.put tất cả lại với nhau trong một mẫu HTML cơ bản:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<h1>Xin chào, Thế giới Bootstrap!</h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>

Mẫu này bao gồm các thẻ meta cần thiết, liên kết đến các tệp CSS và JS của Bootstrap qua CDN, và một tiêu đề đơn giản "Xin chào, Thế giới Bootstrap!" để bạn bắt đầu.

Kết luận

Chúc mừng! Bạn đã thiết lập môi trường Bootstrap của mình. Nó giống như bạn vừa unpack một bộ công cụ và trải ra tất cả các công cụ của mình. Bây giờ bạn đã sẵn sàng để bắt đầu xây dựng các trang web响应式.

Nhớ rằng, chìa khóa để thành thạo Bootstrap (hoặc bất kỳ công nghệ nào) là thực hành. Đừng sợ thử nghiệm và mắc lỗi - đó là cách chúng ta đều học. Trong những năm dạy học của tôi, tôi đã thấy sinh viên từ những người mới bắt đầu đến tạo ra các trang web tuyệt vời trong thời gian rất ngắn với Bootstrap.

Trong bài học tiếp theo, chúng ta sẽ nhảy vào hệ thống lưới của Bootstrap để tạo layouts. Nó sẽ rất thú vị, vì vậy hãy đợi đợi!

Chúc các bạn lập trình vui vẻ, và mong rằng các trang web của bạn luôn响应式! ??

Phương thức Mô tả Độ dễ sử dụng Tùy chỉnh
CSS và JS đã biên dịch Sử dụng các tệp Bootstrap đã biên dịch Dễ Hạn chế
Tệp Nguồn Sử dụng các tệp nguồn thô của Bootstrap Cao cấp Cao
CDN qua jsDelivr Liên kết đến các tệp Bootstrap lưu trữ trên CDN Rất dễ Hạn chế
Quản lý Gói Cài đặt Bootstrap bằng npm hoặc yarn Trung bình Trung bình

Credits: Image by storyset