Bootstrap là gì? Bắt đầu tìm hiểu công cụ xây dựng trang Web

Bootstrap là gì? Bắt đầu tìm hiểu công cụ xây dựng trang Web

Bộ công cụ thư viện xây dựng trang web được sử dụng nhiều nhất hiện nay, vậy Bootstrap là gì? hãy cùng sonnguyenaz.com tìm hiểu trong bài viết này nhé.

Bootstrap là gì?

Bootstrap là một Framework trong đó bao gồm các thư viện lập trình như HTML, CSS, Javascript.

Với Bootstrap bạn có thể xây dựng một giao diện trang web nhanh chóng, đẹp mắt với các hiệu ứng, đặc biết là phù hợp với các thiết bị di động chuẩn responsive.

Ví dụ như bạn có thể tùy biến các hiệu ứng cho Layout, Button, Modal, Forms, Card… bằng các thư viện có sẵn chỉ việc gọi và sử dụng

Hiện tại đã được cập nhật lên phiên bản Bootstrap 5.3.0 với các hiệu ứng màu tuyệt vời, nếu có thời gian bạn hãy cùng tìm hiểu về Framework này nhé, sẽ không khiến bạn phải thất vọng đâu.

Cấu trúc hình thành Bootstrap

Một Framework Bootstrap được hình thành bởi 3 thành phần chính là: CSS, JS, Icon.

Thành phần thứ nhất Bootstrap.css

Như các bạn đã biết thì 1 website không thể thiếu CSS được, nó dùng để tạo ra style riêng cho site như màu sắc, font chữ, độ cao rộng…

Việc tạo ra một định dạng CSS riêng thì Bootstrap mang lại hiệu quả vô cùng đáng gờm. Thực sự thì bạn phải dùng thì mới cảm nhận được.

CSS được tối ưu hóa qua từng phiên bản và đáp ứng với nhu cầu sử dụng toàn cầu trên thời gian thực, ngoài ra bạn cũng có thể tùy chỉnh nó thông qua các biến.

Thành phần thứ 2 Bootstrap.js

Javascript là thành phần cốt lõi của Bootstrap bởi tất cả các hiệu ứng, sự kiện… đều được quy định tại đây.

Bạn biết đấy, Bootstrap không hề sử dụng jQuery. Ví dụ như các hiệu ứng, các khung vẽ, hoặc cửa sổ bật lên tất cả đều không sử dụng jQuery mà hoàn toàn ưu tiên HTML.

Điều đó giúp cho tốc độ biên dịch và xử lý trang web được nhanh chóng hơn bao giờ hết.

Các thành phần chính của các Plugin Javascript:

  • Alert: Hiển thị thông báo đẹp mắt.
  • Button: Nút bấm với màu sắc và đường viền, kích thước tùy chỉnh.
  • Carousel: Chức năng trình chiếu.
  • Collapse: Mở rộng hoặc thu hẹp nội dung
  • Dropdown: Đặc biệt với thiết kế menu đa tầng.
  • Modal: Hộp thoại linh hoạt.
  • Offcanvas: Xây dựng và chuyển các thanh bên ẩn vào bất kỳ trang nào.
  • Popover: Tạo cửa sổ bật lên với kích thước và hiệu ứng tùy chỉnh
  • Scrollspy: Cuộn trang tùy chỉnh.
  • Tab: Chuyển đổi nội dung qua các tab.
  • Toast: Ẩn hiện thông báo.
  • Tooltip: Chú giải.

Thành phần thứ 3 Glyphicons

Hiện tại với hơn 1.800 glyphs thì bạn phải biết là Bootstrap đầu tư như thế nào, là một thư viện icon SVG nguồn mở.

Và có thể được cập nhật nhiều icon hơn nữa qua các lần update hoặc nâng cấp phiên bản mới.

Cho dù bạn không sử dụng Bootstrap thì thư viện Icon này vẫn có thể dùng được cho các dự án khác của bạn.

Các biểu tượng Icon này bạn có thể tùy chỉnh một cách dễ dàng như kích thước, màu sắc…

Cách sử dụng thư viện Bootstrap

Hiện tại phiên bản Bootstrap 5.3 là mới nhất năm 2023 nên mình sẽ sử dụng nó cho quá trình tìm hiểu nhé.

Đầu tiên bạn tạo một file html ví dụ mình sẽ tạo luôn file index.html ở trong một thư mục nào đó trên máy tính của bạn.

Cấu trúc của 1 file html như sau:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Bây giờ chúng ta sẽ thêm các thư viện CSS và JS vào:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

Như các bạn thấy thì chúng ta thêm một file CSS: bootstrap.min.css và một file JS: bootstrap.bundle.min.js

Ví dụ ta muốn tạo một bảng table bằng HTML bạn chỉ cần gọi các class theo ý muốn và kết quả được tạo ra ngoài mong đợi:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Table demo Bootstrap</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
	</head>
<body>
	<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Loại quả</th>
      <th scope="col">Số lượng</th>
      <th scope="col">Tình trạng</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Cam</td>
      <td>150kg</td>
      <td>Còn hàng</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Xoài</td>
      <td>300kg</td>
      <td>Còn hàng</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Quýt</td>
      <td>250kg</td>
      <td>Còn hàng</td>
    </tr>
  </tbody>
	</table>
</body>
</html>

Kết quả thu được là:

tao-bang-table-bang-bootstrap

Bạn thử thay các class sau vào xem thế nào nhé:

<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

Kết quả ngoài mong đợi phải không nào.

Hoặc chúng ta thử tạo các Button:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

View lên xem thế nào nhé:

tao-button-bang-bootstrap

Tất cả các mẫu đều có sẵn bạn chỉ việc thêm vào dự án của mình và tùy chỉnh cho đẹp mắt.

Lời kết

Nói thì dễ nhưng để làm được một giao diện web đẹp bạn cần phải kết hợp nhiều yếu tố như đáp ứng được riêng cho mỗi nghành nghề, không bị nhàm chán hoặc cũng không màu mè khó nhìn.

Trên đây mình đã giới thiệu sơ sơ cho các bạn về Framework Bootstrap là gì rồi, ở các phần tiếp theo mình sẽ đi sâu vào các thành phần chính của nó nhé.

Cảm ơn các bạn đã theo dõi bài viết, nếu muốn học lập trình PHP thì bạn truy cập tại đây nha.

Rate this post

sonnguyen

Là một nhân viên IT thích chia sẻ những gì mình biết đến tất cả mọi người. Hi vọng được mọi người ủng hộ, nếu có gì sai sót mong các bạn comment xuống dưới để mình khắc phục. Cảm ơn mọi người!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *