Bootstrap Là Gì? Khái Niệm Và Hướng Dẫn Sử Dụng Bootstrap Mới Nhất

Bootstrap là gì? Bootstrap là một framework được dùng cho website để tạo nên một trang web chuẩn responsive. Trên thị trường hiện có rất nhiều framework khác nhau, nhưng Bootstrap là một trong những công cụ được yêu thích và sử dụng nhiều nhất. Nếu vẫn chưa tìm được framework phù hợp, bạn có thể thử tìm hiểu về Bootstrap qua bài viết này của Blog Hải Nguyễn.

Giới thiệu về Bootstrap

Tổng quan về Bootstrap từ khi ra mắt thị trường

Bootstrap là sản phẩm được phát triển bởi Jacob Thornton và Mark Otto tại Twitter và cho ra mắt thị trường vào ngày 19 tháng 8 năm 2011 trên Github. Bootstrap được biết đến như một mã nguồn mở với tên gọi lúc sơ khai là Twitter Blueprint.

Tuy nhiên, cho đến ngày 31 tháng 1 năm 2012 thì phiên bản thứ 2 của Bootstrap mới ra đời và được trang bị thêm nhiều tính năng hơn như bố cục lưới 12 cột, thiết kế tùy chỉnh, …

Nối tiếp phiên bản thứ 2 là phiên bản Bootstrap 3 ngày 19 tháng 8 năm 2013 thêm tính năng tương thích với điện thoại đông minh.

Có lẽ, Bootstrap là một mã nguồn mở phát triển khá nhanh chóng vì chỉ trong vòng 3 năm hoạt động đã chiếm lĩnh được thị trường và trở thành No.1 project trên GitHub. Năm 2014 lại đón chào một phiên bản mới nữa của Bootstrap và cứ như thế Bootstrap phát triển cho đến ngày hôm nay.

Bootstrap là gì?

Bootstrap là một framework chứa các CSS, HTML và JavaScript giúp phát triển website của bạn trở thành trang web chuẩn responsive.

Các lập trình viên thường dùng Bootstrap để thiết kế website, vì nó hỗ trợ quá trình thiết kế được dễ dàng và nhanh chóng hơn. Trong Bootstrap gồm có một số thành tố cơ bản bạn phải biết trong quá trình sử dụng như: tables, grids, navigation, typography, forms, buttons, image carousels… Framework còn được đánh giá khá thân thiện với một số thiết bị cầm tay như mobile, ipad, tablet.

Bootstrap là công cụ giúp người dùng tạo ra những trang web hoàn hảo và cũng là bộ sưu tập miễn phí của những nguồn mã nguồn mở. Một số thuộc tính như kích thước, độ cao, màu sắc có thể được sáng tạo theo cách riêng.

Hiện Bootstrap đang cung cấp 3 file chính để quản lý chức năng của trang web:

Bootstrap.CSS
Bootstrap.JS
Glyphicons

Tìm hiểu về 3 file của Bootstrap

Bootstrap.CSS

Bootstrap.CSS thực chất là một framework CSS giúp người dùng quản lý và sắp xếp bố cục website một cách hiệu quả. Trong đó, HTML nhận nhiệm vụ quản lý nội dung và cấu trúc và CSS quản lý bố cục. Do đó, hai cấu trúc này phải đi cùng nhau thì mới quản lý website hiệu quả được.

Nhờ có Bootstrap.CSS, người dùng không còn phải chỉnh sửa theo cách thủ công cho những thay đổi nhỏ. Bạn có thể dùng hàm CSS ở kiểu văn bản, bảng hoặc hình. Một điểm hay mất thời gian khi dùng CSS là phải để nó ghi nhớ những khai báo và bộ chọn.

Bootstrap.JS

Bootstrap.JS cũng là một file vô cùng quan trọng vì nó chứa File JavaScript và chịu trách nhiệm trực tiếp cho những tương tác trên trang web. Để tiết kiệm thời gian viết cú pháp JavaScript, bạn có thể sử dụng jQuery – thư viện JavaScript mã nguồn mở hỗ trợ bạn thêm nhiều chức năng cho website.

Mặc dù, Bootstrap có những thuộc tính như CSS và Element HTML nhưng vẫn cần có jQuery để có thể thiết kế Responsive. Bởi vì, nếu bạn thiếu chức năng này bạn chỉ có thể sử dụng được phần tĩnh của CSS.

Glyphicons

Đối với giao diện của website thì không thể nào thiếu được Icons. Icons sẽ được liên kết với những hành động và dữ liệu nhất định của giao diện người dùng. Bootstrap hoàn toàn có thể đáp ứng được nhu cầu trên khi sử dụng Glyphicons. Bạn có thể dùng Halflings Glyphicons miễn phí với những Icon cơ bản, nếu muốn những Icon phong cách hơn thì phải bỏ tiền mua.

Hướng dẫn cách cài đặt Bootstrap

Bên canh việc hiểu Bootstrap là gì bạn cần phải bổ sung kiến thức để cài và dùng Bootstrap. Bạn có thể tải Bootstrap theo 2 cách sau đây:

Cách 1: Vào trang chủ https://getbootstrap.com/ để tải về Bootstrap với 2 thư mục là CSS và JS. Sau đó tiến hành giải nén và cài Bootstrap vào web hosting bằng giao thức FTP.

Cách 2: Cài Bootstrap từ CDN


<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Optional theme -->

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Hướng dẫn dùng Bootstrap

Bạn có thể xem ví dụ sau để biết cách dùng Bootstrap:


html lang="en">

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>Bootstrap 101 Template</title>

<link href="css/bootstrap.min.css" rel="stylesheet" />

</head>

<body>

<h1>Hello, world!</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jque

<script src="js/bootstrap.min.js></script>

</body>

</html>

Trong đó:


meta charset="utf-8"

Đây là lệnh giúp mã hóa ký tự cho tài liệu HTML với UTF-8 là Unicode.


meta http-equiv="X-UA-Compatible"

Đây là lệnh biểu thị cho bộ ký tự dùng để viết trang web.


meta name="viewport"

Đây là lệnh xác định phiên bản Internet Explorer, được sử dụng chế độ cao nhất.


link href="css/bootstrap.min.css" rel="stylesheet"

Đây là lệnh xác định trang có kích thước đúng với kích thước khung hình.


src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery

Đây là lệnh để thêm Bootstrap core CSS.


src="js/bootstrap.min.js

Lệnh tải jQuery từ Google CDN.

Kết luận

Như vậy, bạn đã hiểu được về khái niệm Bootstrap là gì và cách để dùng framework miễn phí. Bootstrap không những giúp bạn tiết kiệm được thời gian, mà còn giúp bạn thiết kế trang web dễ dàng hơn. Bootstrap đã và đang phát triển rất vững mạnh trên thị trường, vì thế bạn không thể bỏ qua framework nếu muốn làm trang web đẹp.