Với các bạn lập trình viên mới, bootstrap là framework bạn nên biết. Thành phần bootstrap gồm những file nào và cách dùng nó ra sao. Bootstrap là giải pháp giúp bạn xây dựng một website chuẩn SEO và thân thiện người dùng.
Khi bạn thiết kế website của mình mà tư vấn viên trao đổi website của bạn xây dựng theo Bootstrap. Bạn sẽ chưa thể biết nó là gì và có phải là nền tảng mới nhất hay không. Vậy mình xin chia sẻ xem Bootstrap là gì và cách dùng Bootstrap nhé.
Sự ra đời của Bootstrap
Tiếp đến, hãy cùng tìm hiểu về lịch sử Bootstrap một chút để hiểu rõ hơn Bootstrap là gì. Ban đầu,
Đầu tiên Bootstrap có tên là Twitter Blueprint được phát triển bởi Mark Otto và Jacob Thornton tại chính Twitter. Và xuất bản như một mã nguồn mở vào ngày 19/8/2011 trên GitHub.
Ngày 31 tháng 1 năm 2012, Bootstrap 2 được phát hành chính thức. Bootstrap 2 được tích hợp thêm hỗ trợ từ Glyphicons, cũng như thay đổi một số thành phần có sẵn. Ngoài ra phiên bản này bổ sung bố cục lưới 12 cột với thiết kế tùy chỉnh đáp ứng nhiều màn hình. Hay nói cách khác phiên bản này hỗ trợ responsive web design (RWD). Nghĩa là website sẽ tự động điều chỉnh theo đặc điểm của thiết bị được sử dụng (desktop, tablet hay mobile).
Bootstrap 3 ra đời vào tháng 8 năm 2013 với giao diện tương thích với smartphone. Ngoài ra Bootstrap 3 có một hệ thống plugin hoàn toàn mới với các namespace event. Tuy nhiên Bootstrap 3 không còn hỗ trợ Internet Explorer 7 và Firefox 3.6 nữa.
Sau 5 năm ổn định vào tháng 1 năm 2018, người dùng được sử dụng phiên bản mới của Bootstrap – Bootstrap 4. Và vào 5/5/2021 phiên bản Bootstrap 5 cũng được phát hành. Các bạn có thể tải Bootstrap phiên bản mới nhất tại https://getbootstrap.com/.
Các thành phần của Bootstrap
Thành phần Bootstrap gồm 3 File chính giúp quản lý các chức năng của Website và giao diện người dùng:
- Bootstrap.CSS
- Bootstrap.JS
- Glyphicons
Bootstrap.CSS
Quản lý và sắp xếp bố cục của website. HTML sẽ xây dựng cấu trúc và nội dung thì CSS sẽ xử lý bố cục. Như vậy hai cấu trúc này phải tồn tại cùng nhau để xây dựng được bố cục cụ thể.
Từ đây sẽ không mất thời gian để chỉnh sửa thủ công theo một số thiết kế. Mà bạn dùng CSS tạo giao diện thống nhất trên các Website mà không bị giới hạn.
Các hàm CSS được dùng định dạng như bảng, bố cục hình. Bạn sẽ mất một ít thời gian để CSS ghi nhớ hết tất cả các khai báo và bộ chọn.
Bootstrap.JS
Đây là phần cốt lõi chịu trách nhiệm cho việc tương tác trên Website. Để tiết kiệm thời gian viết cú pháp JavaScript các nhà phát triển sử dụng jQuery. Đây là thư viện JavaScript mã nguồn mở, đa nền tảng giúp bạn thêm nhiều chức năng vào Website.
JQuery thực hiện những chức năng như sau:
- Xử lý các yêu cầu của Ajax: loại trừ dữ liệu đến từ một vị trí khác một cách linh hoạt.
- Tạo nên tiện ích bằng bộ sưu tập Plugin JavaScript.
- jQuery tạo hình động tùy chỉnh bằng các thuộc tính của CSS.
- Thêm một số tính năng động cho nội dung các Website.
Tuy Bootstrap với thuộc tính Element HTML và CSS hoạt động tốt. Nhưng vẫn cần jQuery để tạo thiết kế Responsive. Nếu thiếu đi phần này, bạn chỉ có thể dùng các phần tĩnh của CSS mà thôi.
Glyphicons
Trong giao diện Website, phần không thể thiếu chính là Icons. Chúng sẽ liên kết với các dữ liệu và các hành động trên giao diện người dùng.
Bootstrap dùng Glyphicons để đáp ứng nhu cầu trên và bạn có thể sử dụng miễn phí. Ở bản miễn phí, chỉ có giao diện chuẩn nhưng đáp wncs các chức năng cơ bản.
Còn nếu bạn muốn có Icon phong cách hơn, bạn nên mua bộ bộ Icon Premium khác nhau. Các Icon của Glyphicons giúp Website của bạn hấp dẫn và nổi bật hơn.
Những lý do nên sử dụng Bootstrap
Bootstrap là framework sử dụng nhiều nhất hiện nay trong xây dựng website. Bootstrap đã tạo nên một chuẩn riêng và được người dùng hưởng ứng. Do đó thuật ngữ “Thiết kế theo chuẩn Bootstrap” cũng được sử dụng nhiều hơn. Đâu là những lý do Bootstrap lại được đề cao như vậy?
Tiết kiệm thời gian
Bootstrap rút ngắn thời gian trong quá trình thiết kế web. Bởi vì framework Bootstrap có rất nhiều khối (block) được xây dựng (build) sẵn. Khi đó các developer không cần phải xây dựng mọi thứ từ đầu. Mà sử dụng những thứ có sẵn ở trong thư viện Bootstrap để xây dựng.
Dễ sử dụng
Nếu bạn là chuyên gia hay người mới học thiết kế website. Bạn hoàn toàn sử dụng Bootstrap nhanh chóng mà ít gặp các rắc rối. Những thành phần Bootstrap cơ bản sử dụng như một khuôn mẫu. Bạn chỉ cần làm theo các kiến thức cơ bản là được rồi
Tùy chỉnh dễ dàng
Bootstrap là mã nguồn mở nền cho phép developer linh hoạt hơn. Lập trình viên có thể chỉnh sửa các file CSS Bootstrap nếu không như dự án của mình. Giờ đây có thể lựa chọn những thuộc tính, phần tử phù hợp với dự án họ đang theo đuổi.
Ngoài ra trang web tùy chỉnh của Bootstrap cho phép người dùng tạo những theme riêng. Thường các chuyên gia về web họ sẽ tùy chỉnh template bằng các giá trị riêng.
Website đạt chất lượng cao
Bootstrap được nghiên cứu và thử nghiệm trên nhiều loại thiết bị. Những lập trình viên hàng đầu thế giới đã dày công xây dựng. Do đó khi thiết kế website việc lựa chọn Bootstrap quyết định tốt nhất. Bởi sử dụng công cụ chất lượng sẽ tạo nên sản phẩm chất lượng cao.
Responsive
Tạo website với Bootstrap bắt đầu bằng việc tạo các grid layout. Hệ thống grid responsive trong Bootstrap là ưu điểm mạnh mẽ nhất. Bởi ngày này đa số người dùng sử dụng điện thoại di động. Nếu có những sai sót trong thiết kế front-end, sẽ ảnh hưởng website. Khi đó làm giảm trải nghiệm người dùng trên website.
Framework Bootstrap được xây dựng theo hướng “Mobile-First”. Nghĩa là thiết kế từ bản mobile xong rồi mới đến bản desktop. Do đó hệ thống grid có thể chia thành 12 cột bằng nhau. Bao gồm các khối phần tử dựa theo kích thước của màn hình.
Từ đó giao diện trang web sẽ thân thiện hơn với những người dùng mobile. Ngoài ra các lớp trong grid system còn giúp ẩn hoặc hiển thị những phần tử nhất định trên một số thiết bị.
Tương thích với trình duyệt
Bootstrap luôn đảm bảo khả năng tương thích với các trình duyệt như: chrome, firefox, internet Explorer, safari, Opera…
Lưu ý: Bootstrap hỗ trợ từ IE9 trở lên đối với IE browser vì IE8 không hỗ trợ HTML5 và CSS3.
Thành phần và chức năng của Bootstrap
Bootstrap gồm các tập tin JavaScript, CSS và fonts được biên dịch và nén lại. Ngoài ra Bootstrap được xây dựng dưới dạng các module. Do đó tích hợp với hầu hết các mã nguồn mở như WordPress, Joomla, Magento … các chức năng nổi bật của Bootstrap như:
- Bootstrap cho phép lập trình viên truy cập vào thư viện “khổng lồ”. Đó là các thành tố dùng để tạo nên giao diện website hoàn chỉnh như font, typography, form, table, grid…
- Bootstrap cho phép lập trình viên tùy chỉnh các thuộc tính tương thích với website. Sau đó tải xuống và sử dụng trên trang web của bạn. Ví dụ: bạn chọn các thuộc tính layout, button.. mà không chọn modal, Offcanvas. (Bootstrap 3)
- Tái sử dụng các thành phần lặp đi lặp lại trên website.
- Bootstrap được tích hợp jQuery, bạn dùng các thuộc tính jQuery trong quá trình xây dựng website.
- Sử dụng icon glyphicons giảm thiểu việc sử dụng hình ảnh làm biểu tượng và tăng tốc độ tải trang.
Cách cài đặt và sử dụng Bootstrap
Ở trên chúng tôi đã trình bày khá kỹ về lý thuyết Bootstrap. Giờ là cách cài đặt và sử dụng framework Bootstrap. Có hai cách tải Bootstrap phổ biến về website của bạn là tải trực tiếp trên trang cung cấp Bootstrap hoặc tải thông qua CDN Bootstrap.
Tải về từ trang Bootstrap
Bước 1: tải trực tiếp từ trang cung cấp Bootstrap: https://getbootstrap.com/
Bước 2: bạn sẽ nhận được cấu trúc gồm 2 thư mục JS và CSS. Bạn giải nén và cài đặt vào website thông qua mã lệnh.
Chỉ với những bước đơn giản trên, lập trình viên sử dụng Bootstrap cho việc thiết kế rồi. Bởi file đã được biên dịch sẵn nên quá trình tải và khi nhúng Bootstrap vào website hoạt động bình thường. Ví dụ như dưới đây:
<!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="css/bootstrap.min.css">
</head>
<body>
<h1>Learning Bootstrap</h1>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>Thêm Bootstrap qua CDN
Bạn có thể nhúng Bootstrap thông qua CDN (Content Delivery Network – mạng phân phối nội dung). Cách này thường được các developer sử dụng để nhúng Bootstrap. Bởi cách này tiết kiệm băng thông và tích hợp JavaScript, CSS, thư viện JQuery mang lại trải nghiệm người dùng tối ưu hơn.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>Những lưu ý khi sử dụng các thành phần Bootstrap
Bootstrap đang là một trong những công nghệ thiết kế web hiệu quả. Với đa số các lập trình viên sử dụng. Nhưng cũng cần lưu ý một số lỗi khi sử dụng Bootstrap:
- Giao diện không hiển thị chính xác ngay trên các thiết bị khác nhau. Bởi chúng sử dụng thuộc tính width khiến giao diện không điều chỉnh kích thước phù hợp với từng thiết bị cụ thể.
- Chỉnh sửa nội dung của file bootstrap.css có thể khiến các dữ liệu bị hư khi cần nâng cấp. Do đó, thay vì sửa nội dung, bạn có thể overwrite- viết đè lên trang định dạng của riêng mình để thay đổi những thiết lập mặc định của Bootstrap.
- Hộp hội thoại Bootstrap modals có thể hiển thị không đúng cách.
- Quên sử dụng các thuộc tính data của Bootstrap
- Không hỗ trợ với trình duyệt IE8 và các trình duyệt cũ hơn.
Tóm lại
Với những chia sẻ trên đây hy vọng giúp bạn hiểu rõ hơn về các thành phần Bootstrap. Vậy khi thiết kế một website chất lượng, chuyên nghiệp và thân thiện với người dùng, đừng quên tham khảo công nghệ này nhé.
Xin cảm ơn các Anh/Chị đã tham khảo bài viết thành phần bootstrap của Webaoe. Nếu có chỗ nào còn thiếu sót, xin các Anh/Chị góp ý ở phía dưới để hoàn thiện bài viết hơn.
