Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại công ty Twitter, và xuất bản như một mã nguồn mở vào tháng 8/2011 trên website GitHub.
Bootstrap là nền tảng bao gồm các thư viện trình bày trang HTML 5, CSS và Javascript giúp cho việc phát triển giao diện web trong nhiều môi trường đa nền tảng một cách nhanh chóng và dễ dàng hơn gọi là Responsive web. Thiết kế Responsive web là tạo ra web site có khả năng tự động điều chỉnh giao diện web trên tất cả các thiết bị, từ PC đến các thiết bị di dộng: phones, tablets.
Bootstrap dễ sử dụng, bất kỳ ai chỉ có kiến thức cơ sở về HTML, CSS có thể bắt đầu sử dụng Bootstrap. Trong Bootstrap 3, kiểu tiếp cận mobile-first cho phép trình bày trang linh động trên các thiết bị di động, là nội dung cơ bản của framework. Bootstrap tương thích với tất cả trình duyệt hiện đại như Chrome, Firefox, Internet Explorer, Safari, và Opera.
Có thể download Bootstrap từ getbootstrap.com, hay sử dụng Bootstrap ngay trên host của nó.
<!--Thư viện CSS-->
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!—Thư viện JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Để đảm bảo trang trình bày thích hợp trên môi trường đa nền tảng, bổ sung thẻ <meta> bên trong thẻ <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Thuộc tính content=”width=device-width, initial-scale=1" thiết lập độ rộng của trang theo độ rộng màn hình thiết bị khác nhau. initial-scale=1 thiết lập độ phóng lớn khi lần đầu hiển thị trang trên trình duyệt.
Bootstrap cũng yêu cầu một phần tử chứa để chứa nội dung website. Có 2 lớp biểu diễn phần tử chứa là lớp container cung cấp một đối tượng chứa có độ rộng cố định đáp ứng với các thiết bị (responsive fixed width container), và lớp container-fluid cung cấp một đối tượng chứa có độ rộng toàn màn hình thiết bị.
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
» Tin mới nhất:
» Các tin khác: