Bootstrap là gì? 7 tính năng cần biết trong Bootstrap

Trong lĩnh vực phát triển phần mềm ngày nay, việc tạo ra những giao diện web đẹp mắt, chuyên nghiệp, tạo sự thuận tiện cho người dùng là điều vô cùng quan trọng. Bootstrap chính là một trong những công cụ hữu ích giúp các lập trình viên làm được điều đó. Vậy thì Bootstrap là gì và vì sao Frontend Developer nên quan tâm đến Bootstrap?

Đọc bài viết này để hiểu rõ hơn về:

• Bootstrap là gì?
• Lịch sử hình thành và phát triển của Bootstrap
• Các tính năng chính của Bootstrap
• Cách cài đặt và ứng dụng Bootstrap vào dự án của bạn

Giới thiệu chung về Bootstrap

Bootstrap là gì?

Bootstrap là một framework front-end phổ biến, giúp xây dựng các trang web responsive và tối ưu hóa cho thiết bị di động. Nó cung cấp sẵn các thành phần CSS, JavaScript và các lớp tiện ích, cho phép tạo giao diện người dùng hiện đại và đồng nhất một cách nhanh chóng:

• Hệ thống lưới responsive linh hoạt, hỗ trợ thiết kế ưu tiên trên thiết bị di động
• Cung cấp đa dạng các thành phần UI như nút bấm, modal và thanh điều hướng
• Tích hợp sẵn các tiện ích giúp tối ưu kiểu chữ, khoảng cách và khả năng hiển thị responsive
• Cho phép tùy chỉnh linh hoạt thông qua các biến Sass và cấu hình của Bootstrap

Lịch sử hình thành và phát triển

Bootstrap được phát triển tại Twitter vào giữa năm 2010 bởi Mark Otto và Jacob Thornton với tên gọi Twitter Blueprint, một công cụ nội bộ để xây dựng giao diện người dùng nhất quán và hiệu quả.

Bootstrap chính thức ra mắt vào ngày 19/8/ 2011. Kể từ đó, framework này đã có hơn 20 bản phát hành, bao gồm hai lần đại tu lớn với phiên bản 2 và 3:

• Bootstrap 2 (2012): Tính năng responsive được bổ sung như một stylesheet tùy chọn, cho phép các trang web thích ứng linh hoạt với nhiều kích thước màn hình khác nhau.
• Bootstrap 3 (2013): Bootstrap được viết lại hoàn toàn để trở thành một framework responsive mặc định, áp dụng triệt để phương pháp tiếp cận “mobile-first”.
• Bootstrap 5 (2021): Loại bỏ jQuery, tập trung vào JavaScript thuần túy, nâng cao hiệu suất và giảm thiểu kích thước tệp. Hệ thống lưới (grid system) được cải tiến, các thành phần (component) được làm mới và khả năng tùy chỉnh (customization) linh hoạt hơn.

Ưu điểm và nhược điểm của Bootstrap là gì?

Ưu điểm Bootstrap

• Dễ học, dễ sử dụng: Cú pháp đơn giản, dễ tiếp cận, phù hợp cho cả người mới bắt đầu lẫn lập trình viên có kinh nghiệm.
• Tiết kiệm thời gian phát triển: Các thành phần có sẵn của Bootstrap (buttons, thanh điều hướng, form,..) giúp tăng tốc quá trình phát triển, cho phép hoàn thành dự án nhanh hơn.
• Thiết kế Responsive: Hỗ trợ hiển thị tốt trên mọi loại thiết bị (PC, tablet, điện thoại) mà không cần chỉnh sửa nhiều.
• Tính nhất quán cao: Các thành phần UI được định dạng sẵn với phong cách đồng nhất, giúp giao diện chuyên nghiệp hơn.
• Linh hoạt và dễ tùy chỉnh: Có thể tùy chỉnh qua biến Sass hoặc chỉnh trực tiếp CSS để phù hợp với nhu cầu thiết kế.
• Tích hợp tốt với JavaScript frameworks: Dễ dàng sử dụng với các framework hiện đại như React, Angular, Vue.js.
• Cộng đồng lớn, tài liệu phong phú: Bootstrap là mã nguồn mở miễn phí, có cộng đồng hỗ trợ cực kỳ lớn và nguồn tài liệu đa dạng.

Nhược điểm Bootstrap

• Giao diện trùng lặp, rập khuôn: Vì các định dạng mặc định của Bootstrap đều đồng nhất, nên nhiều trang web sử dụng Bootstrap mặc định, giao diện có thể thiếu sự khác biệt nếu không tùy chỉnh.
• Kích thước tập tin lớn, chiếm nhiều dung lượng: Bootstrap bao gồm một lượng lớn CSS và JavaScript, trong đó có nhiều phần có thể không cần thiết cho mọi dự án. Điều này dẫn đến việc tải nhiều tài nguyên không cần thiết.
• Phụ thuộc nhiều vào các Class: Bootstrap cung cấp nhiều class được định nghĩa sẵn để hỗ trợ việc phát triển nhanh chóng. Tuy nhiên khi cần thay đổi, người dùng có thể gặp khó khăn vì phải ghi đè nhiều quy tắc có sẵn.

Các tính năng chính trong Bootstrap là gì?

Grid System

Hệ thống lưới (Grid system) của Bootstrap cho phép bạn chia bố cục thành tối đa 12 cột trên một trang. Bạn có thể sử dụng từng cột riêng lẻ hoặc kết hợp chúng để tạo thành các cột lớn hơn. Các cột có thể được chia theo bất kỳ tổ hợp nào miễn là tổng số cột không vượt quá 12.

Cấu trúc của Grid System.

Forms

Bootstrap cung cấp một bộ sưu tập phong phú các mẫu thiết kế sẵn của các thành phần trong một form như input, textarea, checkbox, select,… Chúng được thiết kế sẵn về định dạng hiển thị, responsive, hành vi ràng buộc dữ liệu và có thể dễ dàng tùy chỉnh theo ý muốn.

Buttons

Các nút bấm (buttons) trong Bootstrap giúp tạo ra các nút đồng nhất và responsive một cách nhanh chóng, bằng cách sử dụng các lớp được định nghĩa sẵn. Nút bấm có nhiều trạng thái và kiểu dáng khác nhau.

Tạo nút bấm bằng cách sử dụng thẻ <a> với các CSS class của Bootstrap hoặc sử dụng thẻ <button>.

Navigation

Trong Bootstrap, Navigation (Điều hướng) là một tập hợp các thành phần giúp tạo menu, thanh điều hướng (navbar), tab và breadcrumb một cách dễ dàng. Một số thành phần điều hướng phổ biến trong Bootstrap:

Nav

Thành phần Nav (.nav) được xây dựng bằng flexbox, cung cấp nền tảng vững chắc để tạo mọi loại điều hướng. Nó bao gồm một số điều chỉnh về kiểu dáng (để làm việc với danh sách), khoảng đệm cho liên kết để tăng vùng nhấp chuột, và kiểu dành cho trạng thái disabled.

Navbar

Thanh điều hướng là thành phần nâng cao hơn so với Nav. Nó hỗ trợ việc hiển thị logo/thương hiệu, điều hướng và nhiều tính năng khác, bao gồm cả hỗ trợ collapse plugin.

Breadcrumb

Breadcrumb trong bootstrap được thiết kế sẵn giúp hiển thị vị trí hiện tại của người dùng trong hệ thống phân cấp của trang web một cách trực quan. Giúp người dùng nhận diện vị trí trang web hiện tại và dễ dàng di chuyển giữa các cấp độ trang.

Pagination

Một thành phần giúp tạo hệ thống phân trang trực quan, giúp người dùng dễ dàng điều hướng qua nhiều trang nội dung. Nó sử dụng các liên kết được kết nối trong một danh sách để dễ nhận diện, dễ mở rộng và có vùng nhấp chuột lớn.

Alerts

Bootstrap định nghĩa sẵn một tập hợp các loại thông báo cho từng mục đích cụ thể như thông báo lỗi, thông báo thành công, thông tin, cảnh báo,.. Chúng hỗ trợ nhiều kiểu dáng màu sắc, có thể đóng được (dismissible) và tùy chỉnh nội dung dễ dàng.

Images

Bootstrap cung cấp một số lớp CSS giúp hiển thị và xử lý hình ảnh một cách linh hoạt và thẩm mỹ. Một số tính năng chính gồm:

• Responsive Images: Sử dụng lớp .img-fluid để hình ảnh tự động co giãn theo kích thước của khung chứa, đảm bảo tính phản hồi trên mọi thiết bị.
• Rounded Corners: Dùng lớp .rounded để tạo viền bo tròn cho hình ảnh, tạo cảm giác mềm mại, thân thiện.
• Circular Images: Áp dụng lớp .rounded-circle để hiển thị hình ảnh với dạng hình tròn.
• Image Thumbnails: Sử dụng lớp .img-thumbnail để tạo hiệu ứng khung viền xung quanh hình ảnh, thường được dùng cho các ảnh nhỏ, nhằm tạo điểm nhấn rõ ràng.

JavaScript Plugins

Bootstrap cung cấp các javascript plugins có thể được kích hoạt và cấu hình chỉ bằng HTML (data attributes), giúp sử dụng tính năng JavaScript mà không cần viết mã. Một số plugins phổ biến trong Bootstrap bao gồm:

Plugin	Mô tả
Modal	Hiển thị cửa sổ pop-up modal
Tooltip	Hiển thị chú thích khi di chuột vào phần tử
Popover	Giống Tooltip nhưng hiển thị nội dung lớn hơn.
Carousel	Tạo trình chiếu ảnh (slider)
Collapse	Thu gọn/mở rộng nội dung (accordion, navbar)
Dropdown	Hiển thị menu dropdown khi nhấn vào nút
Toast	Hiển thị thông báo nhỏ trên màn hình
Scrollspy	Theo dõi vị trí cuộn của trang để cập nhật menu

Ngoài ra, những plugins này cũng có thể được tùy chỉnh thông qua các sự kiện (events).

Hướng dẫn cài đặt Bootstrap

Sử dụng CDN

CDN (Content Delivery Network) giúp bạn tích hợp Bootstrap nhanh chóng mà không cần tải về hoặc cài đặt. Chỉ cần thêm các liên kết sau vào phần <head> và trước thẻ đóng </body> của tập tin HTML:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Điều này sẽ giúp chèn Bootstrap CSS và JavaScript từ CDN vào dự án của bạn. Trong trường hợp bạn sử dụng các thành phần Bootstrap có JavaScript, hãy thêm jQuery và Popper.js (đây là hai thư viện cần thiết để Bootstrap hoạt động đầy đủ):

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<!-- Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

Đọc thêm: Bootstrap CDN: Cách tích hợp nhanh Bootstrap vào dự án

Cài đặt Bootstrap trong dự án Node.js

Nếu bạn đang phát triển ứng dụng bằng Node.js, có thể cài đặt Bootstrap thông qua npm với lệnh sau:

npm install bootstrap

Sau khi cài đặt, bạn có thể sử dụng Bootstrap bằng cách import:

require('bootstrap');

Điều này sẽ tải tất cả các plugin jQuery của Bootstrap vào đối tượng jQuery. Tuy nhiên, Bootstrap không xuất module nào theo mặc định. Bạn có thể tải các plugin jQuery riêng lẻ bằng cách import các file .js trong thư mục /js/ của Bootstrap.

Nếu bạn sử dụng Yarn thay vì Npm, có thể cài đặt Bootstrap bằng lệnh:

yarn add bootstrap

Cài đặt Bootstrap trong dự án Ruby

Nếu bạn đang phát triển ứng dụng Ruby on Rails, hãy cài đặt Bootstrap bằng RubyGems thông qua Bundler:

Thêm dòng sau vào Gemfile:

gem 'bootstrap', '~> 4.3.1'

Sau đó chạy:

bundle install

Hoặc nếu bạn không sử dụng Bundler, có thể cài đặt trực tiếp bằng lệnh:

gem install bootstrap -v 4.3.1

Cài đặt Bootstrap trong dự án PHP

Nếu bạn phát triển ứng dụng PHP, có thể cài đặt Bootstrap bằng Composer với lệnh:

composer require twbs/bootstrap:4.3.1

Cài đặt Bootstrap trong dự án .Net

Nếu bạn đang làm việc với .NET Framework hoặc .NET Core, có thể cài đặt Bootstrap thông qua NuGet:

Install-Package bootstrap

Hoặc nếu bạn muốn cài đặt phiên bản Sass:

Install-Package bootstrap.sass

Ví dụ về cách sử dụng Bootstrap

Dưới đây là các ví dụ cơ bản sử dụng Bootstrap để tạo giao diện trang web:

Tạo header bao gồm tên thương hiệu và menu điều hướng (nav)

  <div class="container">
     <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
       <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
         <span class="fs-4">IT Viec</span>
       </a>
        <ul class="nav nav-pills">
         <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
         <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
         <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
         <li class="nav-item"><a href="#" class="nav-link">About</a></li>
       </ul>
     </header>
   </div>

Trong đó:

Header (<header>):

• Dùng d-flex để bố cục linh hoạt
• justify-content-center để căn giữa nội dung
• border-bottom tạo viền ngăn cách
• py-3 mb-4 điều chỉnh khoảng cách

Logo / Tiêu đề (<a>):

• d-flex align-items-center để căn giữa logo theo chiều dọc
• me-md-auto đẩy logo về trái (khi màn hình lớn)
• text-dark text-decoration-none giữ màu và bỏ gạch chân.

Thanh điều hướng (<ul class=”nav nav-pills”>):

• nav + nav-pills tạo menu dạng viên thuốc
• nav-item + nav-link định dạng từng mục menu
• active đánh dấu trang hiện tại

Hình ảnh kết quả:

Tạo form đăng nhập

  <div class="container w-25">
     <form>
       <div class="mb-3">
         <label for="exampleInputEmail1" class="form-label">Email address</label>
         <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
         <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
       </div>
       <div class="mb-3">
         <label for="exampleInputPassword1" class="form-label">Password</label>
         <input type="password" class="form-control" id="exampleInputPassword1">
       </div>
       <button type="submit" class="btn btn-primary">Submit</button>
     </form>
   </div>

Trong đó:

• Sử dụng .form-control để định dạng ô nhập chuyên nghiệp
• Sử dụng btn btn-primary tạo nút nổi bật
• w-25 giới hạn chiều rộng form

Hình ảnh kết quả:

Tạo một thẻ thông tin

      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>

Trong đó:

• card: Tạo một thẻ (card) chứa nội dung có khung viền
• card-body: Chứa nội dung bên trong card
• card-title: Tiêu đề của card
• card-text: Đoạn văn bản mô tả nội dung card
• btn btn-primary: Nút màu xanh để điều hướng hoặc thực hiện hành động

Hình ảnh kết quả:

So sánh Bootstrap với các framework khác

Framework	Ưu điểm	Nhược điểm	Đối tượng phù hợp
Bootstrap	Phổ biến, dễ dùng, nhiều thành phần UI, hỗ trợ JavaScript, cộng đồng lớn	Nặng, khó tùy chỉnh sâu nếu không dùng SCSS	Người mới, dự án nhanh, web responsive
Tailwind CSS	Tùy chỉnh linh hoạt, utility-first, tối ưu performance	Cần nhớ nhiều class, không có UI sẵn	Lập trình viên thích tối ưu code, thiết kế custom
Bulma	Nhẹ, dễ học, hỗ trợ Flexbox, cú pháp đơn giản	Ít thành phần UI hơn Bootstrap, chưa phổ biến bằng	Dự án nhỏ, người mới
Material UI	UI theo chuẩn Google Material, hỗ trợ React, nhiều component đẹp	Phụ thuộc vào React, hơi nặng	Dự án dùng React, UI theo Google Material
Foundation	Responsive mạnh, hỗ trợ email template, grid system nâng cao	Học khó hơn, ít phổ biến	Dự án lớn, cần UI phức tạp

Câu hỏi thường gặp về Bootstrap là gì

Bootstrap có thể tùy chỉnh không?

Bootstrap hoàn toàn có thể tùy chỉnh theo nhu cầu bằng nhiều cách khác nhau như:

Ghi đè CSS mặc định:

Sử dụng các thuộc tính CSS mới để áp dụng cho các class có sẵn của bootstrap.

Ví dụ: thay đổi màu của button primary

.btn-primary {
    background-color: #ff5722 !important; /* Đổi thành cam */
    font-size: 18px; /* Tăng kích thước chữ */
}

Thay đổi biến của bootstrap:

Sử dụng SCSS (SASS) giúp thay đổi biến màu, font, khoảng cách.

Ví dụ: thay đổi màu sắc trong SCSS

$primary: #ff5722; // Đổi màu chính thành cam
$secondary: #00bcd4; // Đổi màu phụ thành xanh
@import "bootstrap";

Tùy chỉnh javascript:

Tùy chỉnh hành vi của modal, tooltip, carousel,… bằng cách truyền options hoặc sử dụng JavaScript API.

Ví dụ: Tắt tính năng đóng modal khi nhấn ESC

$('#myModal').modal({ keyboard: false });

Phiên bản mới nhất của Bootstrap là gì?

Phiên bản mới nhất của Bootstrap là 5.3.3, phát hành ngày 20 tháng 2 năm 2024, mang đến một số cải tiến và sửa lỗi quan trọng như cải tiến chế độ màu, khắc phục lỗi trong công cụ chọn, cải thiện thành phần Accordion,…

Bạn có thể xem danh sách các phiên bản của Bootstrap tại đây: https://getbootstrap.com/docs/versions/ 

Bootstrap có miễn phí không?

Bootstrap hoàn toàn miễn phí và được phát hành theo giấy phép MIT. Bạn có thể sử dụng Bootstrap miễn phí cho cả dự án cá nhân hay thương mại và có thể chỉnh sửa, tùy chỉnh và phân phối lại theo nhu cầu.

Tổng kết Bootstrap là gì

Với hệ thống lưới linh hoạt, các thành phần UI phong phú và thư viện JavaScript tích hợp, Bootstrap đã trở thành một framework front-end mạnh mẽ giúp lập trình viên xây dựng giao diện web nhanh chóng, chuyên nghiệp và tương thích tốt trên mọi thiết bị. Qua bài viết này, ITviec hi vọng có thể giúp bạn hiểu Bootstrap là gì và có một cách nhìn tổng quan về framework nổi tiếng này để từng bước chinh phục nó và nâng cao kỹ năng của bản thân.