Kết nối

[Bootstrap] Phần 1: Giới thiệu Bootstrap

23.068 lượt xem 
 Cập nhật lần cuối: 10/01/2017 lúc 17:54:09
Thể loại: Bootstrap, Thiết kế Web 

Bootstrap là 1 framework JavaScript, CSS và HTML miễn phí và phổ biến nhất trong việc thiết kế giao diện web đáp ứng trên di động.

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter, và được xuất bản thành sản phẩm mã nguồn mở vào tháng 08 năm 2011 trên GitHub. Vào tháng 06 năm 2014, Bootstrap là dự án số 1 ở GitHub.

1. Các gói Bootstrap

Bạn có thể tại Bootstrap về máy ở địa chỉ: http://getbootstrap.com/getting-started/#download. Theo đó, Bootstrap được chia thành 3 gói chính:

a. Bootstrap: gói này chứa CSS, JavaScript và font được biên dịch và rút gọn. Không có tài liệu hướng dẫn hay các tập tin mã nguồn trong gói này. Cấu trúc thư mục của gói này như sau:

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

b. Source code: gói này chứa CSS, JavaScript và font cùng với các tài liệu hướng dẫn.

c. Sass: gói này chứa Rails, Compass hoặc các dự án Sass.

2. Ưu điểm của Bootstrap

  • Dễ sử dụng: Bất kỳ ai có kiến thức căn bản về HTML và CSS cũng đều có thể bắt đầu dùng Bootstrap
  • Các tính năng đáp ứng: Bootstrap chứa các CSS cho phép thiết kế giao diện đáp ứng có thể hiện thị trên nhiều kích thước màn hình khác nhau như ở tablet, phone hay desktop.
  • Tiếp cận ưu tiên thiết bị di động: Ở Bootstrap phiên bản 3, các phong cách sử dụng cho di động là 1 phần chính của framework.
  • Tương thích với các trình duyệt khác nhau: Bootstrap cho phép tương thích với tất cả trình duyệt hiện nay như Chrome, Firefox, Internet Explorer, Safari hay Opera.

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

Trong phần này, chúng ta sẽ tìm hiểu cách tạo 1 trang đơn giản sử dụng framework Bootstrap. Như các bạn đã biết 1 trang HTML5 có cấu trúc như trang Index.html sau:

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

Tuy nhiên nếu bạn dùng Bootstrap, đầu tiên bạn phải tải gói Bootstrap như phần trên, sau đó nhúng 3 tập tin bootstrap.min.css,  jquery.min.js và bootstrap.min.js trong gói Bootstrap vào trang Index.html.

Chú ý tập tin jquery bạn phải download từ https://jquery.com/download/ với phiên bản mới nhất khi viết bài này là jquery-3.1.1.min.js và đặt trong thư mục js của Bootstrap.

<!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="css/bootstrap.min.css">
  <script src="js/jquery-3.1.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>
//Nội dung trang Web
</body>
</html>

Bước tiếp theo bạn sẽ học cách tạo nội dung Bootstrap nằm trong phần tử <body>. Vì Bootstrap là framework được thiết kế nhắm đến đối tượng là màn hình di động (mobile) vì vậy để đảm bảo giao diện web được hiển thị chính xác, chúng ta phải dùng thẻ meta với nội dung:

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

Trong đó:

  • width=device-width: thiết lập độ rộng của màn hình, độ rộng này sẽ co giãn phụ thuộc vào kích thước màn hình mà trang web được duyệt.
  • initial-scale=1: chỉnh độ zoom (phóng to, thu nhỏ) khi trang web được tải lên lần đầu. Nếu độ zoom là 1 có nghĩa là trang hiển thị đúng kích thước mặc định của nó (100%).
Liên quan:  [HTML/HTML5] Phần 26: Các phần tử mã máy tính

Bootstrap cũng cần một phần tử để chứa các nội dung trang. Có 2 lớp chứa (container) có thể áp dụng đó là:

  • Lớp .container cung cấp 1 vùng chứa với kích thước cố định đáp ứng
  • Lớp .container-fluid cung cấp một vùng chứa với kích thước đầy đủ, trải rộng toàn bộ độ rộng của màn hình.

Lưu ý: Các vùng chứa không thể nằm trong 1 vùng chứa khác.

Ví dụ 1: Vùng chứa .container

<!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="css/bootstrap.min.css">
  <script src="js/jquery-3.1.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Trang Bootstrap nằm trong vùng chứa .container, thẻ h1</h1>
  <p>Văn bản, thẻ p</p> 
</div>

</body>
</html>

Ví dụ 2: Vùng chứa .container-fluid

<!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="css/bootstrap.min.css">
  <script src="js/jquery-3.1.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Trang Bootstrap nằm trong vùng chứa .container-fluid, thẻ h1</h1>
  <p>Văn bản thẻ p</p> 
</div>

</body>
</html>

Giao diện hiển thị của hai lớp .container.container-fluid hiển thị ở trình duyệt Chrome với kích thước màn hình 1380×768 và có độ zoom là 150% như sau:

containercontainer-fluid

Chúng ta thấy rằng lớp .container chứa 1 khoảng trắng 2 bên, còn lớp .container-fluid thì tràn toàn màn hình. Như vậy, tùy theo kiểu thiết kế trang web, chúng ta có thể chọn 1 trong 2 cách này.

Bài này giúp các bạn đã học được các khái niệm cơ bản về Bootstrap, cách tải Bootstrap và áp dụng xây dựng các ví dụ cơ bản.

Trích dẫn bài viết
  • APA:
    Dammio. (2016). [Bootstrap] Phần 1: Giới thiệu Bootstrap. https://www.dammio.com/2016/10/05/bootstrap-bootstrap-co-ban-phan-1.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[Bootstrap] Phần 1: Giới thiệu Bootstrap},
    year = {2016},
    url = {https://www.dammio.com/2016/10/05/bootstrap-bootstrap-co-ban-phan-1},
    urldate = {2024-10-09}
    }
Theo dõi
Thông báo của
guest
1 Bình luận
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
1
0
Rất thích suy nghĩ của bạn, hãy bình luận.x