Bootstrap 4 - Giới Thiệu

by GokiSoft.Com - 19:30 12/10/2020 5,765 Lượt Xem

Bootstrap là gì?

Bootstrap là một framework front-end miễn phí để thiết kế web được nhanh hơn và dễ dàng hơn.
Bootstrap bao gồm các mẫu thiết kế có sẵn dựa trên HTML và CSS cho fonts, forms, buttons, tables, navigation, modals, image carousels và nhiều thứ khác nữa.
Bootstrap giúp bạn dễ dàng tạo thiết kế có responsive.

Thế nào là Responsive Web Design?

Responsive web design là việc tạo các trang web có thể tự động điều chỉnh để phù hợp trên các thiết bị, từ điện thoại nhỏ đến máy tính lớn.

Ví dụ Bootstrap 4

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>

Bootstrap 3 vs. Bootstrap 4

Bootstrap 4 là phiên bản mới hơn; với nhiều thành phần và phản ứng nhanh hơn.

Bootstrap 4 hỗ trợ sự mới nhất, ổn định nhất cho tất cả các trình duyệt và nền tảng. Tuy nhiên, Internet Explorer 9 trở xuống không được hỗ trợ.

Nếu bạn cần hỗ trợ IE8-9, hãy sử dụng Bootstrap 3. Đây là phiên bản Bootstrap ổn định nhất và vẫn được hỗ trợ. Tuy nhiên, Bootstrap 3 không có các tính năng mới như Bootstrap 4.

Bootstrap 4 không hỗ trợ Glyphicons như Bootstrap 3. Ta cần sử dụng Font-Awesome hoặc các thư viện icon khác thay thế.

Vì sao chúng ta dùng Bootstrap?

Ưu điểm của Bootstrap:

Dễ sử dụng: Bất cứ ai có nền tảng cơ bản về HTML CSS đều dùng được Bootstrap.
Tính năng responsive: Bootstrap responsive điều chỉnh cho phù hợp các thiết bị như phones, tablets, và desktops.
Tương thích hầu hết trình duyệt web: Chrome, Firefox, Internet Explorer 10+, Edge, Safari, Opera.

Cách nhúng Bootstrap 4?

Có 2 cách nhúng Bootstrap 4 vào website của bạn:

Nhúng link CDN
Download Bootstrap 4 từ getbootstrap.com

Bootstrap 4 CDN

Nếu không muốn download bất cứ thứ gì về, bạn có thể dùng link CDN (Content Delivery Network).

MaxCDN cung cấp CDN hỗ trợ cho Bootstrap's CSS và JavaScript. Bạn cần nhúng cả thư viện jQuery:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Download Bootstrap 4

Nếu bạn muốn download để sử dụng Bootstrap 4, có thể vào https://getbootstrap.com/ để download.

Tạo trang web đầu tiên cùng Bootstrap 4

1. Tạo HTML5 doctype

Bootstrap 4 sử dụng các yếu tố HTML và các thuộc tính CSS yêu cầu HTML5 doctype.

Luôn nhúng HTML5 doctype đầu tiên vào trang, cùng lang attribute và các thẻ meta character set:

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

2. Bootstrap 4 mobile-first

Bootstrap 4 được thiết kế responsive cho thiết bị di động. Nó được gọi là mobile-first styles - phần cốt lõi của framework.

Để đảm bảo responsive được trước hết cần add thẻ <meta> bên trong thẻ <head>:

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

3. Containers

Hai class container để bao bọc nội dung trang web có thể chọn:

Class .container cung cấp một container chiều rộng cố định, luôn cách 2 bên màn hình một đoạn nhỏ cố định.
Class .container-fluid cung cấp một container chiều rộng đầy đủ, trải rộng toàn bộ chiều rộng của màn hình.

.container

.container-fluid

Hai trang Bootstrap 4 cơ bản

Ví dụ sau đây hiển thị code cho trang Bootstrap 4 cơ bản (với container chiều rộng cố định):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

Ví dụ sau đây hiển thị code cho trang Bootstrap 4 cơ bản (với container chiều rộng đầy đủ container-fluid):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/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>

Ứng Dụng Học