Bootstrap
Bootstrap là gì?
Bootstrap là một framework về HTML, CSS, và JavaScript, nó được thiết kế để giúp các nhà phát triển web dễ dàng tạo ra các trang web và ứng dụng web hiện đại, phản hồi nhanh (responsive). Bootstrap được phát triển bởi Twitter và đã trở thành một trong những framework CSS phổ biến nhất hiện nay.
Bootstrap được thiết kế để hoạt động tốt trên các trình duyệt web hiện đại, giúp bạn không phải lo lắng về vấn đề tương thích trình duyệt.
Bootstrap giúp các nhà phát triển dễ dàng tạo ra các trang web chất lượng mà không cần phải là chuyên gia về CSS hoặc JavaScript.
Cách sử dụng Bootstrap.
Có hai cách sử dụng Bootstrap trong dự án đó là Sử dụng Bootstrap CDN hoặc tải Bootstrap về và tích hợp vào dự án.
Cách 1: Sử dụng Bootstrap CDN:
Bạn có thể liên kết trực tiếp đến các tệp CSS và JavaScript của Bootstrap thông qua CDN (Content Delivery Network). Đây là cách nhanh chóng và dễ dàng để bắt đầu.
Ví dụ sử dụng Bootstrap CDN như sau:
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Example</title>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<button class="btn btn-primary">Click me</button>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Cách 2: Tải Bootstrap về máy tính và tích hợp vào dự án của bạn.
Đặc điểm của Bootstrap.
1.Responsive Design:
Bootstrap sử dụng hệ thống lưới grid system giúp thiết kế các trang web dễ dàng thích ứng với nhiều kích thước màn hình khác nhau, từ điện thoại di động đến màn hình lớn.
2.Thành phần giao diện sẵn có (UI Components):
Bootstrap cung cấp nhiều thành phần giao diện (components) có sẵn như nút bấm, thanh điều hướng (navbar), biểu mẫu (forms), bảng (tables), modal, và nhiều thành phần khác. Điều này giúp tiết kiệm thời gian trong việc xây dựng giao diện.
3.Hỗ trợ CSS và JavaScript:
Bootstrap đi kèm với các kiểu style CSS và các plugin JavaScript sẵn có, giúp bạn dễ dàng thêm các tính năng động vào trang web của mình như carousel, modal, dropdown, tooltip, và nhiều hơn nữa.
4.Dễ dàng tùy chỉnh:
Mặc dù Bootstrap cung cấp các kiểu mặc định, tuy nhiên bạn hoàn toàn có thể tùy chỉnh để phù hợp với thiết kế riêng của mình bằng cách ghi đè (override) các CSS hoặc sử dụng các biến SCSS của Bootstrap.