Bùi Tấn Lực - 431
- 10/10/2024
Bùi Tấn Lực 
Bootstrap là gì? Đó là một front-end framework mã nguồn mở miễn phí giúp website tương thích với đa dạng các thiết bị và kích thước màn hình khác nhau, chi tiết như nào hãy cùng chúng tôi phân tích:
Bootstrap là gì? Tính năng của Bootstrap
Mục Lục [Ẩn]
Bootstrap là gì?
Bootstrap là một front-end framework mã nguồn mở miễn phí ra đời nhằm mục đích giúp website có khả năng tương thích với đa dạng các thiết bị và kích thước màn hình khác nhau như điện thoại di động, máy tính bảng và máy tính để bàn... khi cung cấp một bộ công cụ và các lớp CSS có sẵn để tạo giao diện người dùng, bao gồm hệ thống lưới, nút, biểu mẫu và nhiều thành phần khác.
Xem thêm bài viết:
Các file chính của Bootstrap
Bootstrap.CSS
Bootstrap.CSS có nhiệm vụ quản lý và sắp xếp bố cục của website trong khi HTML quản lý cấu trúc website, 2 phần này kết hợp lại để dễ dàng thiết kế giao diện website hơn. Ngoài ra CSS còn có khả năng định dạng table, bố cục hình ảnh và định dạng kiểu văn bản.
Bootstrap.js
Đây là phần rất quan trọng đối với Bootstrap, phần này chịu trách nhiệm cho các hành động tương tác có trên website nhờ có các file JavaScript. Để rút ngắn thời gian thì các nhà phát triển đã sử dụng JQuery vì nó sở hữu một thư viện JavaScript đa nền tảng, mã nguồn mở.
Glyphicons
Là bộ thư viện chứa các icon được tích hợp sẳn chứa trong Bootstrap, đó là những icon được trình bày trong các button, menu,... dùng để mô mô tả rõ hơn về ý nghĩa tại ví trí được gắn.
Tính năng của Bootstrap
Người dùng có thể truy cập vào thư viện của Bootstrap để tạo giao diện của website như: font, typography, table, grid,…
Với việc tích hợp Glyphicons sẽ giảm đi số lượng hình ảnh được thêm vào website góp phần tăng tốc độ load trang.
Bootstrap có tích hợp sẳn JQuery giúp bạn chỉ cần khai báo các tính năng chính xác làm tiết kiệm được nhiều thời gian code web.
Trước khi tải Bootstrap về họ có cho bạn tuỳ chỉnh framework của trang web theo nhu cầu sử dụng.
Bạn có thể tái sử dụng các thành phần đã được thiết kế cho các trang web khác sau này.
Cách cài đặt Bootstrap
Tải Bootstrap trực tiếp
Vào link chi tiết https://getbootstrap.com/docs/5.3/getting-started/download/ hoặc vào trang chủ rel https://getbootstrap.com để chọn phiên bản mới nhất để tải về.
Giải nén, tạo thư mục bootstrap để up 2 thư mục js và css lên source web, sau đó nhúng 2 file mặc định vào.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<h1>Learning Bootstrap</h1>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
- Tệp Zip của Bootstrap cung cấp 2 Foder chính là CSS và JS và mỗi Foder sẽ chứa rất nhiều file css và js. Bạn có thể chỉ cần nhúng 1 file css / js (được chia nhỏ theo đúng nhu cầu) hoặc nhúng 1 file css / js (tổng hợp toàn bộ các chức năng) tùy theo nhu cầu sử dụng.
- Có thể sử dụng tệp bootstrap.css (tệp chưa được nén) để dễ dàng can thiệp nội dung bên trong nếu bạn có nhu cầu chỉnh sửa tệp CSS. Nên sử dụng tệp bootstrap.min.css (tệp đã được nén) nếu bạn không có nhu cầu chỉnh sửa tệp để giảm thiểu dung lượng cho file khi upload lên Host.
Thêm Bootstrap qua CDN
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Nhúng 2 file trên vào trang web. Bởi vì bootstrap nhắm đến đối tượng di động và là framework được thiết kế sẵn, cho nên bạn nên sử dụng thẻ <meta> để đảm bảo được giao diện thiết kế một cách chính xác:
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
width=device-width: Độ rộng của màn hình được thiết lập, phụ thuộc vào kích thước màn hình mà trang web được duyệt mà độ rộng này co giãn .
initial-scale=1: Khi được tải trên trang web có thể chỉnh độ zoom (phóng to, thu nhỏ). Trang web hiển thị đúng kích thước mặc định của nó nếu độ zoom là 1.
Vì sao nên lựa chọn Bootstrap
Tương thích với các trình duyệt
Bootstrap hoạt động tốt trên tất cả các trình duyệt với độ tương thích trên mọi nền tảng trình duyệt, khả năng tự động co giãn trên nhiều kích thước khác nhau nên hỗ trợ Responsive cực kỳ tốt.
Tiết kiệm thời gian
Vì có khả năng tổ chức bố cục website tốt cộng với có nhiều thứ có sẵn trong thư viện lấy ra dùng nên giúp tiết kiệm được rất nhiều thời gian mà không cần phải xây dựng lại từ đầu, giúp công việc hoàn thành một cách nhanh chóng.
Chất lượng sản phẩm đầu ra hoàn hảo
Khả năng tương thích trên nhiều trình duyệt và khả năng co giãn tốt trên từng thiết bị thì sẽ đảm bảo uy tín khi tạo ra các sản phẩm webiste ít lỗi, cộng với nhiều tiện ích hấp dẫn khiến website được xây dựng hoạt động tốt trở thành một đầu ra hoàn hảo.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Bootstrap là gì?
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
