Bootstrap là gì? Tổng hợp A-Z về học Bootstrap chỉ trong một bài viết

Bootstrap là gì? Trước khi tìm hiểu cụ thể hơn, hãy hình dung về xu hướng sử dụng thiết bị để lướt web hiện nay, thay vì giới hạn bằng máy tính như trước, bạn cũng dễ nhận thấy được người dùng hiện nay có thể truy cập website từ nhiều thiết bị khác nhau: desktop, laptop, điện thoại, máy tính bảng, thậm chí là cả TV… Nếu bạn là một doanh nghiệp mới chưa có website hoặc đang muốn tạo một website của riêng bản thân và đang phân vân không biết nên sử dụng framework nào cho phù hợp, thì:

Bootstrap là một nền tảng framework sử dụng ngôn ngữ HTML, CSS và JavaScript để người lập trình có thể thiết kế website với giao diện hiển thị linh hoạt trên đa thiết bị (responsive web design).

bootstrap-la-gi

(Nguồn ảnh: Internet)

Bây giờ hãy cùng Beeswax Websites tìm hiểu “tấn tần tật” kiến thức A-Z để học Bootstrap qua bài viết dưới đây nhé.

Bootstrap là gì?

Bootstrap là một front-end framework bao gồm bộ sưu tập miễn phí các mã nguồn mở hay template được viết bằng HTML, CSS hoặc JavaScript giúp cho việc xây dựng website nói chung và thiết kế một mẫu website chuẩn responsive design (có thể hiển thị đa dạng trên nhiều kích thước thiết bị) nói riêng trở nên nhanh và dễ dàng hơn.

bootstrap-la-framework-template-mien-phi-de-thiet-ke-responsive-design

(Nguồn ảnh: Internet)

Người dùng sẽ được cung cấp sẵn các thành phần cơ bản như: navigation, buttons, typography, tables, forms, image carousels hay modals… ngoài ra còn có tích hợp thêm các thành phần khác (component), các plugin để thực hiện được nhiều chức năng hơn.

Trong Bootstrap các thuộc tính như size, color, width, height,… sẽ được quy định sẵn và người dùng có thể chủ động thiết kế giao diện website theo ý muốn.

Responsive Web Design là gì?

Responsive Web Design là một website với thiết kế có khả năng tự điều chỉnh kích thước để hiển thị vừa với các kích cỡ màn hình khác nhau của nhiều loại thiết bị như máy tính, điện thoại, máy tính bảng…

Sự ra đời của BootStrap

“Cha đẻ” của sản phẩm này là Mark Otto và Jacob Thornton – các nhân sự làm việc tại Twitter. Vào ngày 19/08/2011, Bootstrap được phát hành dưới hình thức một sản phẩm có mã nguồn mở open-source) trên trang GitHub với tên gọi ban đầu là Twitter BluePrint.

lich-su-hinh-thanh-bootstrap

(Nguồn ảnh: Internet)

Khoảng 4 tháng sau, phiên bản 2 chính thức được ra mắt, bổ sung thêm tính năng lưới bố cục (grid layout) với 12 cột để tùy chỉnh thiết kế có thể đáp ứng được nhu cầu hiển thị trên nhiều kích thước màn hình khác nhau. Tháng 08/2013, phiên bản 3 tương thích với điện thoại thông minh được giới thiệu.

Quá trình phát triển sản phẩm vẫn được tiếp tục và hoàn thiện cho đến ngày hôm nay. Hiện tại, Bootstrap luôn là một trong những framework dùng để thiết kế website có số lượng người sử dụng đông đảo nhất.

Lý do nên dùng Bootstrap

co-nhieu-ly-do-de-dung-bootstrap

(Nguồn ảnh: Internet)

Bootstrap có hiệu năng mạnh mẽ và phổ biến đến nỗi đã hình thành nên một chuẩn riêng, trong lĩnh vực Web Design thường hay gọi là “thiết kế chuẩn Bootstrap” và được đông đảo người dùng ưa chuộng trong số nhiều nền tảng cạnh tranh hiện nay. Những lý do thuyết phục nhất bao gồm:

  1. Dễ dùng & dễ tùy chỉnh: chỉ cần có kiến thức cơ bản về HTML, CSS và Javascript để thao tác với các template có sẵn; người dùng có thể tùy ý lựa chọn các thành phần thiết kế phù hợp với mình, ngoài ra bạn còn tiết kiệm được dung lượng mà không phải tải source-code về máy nhờ vào CDN Bootstrap.
  2. Khả năng thiết kế responsive design: các responsive CSS tích hợp sẵn trong Bootstrap cho phép giao diện web hiển thị được vừa vặn trên nhiều thiết bị khác nhau.
  3. Đáp ứng cơ chế mobile-first: đây là cơ chế vừa được áp dụng trong thời gian gần đây, ưu tiên lập chỉ mục cho phiên bản trên di động của website, trong các phiên bản mới nhất thì mobile-first styles là một thành phần nằm trong framework chính (Bootstrap mặc định thiết kế là responsive và ưu tiên cho thiết bị di dộng bằng cách sử dụng Grid System thông qua hai bộ tiền xử lý Less – Sass).
  4. Tương thích với nhiều browser: điểm mạnh của Bootstrap là có thể giúp cho website của bạn hoạt động được trên nhiều trình duyệt phổ biến nhất hiện nay (Chrome, Firefox, Safari, Opera hay Internet Explorer, tuy nhiên phải là IE phiên bản 9 trở lên). Đây là một yếu tố cực kỳ quan trọng có ảnh hưởng đến trải nghiệm người dùng (User Experience).
  5. Chất lượng thiết kế cao: Bootstrap là sản phẩm của các lập trình viên hàng đầu trên thế giới, được nghiên cứu và thử nghiệm rất kỹ lưỡng trước khi ra mắt nên người dùng có thể yên tâm rằng mình sẽ tạo ra được một sản phẩm với chất lượng cực kỳ tốt.

Bootstrap có cấu trúc và tính năng ra sao?

tinh-nang-của-bootstrap

(Nguồn ảnh: Internet)

Khả năng linh hoạt của framework này đến từ cấu trúc gọn nhẹ của nó. Về bản chất, Bootstrap bao gồm các file CSS, JavaScript và font đã được phiên mã thành ngôn ngữ lập trình và nén lại, cấu trúc theo các module. Bạn có thể dễ dàng sử dụng chúng trong các nền tảng mã nguồn mở như WordPress, Magento hay Joomla…

Một số tính năng nổi bật:

  • Cung cấp người dùng một thư viện phong phú và đa dạng các element (typography, grid, table, form…) để thiết kế một giao diện website hoàn chỉnh.
  • Cho phép tùy chỉnh lại framework và mô tả sự thay đổi trực tiếp trên giao diện,
  • Sử dụng lại các thành phần xuất hiện nhiều trên website
  • Có tích hợp jQuery
  • Tăng tốc độ load trang và giảm việc sử dụng hình ảnh làm icon nhờ vào Glyphicons.

Cách tải và cài đặt Bootstrap

Sau đây là 2 cách phổ biến để tải Bootstrap về host của website:

Cách 1: Tải trực tiếp từ Getbootstrap.com

tai-truc-tiep-tu-trang-chu-bootstrap

(Nguồn ảnh: Internet)

Sau khi tải file source Bootstrap về từ trang chủ, bạn sẽ nhận được 2 folder JS và CSS. Hãy giải nén và cài đặt 2 thư mục này vào host thông qua FTP.

source-code-bootstrap

(Nguồn ảnh: Internet)

Trong mã nguồn, hãy bổ sung thêm thẻ <link> trỏ đến file bootstrap.css hoặc bootstrap.min.css bằng đoạn mã sau:

<link rel=”stylesheet” type=”text/css” href=”bootstrap/css/bootstrap.css”>

Ngoài ra, cuối thẻ <body>, hãy thêm vào một thẻ <script>.

<script type=”text/javascript” src=”bootstrap/js/bootstrap.js”></script>

Cách 2: Sử dụng Bootstrap từ CDN

Với cách làm này, người dùng không cần tải về mà chỉ cần embed qua CDN Bootstrap (Content Delivery Network – Mạng phân phối nội dung). Ngoài ra, một ưu điểm của cách làm này đó là tiết kiệm băng thông, cơ chế lưu trữ cache trên máy cũng được tích hợp nên sẽ tiết kiệm được thời gian tải trang, thay vì phải tải lại file mỗi lần truy cập vào website.

cdn-la-gi

(Nguồn ảnh: Internet)

code-embed-bootstrap-tu-CDN

Mã nhúng Bootstrap từ CDN (Nguồn: Internet)

Plugin hỗ trợ viết code Bootstrap trong Sublime Text

Sublime Text là một phần mềm soạn thảo đa nhiệm, bạn có thể cài đặt thêm một số trình cắm để việc viết code trở nên dễ dàng hơn.

Bước 1: Cài đặt package control.

Bước 2: Trong preferences, cài thêm bootstrap autocomplete và bootstrap snipets

Bước 3: Chọn package control và insert install package.

Bước 4: Tìm tên của 2 plugin.

Dùng Bootstrap để tạo website đầu tiên

huong-dan-dung-bootstrap-de-tao-website

(Nguồn ảnh: Internet)

1. Thêm HTML5 doctype

Các element HTML và attribute CSS trong Bootstrap phải đáp ứng được tiêu chuẩn HTML5 doctype.

Ở đầu trang, hãy khai báo HTML5 doctype cùng với thẻ “lang” (ngôn ngữ) cùng với bộ ký tự chính xác:

khai-bao-html5-doctype

(Nguồn ảnh: Internet)

2. Bootstrap ưu tiên cơ chế mobile-first

Như đã nói ở phía trên, mobile-first styles sẽ được tích hợp vào trong framework cốt lõi của Bootstrap để tạo nên responsive design cho thiết bị di động.

Bạn cũng cần thêm vào dòng lệnh sau đây để đảm bảo website được hiển thị đúng khi người dùng thao tác thu phóng trên smartphone:

code-bo-sung-cho-mobile-first

(Nguồn ảnh: Internet)

  • width=device-width: chiều rộng của trang, tùy thuộc vào kích thước của màn hình thiết bị (khác nhau tùy theo thiết bị);
  • initial-scale=1: mức zoom ban đầu khi trang được browser load lần đầu tiên.

3. Container

Ngoài ra, bạn cũng cần thiết lập một thành phần chứa (containing element) để “bao bọc” lại nội dung trang. Có 2 loại container classes:

container-bootstrap

(Nguồn ảnh: Internet)

  • .container class: khung chứa này có thiết kế responsive theo một độ rộng cố định; bạn có thể dùng WAMP hay XAMPP để khởi tạo một localhost và tạo một file .html hoặc thử soạn thảo đoạn mã dưới đây vào file Notepad (chỉnh lại encoding thành UTF-8) rồi mở bằng browser để kiểm tra thiết kế web với container dạng này:

source-code-.container-class

(Nguồn ảnh: Internet)

  • .container-fluid class: độ rộng trải đầy khung mà người dùng có thể nhìn thấy từ màn hình. Tương tự, bạn cũng có thể kiểm tra bằng đoạn mã dưới đây:

source-code-.container-fluid-class

(Nguồn ảnh: Internet)

4. Bootstrap Grid System

Thành phần làm cho Bootstrap có khả năng thiết kế nên những giao diện có thể hiển thị vừa vặn trên nhiều thiết bị chính là Grid System. Khi khởi động, giao diện của nền tảng này sẽ được trình bày dưới dạng lưới (grid), một class row sẽ chia thành 12 cột (12 span 1 như hình ví dụ bên dưới) và mỗi cột này sẽ bao gồm padding (khoảng trống giữa nội dung và viền) tương ứng với resolution (độ phân giải) của từng thiết bị tương ứng như máy tính, máy tính bảng, điện thoại….

bootstrap-grid-system

(Nguồn ảnh: Internet)

Tổng quát hóa, thì mô hình của Grid System sẽ bao gồm 5 lớp kích thước thiết bị:

  • .col: độ rộng màn hình (width) nhỏ hơn 576 pixel, cho những thiết bị có kích thước rất nhỏ (extra small)
  • .col-sm-: width từ 576 px trở lên, cho những thiết bị nhỏ (small)
  • .col-md-: width từ 768 px trở lên, cho thiết bị với kích thước vừa (medium)
  • .col-lg-: width từ 992 px trở lên, thiết bị với kích thước lớn (large)
  • .col-xl-: width từ 1200px trở lên, thiết bị với kích thước ngoại cỡ (xlarge)

Trong mã nguồn, cấu trúc của Grid System sẽ giống với hình dưới đây:

source-code-grid-system

(Nguồn ảnh: Internet)

Bạn có thể thao thác để tự tạo nên một cấu trúc cơ bản:

  1. Đầu tiên, thêm dòng <div class=”row”>
  2. Tiếp theo, thêm số lượng cột mình muốn (bao nhiêu cột sẽ có bất nhiêu thẻ class với lớp .col-*-*; dấu * thứ nhất, hãy xem lại mô hình 5 lớp ở trên để biết kích cỡ chính xác, dấu * thứ 2, hãy điền vào số khung muốn chia, từ 1-12.
  3. Bạn có thể chia cột nhanh chóng hơn bằng cách thay vì chọn số lượng, bạn có thể thêm attribute width = 50% để chia 2 hoặc width = 33.3% để chia 3. Tuy hiên để tiết kiệm thời gian bạn hãy dùng các lớp trong mô hình ở trên để khả năng tương thích được tốt hơn.

Kết luận

Hiện tại, Bootstrap đã và đang là một nền tảng thiết kế web cực kỳ hiệu quả và sẽ tiếp tục phát triển hơn nữa trong tương lai.

Bạn có thể tìm hiểu thêm kiến thức về Bootstrap tại các địa chỉ sau:

  • Hướng dẫn dùng CSS: com.vn/css/
  • Làm quen với các component của Bootstrap: getbootstrap.com.vn/components
  • Dùng JavaScript trong Bootstrap: getbootstrap.com.vn/javascript

Hi vọng qua bài viết này, các bạn đã biết được tổng quan Bootstrap là gì và những nội dung quan trọng về một trong những framework đang được áp dụng nhiều nhất hiện nay. Hãy cùng đón đọc những bài viết tiếp theo của Beeswax Websites nhé!