Tạo một trang web từ đầu có thể mất rất nhiều công việc và đòi hỏi kiến thức làm việc về HTML, CSS và có thể là một số JavaScript. Nhưng với Bootstrap, khối lượng công việc và kiến thức trước đó được giảm bớt.
Bootstrap là một khung(framework) mã có sẵn tích hợp với HTML để tạo ra các trang web cách điệu, bố cục phù hợp với kích thước màn hình của người dùng. Framework này cho phép chúng ta cắt giảm thời gian cần thiết để tạo kiểu cho một trang web, đơn giản hóa sự phức tạp của cách bố trí các phần tử, hoạt động trên nhiều trình duyệt và giảm sự thất vọng khi sử dụng CSS thuần túy. Tất cả những gì cần thiết để sử dụng Bootstrap là một vài dòng bổ sung trong tài liệu HTML.
Trong bài học này, chúng ta sẽ làm việc với Bootstrap. Để kết hợp Bootstrap vào một dự án, chúng ta phải bao gồm hai <meta>thẻ và thư viện Bootstrap CSS. Trong ví dụ bên dưới, Bootstrap được liên kết qua Mạng phân phối nội dung (CDN) trong phần tử <head>, như sau:
<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/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script> </body> </html>
Ngoài ra còn có một số thư viện JavaScript tùy chọn nếu chúng tôi muốn thêm một số tương tác vào trang web của mình và chúng được chèn vào cuối phần tử<body>. Để hiểu rõ hơn về Bootstrap, các bạn có thể đọc trên trang chủ của Bootstrap ở phần tài liệu Bắt đầu của Bootstrap để biết thêm thông tin chi tiết. Chúng tôi cũng đã thêm các liên kết JavaScript tùy chọn trong trình chỉnh sửa mã.
Nếu bạn đã sẵn sàng, hãy đặt tay lên bàn phím và bắt đầu!
Đăng nhận xét