Bootstrap là gì?

Bootstrap là một framework HTML, CSS, và JavaScript phổ biến nhất để phát triển website chuẩn responsive.

Bootstrap giúp cho quá trình thiết kế website của bạn diễn ra nhanh chóng dựa trên những thành tố cơ bản sẵn có như typography, forms, buttons, tables, grids, navigation, image carousels,…

Nói một cách đơn giản, Bootstrap là một bộ sưu tập các đoạn code lớn có thể tái sử dụng, được viết bằng HTML, CSS và JavaScript. Bên cạnh đó, đây cũng là framework develop front-end cho phép các developer và designer có thể nhanh chóng xây dựng các trang web responsive.

Về cơ bản, framework Bootstrap giúp tiết kiệm thời gian viết CSS, từ đó ta sẽ có nhiều thời gian cho việc thiết kế các trang web hơn. Và hơn hết, nó “HOÀN TOÀN MIỄN PHÍ“.

Lịch sử của Bootstrap

Bootstrap là sản phẩm của Mark Otto và Jacob Thornton tại Twitter. Tên gọi ban đầu của Bootstrap là Twitter Blueprint. Mục đích lúc đầu của nó như một mã nguồn mở vào ngày 19/09/2011 trên GitHub dùng để cải thiện tính nhất quán giữa các công cụ nội bộ.

Vào ngày 31 tháng 1 năm 2012, Bootstrap phiên bản 2 chính thức được phát hành. Phiên bản mới này đã được hỗ trợ từ Glyphicons cũng như thay đổi một số thành phần có sẵn. Đồng thời, phiên bản này cũng hỗ trợ responsive web design (RWD).

Ngày 19/08/2013 đánh dấu sự ra đời của phiên bản tiếp theo – Bootstrap phiên bản 3. Phiên bản này đã tái thiết kế lại các thành phần để sử dụng flat design, đồng thời tương thích với các thiết bị di động hơn. Bên cạnh đó, Bootstrap 3 cũng có một hệ thống plugin hoàn toàn mới với các namespaced event.

Phải đến tận tháng 1 năm 2018, người dùng mới được sử dụng phiên bản mới của Bootstrap – Bootstrap 4. Và gần đây nhất chính là Bootstrap 5 vào 5/5/2021.

3 file chính của Bootstrap

Để quản lý giao diện người dùng và các chức năng của website với 3 file chính dưới đây:

• Bootstrap.CSS
• Bootstrap.JS
• Glyphicons

Bootstrap.css

Bootstrap.css là một framework CSS giúp bạn quản lý và sắp xếp bố cục của website. Nhiệm vụ của HTML giúp bạn quản lý cấu trúc, còn CSS xử lý bố cục website. Khi có 2 thành phần này, bạn sẽ tiết kiệm được thời gian chỉnh sửa thủ công mà có thể sử dụng CSS để tạo giao diện thống nhất và đồng bộ trên website nhanh hơn.

Bootstrap.js

Bootstrap.js được xem là phần quan trọng nhất bởi vì có chứa File JavaScript. Các nhà phát triển thường sử dụng JQuery để tiết kiệm thời gian viết JavaScript.

Một số chức năng cơ bản của JQuery:

• Dễ dàng tạo Ajax.
• Xử lý sự kiện jQuery.
• Tạo tiện ích bằng bộ sưu tập Plugin JavaScript.
• JQuery giúp thêm và tạo một số tính năng động cho nội dung trang web.

Glyphicons

Đối với giao diện một website thì không thể thiếu các bộ icon. Vì thế, trong Bootstrap đã tích hợp thêm Glyphicons miễn phí. Với bản miễn phí cũng đủ để bạn đồng bộ các icon trên website. Glyphicons sẽ giúp cho website trở nên sống động và đẹp hơn.

Tính năng của Bootstrap

Bootstrap được thiết kế theo dạng module tích hợp dễ dàng với các mã nguồn mở như Joomla, WordPress, Magento,.. Bootstrap mang lại nhiều tính năng hấp dẫn như:

• Cho phép bạn tùy chỉnh framework của website trước khi tải xuống.
• Được tích hợp Glyphicons giảm thiểu việc sử dụng các hình ảnh biểu tượng và tăng tốc độ tải trang.
• Bootstrap cho phép truy cập vào thư viện dùng để tạo giao diện website như: font, typography, table, grid,…
• Bootstrap được tích hợp với JQuery.

Tại sao nên sử dụng Bootstrap?

Sau khi tìm hiểu về Bootstrap cơ bản, hãy cùng điểm qua một số lợi ích của nó để biết được lý do sử dụng Bootstrap là gì.

Tiết kiệm thời gian

Bootstrap cực kỳ hữu ích khi các developer phải “chạy deadline” khi xây dựng các trang web, ứng dụng web hay ứng dụng mobile. Sở dĩ vì framework Bootstrap có rất nhiều block được xây dựng sẵn, giúp dễ dàng hoàn thành các công việc.

Dễ sử dụng

Bất kể là chuyên gia hay là người mới bắt đầu, ai cũng có thể sử dụng Bootstrap nhanh chóng mà không gặp bất kỳ rắc rối nào. Bạn không cần là chuyên gia về công nghệ web (HTML, CSS, JavaScript), bạn cũng có thể biết được cách sử dụng Bootstrap cơ bản.

Tùy chỉnh dễ dàng

Người dùng có thể dễ dàng chỉnh sửa các file CSS Bootstrap nếu cảm thấy không hài lòng. Bên cạnh đó, ta cũng có thể kết hợp chúng với những design đã có sẵn, hay là bổ sung các chức năng cho nhau.

Trang tùy chỉnh của Bootstrap còn cho phép người dùng tạo những theme của riêng mình, hay tùy chỉnh template bằng cách thay đổi giá trị của các biến số.

Responsive web design

Tạo một trang mới với Bootstrap sẽ bắt đầu bằng việc tạo các grid layout cho trang. Hệ thống grid responsive trong Bootstrap chắc chắn được coi là ưu tiên hàng đầu, vì hiện đang ngày càng có nhiều người sử dụng điện thoại di động hơn.

Framework này được xây dựng theo hướng “Mobile-First”, tức là ưu tiên người dùng mobile. Hệ thống grid của nó có thể được chia thành 12 cột bằng nhau, chứa các phần tử dựa theo kích thước của màn hình. Bên cạnh đó, các lớp trong grid system còn giúp ẩn hoặc hiển thị những phần tử nhất định trên một số thiết bị cụ thể.

Tương thích với trình duyệt

Bootstrap đảm bảo khả năng tương thích của framework với mọi phiên bản và nền tảng của các trình duyệt phổ biến hiện nay. Các developer của Bootstrap cũng khẳng định rằng họ không hỗ trợ proxy browser cũng như những trình duyệt cũ nữa.

Nguồn mở

Một đặc điểm nổi bật khác nữa của framework Bootstrap chính là mã nguồn mở. Người dùng có thể tự do sửa đổi framework này theo nhu cầu cụ thể của các project. Bootstrap cũng khuyến khích các developer đóng góp vào mã nguồn để framework có thể phát triển ổn định hơn.

Cấu trúc và tính năng của Bootstrap

Bootstrap chứa các tập tin JavaScript, CSS và fonts được biên dịch và nén lại. Ngoài ra, Bootstrap được thiết kế dưới dạng các module. Vì vậy, Bootstrap có thể tích hợp với rất nhiều nền tảng các mã nguồn mở như WordPress, Joomla, Magento,…

Bootstrap mang đến nhiều chức năng nổi bật:

• Cho phép bạn truy cập vào thư viện “khổng lồ” các thành tố dùng để tạo nên giao diện của một website hoàn chỉnh như font, typography, form, table, grid,…
• Cho phép bạn tùy chỉnh framework của website trước khi tải xuống.
• Tái sử dụng các thành phần lặp đi lặp lại trên trang web.
• Bootstrap được tích hợp jQuery. Bạn chỉ cần khai báo chính xác các tính năng trong quá trình lập trình web của bạn.
• Định nghĩa glyphicons giúp giảm thiểu việc sử dụng hình ảnh làm biểu tượng và tăng tốc độ tải trang.

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

Để hiểu hơn về Bootstrap là gì, bạn phải cài đặt Bootstrap để thử nghiệm tốt hơn. Tiếp đến, hãy cùng tìm hiểu các cách download Bootstrap đơn giản, nhanh chóng nhất.

Tải Bootstrap trực tiếp

Bước 1: Click vào đường link để tải Bootstrap về. Nó sẽ được tải dưới dạng một folder Zip, chứa các folder CSS và JS.

Bước 2: Bootstrap có thể được compile bằng asset pipeline của riêng nó nhờ các file javascript, sass và documentation.

Bước 3: Bootstrap có thể được cài đặt trong các file hay ứng dụng được cung cấp bởi Node.js.

npm install bootstrap 

Bước 4: Đối với các ứng dụng Node.js, Bootstrap cũng có thể được cài đặt bằng yarn package.

yarn add bootstrap 

Bước 5: Nếu người dùng muốn cài đặt Bootstrap cho các ứng dụng ruby gems.

# Dùng bundler gem ‘bootstrap’, ‘~> 4.0.0’ # Không dùng bundler $ gem install bootstrap –v 4.0.0 

Bước 6: Ta có thể dùng composer để cài đặt và quản lý Bootstrap sass, javascript

composer require twbs/bootstrap:4.0.0 

Bước 7: Dùng NuGet để cài đặt và quản lý Bootstrap CSS, sass và javascript cho các ứng dụng .Net.

Install-Package bootstrap Install-Package bootstrap.sass 

Bước 8: JQuery cũng được dùng với các file bootstrap hoặc folder cài đặt. JQuery cần được download và đặt file vào trong Bootstrap root folder.

Bước 9: Sau khi hoàn thành các bước trên, developer có thể viết code HTML để liên kết tất cả các file cho trang HTML.

Ví dụ:

         
Learning Bootstrap
     

Thêm Bootstrap qua CDN

Bạn còn có thể nhúng Bootstrap thông qua CDN (Content Delivery Network). Cách này được các developer sử dụng để nhúng Bootstrap để tiết kiệm băng thông và tích hợp JavaScript, CSS, thư viện JQuery mang lại nhiều tính năng và trải nghiệm người dùng tốt hơn.

Bootstrap 4 có gì mới?

Flexbox mặc định

Bootstrap đã cung cấp một giải pháp thay thế float-based bằng flexbox. Với sự hỗ trợ rộng rãi từ các trình duyệt, flexbox mang lại sự linh hoạt cao hơn, cho phép các cột tự động thay đổi kích thước phù hợp.

Tập trung hỗ trợ trình duyệt hiện đại

Bootstrap v4 đã chính thức ngừng hỗ trợ Internet Explorer 8, 9 và iOS 6. Từ phiên bản này, Bootstrap chỉ hỗ trợ IE10+ và iOS 7+ trở lên.

Từ Less đến Sass

Bootstrap chính thức ưu tiên các project Sass. Trong folder “Sass“, variables.scss chứa các biến và cài đặt cần thiết, còn bootstrap.scss chứa các directive @import cho phép tùy chỉnh thành phần.

Tier bổ sung

Bootstrap thêm 5 thiết lập mặc định cho grid breakpoints:

$grid-breakpoints: ( xs: 0px, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default; 

Reboot

“Reboot” là file reset mới dựa trên Normalize, sử dụng các element selector và bổ sung thêm các class-based reset cho các thành phần như .table, .table-bordered…

Hướng dẫn sử dụng Bootstrap 4 cơ bản

Bổ sung thẻ HTML5

Cần đảm bảo có thẻ doctype HTML5 ở đầu trang:

Mobile-first

Bootstrap 4 hỗ trợ thiết kế mobile-first. Đừng quên thêm thẻ meta:

Ví dụ sử dụng container (Responsive fixed width)

            
 
My First Bootstrap Page
 
This is some text.
 
   

Ví dụ sử dụng container-fluid (Full width)

            
 
My First Bootstrap Page
 
This is some text.
 
   

Bootstrap 5 – Phiên bản mới nhất

Thành phần Offcanvas mới

Bootstrap 5 bổ sung thành phần offcanvas với các tính năng như backdrop, nội dung scroll và vị trí định cấu hình.

 
 
Offcanvas
  
 
 Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here. 
 
 

Update form

Bootstrap 5 hợp nhất tất cả các loại form (checkbox, radio, switches, files,…) và cho phép tuỳ chỉnh dễ dàng hơn.

Tiện ích API mới

Bootstrap 5 triển khai tiện ích API mới cho phép mở rộng và tuỳ chỉnh các class nhanh chóng, bao gồm hỗ trợ state như :hover.

$utilities: map-merge( ( "margin": ( responsive: true, property: margin, class: m, values: map-merge($spacers, (auto: auto)) ), "opacity": ( property: o, class: opacity, state: hover, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) ), $utilities ); 

Các tiện ích mới

Bootstrap 5 bổ sung:

• Tiện ích top, right, bottom, left với các giá trị 0, 50%, 100%.
• Tuỳ chọn .d-grid và gap cho grid-layout.
• .fs cho font-size, .fw thay cho font-weight.
• .overflow-visible và .overflow-scroll.

Hướng dẫn nhúng Bootstrap vào HTML

Nhúng từ liên kết

Bạn có thể nhúng Bootstrap trực tiếp vào website thông qua CDN như sau:

         
Chào mừng đến với website
   

Nhúng Bootstrap bằng cách tự host

Cách này tối ưu tốc độ tải trang hơn:

          
Welcome to Website
   

Lời kết

Như vậy, chúng ta đã cùng nhau khám phá những kiến thức cơ bản về Bootstrap – một framework front-end mạnh mẽ giúp bạn xây dựng giao diện web nhanh chóng và responsive.

Với những gì đã học, bạn hoàn toàn có thể tự tin bắt tay vào thực hành và tạo ra những trang web ấn tượng.

Chúc bạn thành công trên con đường phát triển web với Bootstrap!