Tự học Bootstrap – Cơ bản – bài 01 – Giới thiệu và cài đặt - Lớp học Vi Tính - khóa học vi tính văn phòng

Bootstrap là gì?

Bootstrap là 01 framework front-end miễn phí giúp việc thiết kế và phát triển web nhanh chóng hơn.
Bootstrap bao gồm HTML và CSS dựa trên những mẫu thiết kế dành cho in ấn, biểu mẫu, các nút bấm, các bảng biểu, menu điều hướng, các kiểu định dạng, bộ sưu tập ảnh và nhiều thứ khác, cũng như là các plugin tùy chọn JavaScript.
Bootstrap cũng cho bạn khả năng dễ dàng tạo các thiết kế tương thích nhiều loại thiết bị khác nhau.

Thiết kế web tương thích là gì?

Là việc tạo trang web tự động tùy chỉnh tương thích với nhiều thiết bị khác nhau, từ những chiếc điện thoại nhỏ đến máy tính desktop.

Lịch sử Bootstrap

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton ở công ty Twitter, sau đó chính thức ra mắt như 01 sản phẩm mã nguồn mở vào tháng 08 năm 2011 trên GitHub.

Vào tháng 06 2014 Bootstrap trở thành dự án số 1 trên GitHub!

Tại sao dùng Bootstrap?

Các điểm tiến bộ ở Bootstrap:

Dễ dùng: Bất kỳ ai với kiến thức cơ bản về HTML và CSS đều có thể bắt đầu với Bootstrap
Các tính năng tương thích nhiều thiết bị: Bootstrap's CSS tương thích với điện thoại, máy tính bảng, và desktops
Mục tiêu Mobile-first: Trong Bootstrap 3, các định dạng mobile-first là 01 phần của nhân framework
Tương thích nhiều trình duyệt: Chrome, Firefox, Internet Explorer, Safari, và Opera.

Tải xuống Bootstrap ở đâu?

Có 02 cách để bắt đầu sử dụng Bootstrap trên trang web của bạn.

getbootstrap.com
Chèn Bootstrap từ 01 server CDN (cách xác định server CDN gần nhất?)

Tải xuống Bootstrap

Nếu bạn muốn sử dụng bootstrap trên ổ cứng, vào trang getbootstrap.com, và làm theo hướng dẫn.

Bootstrap CDN

Bạn cũng có thể dùng bootstrap online bằng cách chèn chúng từ 01 CDN (Content Delivery Network).

MaxCDN cung cấp hỗ trợ CDN đối với Bootstrap's CSS và JavaScript. Bạn cũng cần chèn cả jQuery vào trang web:

MaxCDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Ưu điểm của việc dùng Bootstrap CDN:
Rất nhiều người dùng web đã download Bootstrap từ MaxCDN khi họ xem các trang web khác. Như vậy chúng sẽ được lưu trong cache, điều này giúp tiết kiệm thời gian tải xuống các file Bootstrap. Hơn nữa, hầu hết server CDN's sẽ đảm bảo rằng khi có 01 người dùng yêu cầu file, nó sẽ tự động hướng họ đến server gần nhất, điều này giúp tiết kiệm thời gian tải xuống.

Tạo trang web đầu tiên với Bootstrap

1. Thêm 01 tài liệu chuẩn HTML5

Bootstrap dùng các phần tử HTML và thuộc tính CSS có trong chuẩn HTML5.

Do đó bạn phải luôn sử dụng chuẩn HTML5 ngay từ đầu khi tạo trang web, song song với việc định thuộc tính ngôn ngữ và bộ mã chữ thích hợp:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 3 ưu tiên cho di động

Bootstrap 3 được thiết kế tương thích cho các thiết bị di động. Các định dạng Mobile-first là 01 phần của nhân framework.

Để đảm bảo việc hiển thị đúng và thao tác thu phóng trên thiết bị di động thêm thẻ <meta> bên trong thẻ <head>:

Thuộc tính

width=device-width

thiết lập chiều rộng của trang tùy theo chiều rộng màn hình thiết bị (cái này thay đổi theo thiết bị).

Thuộc tính

initial-scale=1

thiết lập mức thu phóng ban đầu khi trang web lần đầu được trình duyệt tải xuống.

3. Containers

Bootstrap cũng yêu cầu 01 đối tượng chứa toàn bộ nội dung của trang web (thường là thẻ div có class=”container”).

Có 02 lớp container trong Bootstrap bạn có thể chọn:

Thẻ có lớp .container cung cấp 01 phần tử chứa với bề rộng tương thích cố định.
Thẻ có lớp .container-fluidcung cấp 01 phần tử chứa bao hết toàn bộ bề rộng màn hình.

Ghi chú: Phần tử bao chứa không có phần tử con (nghĩa là bạn không thể đặt 01 lớp bao chứa trong 01 lớp bao chứa khác).

02 trang Bootstrap cơ bản

Ví dụ sau hiển thị mã cho 01 trang Bootstrap cơ bản (với 01 chiều rộng cố định của thẻ chứa):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Trang Bootstrap có chiều rộng cố định</h1>
  <p>Lớp học vi tính.COM</p> </div>
</body>
</html>

Ví dụ trên cho thấy các dòng mã cơ bản của 01 trang Bootstrap (với chiều rộng toàn màn hình):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>Trang Bootstrap toàn màn hình</h1>
  <p>Lớp học vi tính.COM</p> </div>
</body>
</html>

NTM Solutions

Lớp học Vi Tính

Thứ Năm, 9 tháng 3, 2017