Bootstrap Là Gì? Cài đặt Bootstrap, Web Chuẩn Responsive

Bạn đang tìm hiểu về Bootstrap là gì và muốn biết cách cài đặt Bootstrap để tạo web chuẩn responsive. Bài viết này sẽ giải đáp toàn bộ thắc mắc này cho bạn. Hãy cùng Mắt Bão tìm hiểu nhé.

1. Bootstrap là gì?
2. Lịch sử của Bootstrap
3. 3 file chính của Bootstrap
   1. Bootstrap.CSS
   2. Bootstrap.JS
   3. Glyphicons
4. Tại sao nên dùng Bootstrap
   1. Dễ dàng thao tác
   2. Tùy chỉnh dễ dàng
   3. Chất lượng sản phẩm đầu ra hoàn hảo
   4. Độ tương thích cao
5. Cấu trúc và tính năng của Bootstrap là gì?
6. Cách cài đặt Bootstrap
   1. Tải về từ trang Bootstrap
   2. Bootstrap từ CDN là gì?
7. Bootstrap 4 có gì mới?
8. Hướng dẫn sử dụng Bootstrap 4 cơ bản
   1. Thêm HTML5 doctype
   2. Bootstrap 4 mobile-first là gì?
   3. Bootstrap 4 containers là gì?
   4. Ví dụ trang Bootstrap 4 cơ bản
   5. Bootstrap 4 Grid System là gì?
      1. Bootstrap 4 Grid System có 5 lớp
      2. Cấu trúc Bootstrap 4 Grid System là gì?
9. Cách nhúng Bootstrap vào HTML
   1. Nhúng từ liên kết của Bootstrap
   2. Nhúng Bootstrap vào HTML bằng cách tự Host

Bootstrap là gì?

Bootstrap là một framework bao gồm các HTML, CSS và JavaScript template dùng để phát triển website chuẩn responsive.

Bootstrap cho phép quá trình thiết kế website diễn ra nhanh chóng và dễ dàng hơn dựa trên những thành tố cơ bản sẵn có như typography, forms, buttons, tables, grids, navigation, image carousels… Cùng Mắt Bão tìm hiểu tính năng và lợi ích mang lại cho lập trình viên của Bootstrap là gì nhé!

Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng để tạo ra một mẫu webiste hoàn chỉnh. Với các thuộc tính về giao diện được quy định sẵn như kích thước, màu sắc, độ cao, độ rộng…, các designer có thể sáng tạo nhiều sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc với framework này trong quá trình thiết kế giao diện website.

Lịch sử của Bootstrap

Bootstrap là sản phẩm của Mark Otto và Jacob Thornton tại Twitter. Nó được xuất bản như là một mã nguồn mở vào ngày 19/8/2011 trên GitHub. Tên gọi ban đầu là Twitter Blueprint.

Đến ngày 31/1/2012, Bootstrap phiên bản 2 đã được phát hành. Bootstrap 2 được bổ sung bố cục lưới 12 cột với thiết kế tùy chỉnh đáp ứng cho nhiều màn hình kích thước. Tiếp nối sự thành công của phiên bản 2, Bootstrap 3 ra đời vào ngày 19/8/2013 với giao diện tương thích với smartphone.

Chỉ 3 năm sau ngày ra mắt, Bootstrap đã trở thành No.1 project trên GitHub. Vào tháng 10/2014, Mark Otto công bố phiên bản Bootstrap 4 đang được phát triển. Phiên bản alpha đầu tiên của Bootstrap 4 đã được triển khai vào tháng 8/2015. Phiên bản mới nhất của Bootstrap được giới thiệu đến người dùng là Bootstrap 4.3.1. Cho đến nay, Bootstrap vẫn là một trong những framework thiết kế website có lượng người dùng “khủng” nhất.

3 file chính của Bootstrap

Dưới đây là 3 File chính giúp quản lý các chức năng của Website và giao diện người dùng:

• Bootstrap.CSS
• Bootstrap.JS
• Glyphicons

Bootstrap.CSS

Nó là một Framework CSS có chức năng quản lý và sắp xếp bố cục của các trang Web. HTML có nhiệm vụ quản lý cấu trúc và nội dung thì CSS sẽ xử lý bố cục của Website. Vì vậy mà hai cấu trúc này phải tồn tại cùng nhau để thực hiện được hành động cụ thể.

Giờ bạn sẽ không phải tốn thời gian để chỉnh sửa thủ công chỉ để thay đổi một thiết kế nhỏ. Thay vào đó, bạn có thể dùng CSS để tạo giao diện thống nhất trên nhiều Website mà không bị giới hạn.

Hàm CSS không chỉ giới hạn ở kiểu văn bản mà còn dùng định dạng như bảng, bố cục hình. Bạn cần mất một ít thời gian để CSS ghi nhớ hết tất cả các khai báo và bộ chọn.

Bootstrap.JS

Đây là phần cốt lõi vì chứa các File JavaScript, nó chịu trách nhiệm cho việc tương tác của Website. Để tiết kiệm thời gian viết cú pháp JavaScript mà nhiều nhà phát triển sẽ sử dụng jQuery. Đây là thư viện JavaScript mã nguồn mở, đa nền tảng giúp bạn thêm nhiều chức năng vào trang Web.

Theo kinh nghiệm của tôi, jQuery sẽ thực hiện một số chức năng như:

• Thực hiện các yêu cầu của Ajax như: loại trừ dữ liệu đến từ một vị trí khác một cách linh hoạt.
• Giúp tạo các tiện ích bằng bộ sưu tập Plugin JavaScript.
• jQuery sẽ tạo hình động tùy chỉnh bằng các thuộc tính của CSS.
• Thêm một số tính năng động cho nội dung các trang Web của bạn.

Tuy Bootstrap với các thuộc tính Element HTML và CSS có thể hoạt động tốt, nhưng vẫn cần jQuery để tạo thiết kế Responsive. Nếu thiếu đi phần này, bạn chỉ có thể dùng các phần tĩnh của CSS mà thôi.

Glyphicons

Trong giao diện trang Web, phần không thể thiếu chính là Icons. Chúng thường được liên kết với các dữ liệu nhất định và các hành động trong giao diện người dùng.

Bootstrap dùng Glyphicons để đáp ứng nhu cầu trên và nó đã mở khóa bộ Halflings Glyphicons để bạn sử dụng miễn phí. Tại bản miễn phí, tuy chỉ có giao diện chuẩn nhưng phù hợp với các chức năng thiết yếu.

Nếu như bạn muốn có các Icon phong cách hơn thì có thể mua bộ bộ Icon Premium khác nhau. Chắc chắn các Icon tại Glyphicons sẽ giúp cho trang Web của bạn trông đẹp và nổi bật hơn.

Tại sao nên dùng Bootstrap

Giữa muôn vàn ứng dụng thiết kế website hiện nay, Bootstrap vẫn có khả năng cạnh tranh cao là nhờ những đặc điểm nổi bật sau:

• Dễ dàng thao tác
• Tùy chỉnh dễ dàng
• Chất lượng sản phẩm đầu ra hoàn hảo
• Độ tương thích cao

Hãy cùng Mắt Bão tìm hiểu chi tiết!

Dễ dàng thao tác

Cơ chế hoạt động của Bootstrap là dựa trên xu hướng mã nguồn mở HTML, CSS và Javascript. Người dùng cần trang bị kiến thức cơ bản 3 mã này mới có thể sử dụng Bootstrap hiệu quả. Bên cạnh đó, các mã nguồn này cũng có thể dễ dàng thay đổi và chỉnh sửa tùy ý.

Tùy chỉnh dễ dàng

Bootstrap được tạo ra từ các mã nguồn mở cho phép designer linh hoạt hơn. Giờ đây có thể lựa chọn những thuộc tính, phần tử phù hợp với dự án họ đang theo đuổi. CDN Boostrap còn giúp bạn tiết kiệm dung lượng vì không cần tải mã nguồn về máy.

Chất lượng sản phẩm đầu ra hoàn hảo

Bootstrap là sáng tạo của các lập trình viên giỏi trên khắp thế giới. Bootstrap đã được nghiên cứu và thử nghiệm trên các thiết bị. Được kiểm tra nhiều lần trước khi đưa vào sử dụng. Do đó, khi chọn Bootstrap, bạn có thể tin rằng mình sẽ tạo nên những sản phẩm với chất lượng tốt nhất.

Độ tương thích cao

Điểm cộng lớn nhất của Bootstrap là khả năng tương thích với mọi trình duyệt và nền tảng. Đây là một điều cực kì quan trọng và cần thiết trong trải nghiệm người dùng. Sử dụng Grid System cùng với hai bộ tiền xử lý Less và Sass, Bootstrap mặc định hỗ trợ Responsive và ưu tiên cho các giao diện trên thiết bị di động hơn. Bootstrap có khả năng tự động điều chỉnh kích thước trang website theo khung browser. Mục đích để phù hợp với màn hình của máy tính để bàn, tablet hay laptop.

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

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 mô-đun. Do đó, dễ dàng tích hợp với hầu hết các mã nguồn mở như WordPress, Joomla, Magento, …Trong đó, Bootstrap mang đến nhiều chức năng nổi bật.

• Bootstrap cho phép người dùng 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…
• Bootstrap cho phép bạn tùy chỉnh framework của website trước khi tải xuống và sử dụng nó tại trang web của khung.
• 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 nhằm 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.

Cách cài đặt Bootstrap

Biết về Bootstrap là gì vẫn chưa đủ. Bạn cần phải biết cách cài đặt và sử dụng Bootstrap như thế nào? Có hai cách phổ biến để tải Bootstrap về web hosting của bạn:

• Tải trực tiếp từ trang cung cấp Bootstrap
• Thông qua CDN Bootstrap

Tải về từ trang Bootstrap

Bạn có thể tải Bootstrap từ trang chủ https://getbootstrap.com/. Sau khi tải về, bạn sẽ nhận được cấu trúc gồm hai thư mục JS và CSS. Bạn cần giải nén và cài đặt vào web hosting thông qua giao thức FTP. Bạn có thể xem bài viết “FTP là gì?” để biết cách sử dụng giao thức FTP trao đổi dữ liệu giữa máy cá nhân và web hosting.

Chỉ với những bước đơn giản trên, người dùng đã có thể sử dụng Bootstrap cho việc thiết kế ngay lập tức. Vì đây là phiên bản được biên dịch sẵn nên quá trình tải về và nhúng Bootstrap vào website diễn ra vô cùng nhanh chóng. Ví dụ như dưới đây:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap example</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body> <h1>Learning Bootstrap</h1> <script src="https://code.jquery.com/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

Bootstrap từ CDN là gì?

Bạn không muốn tải xuống và lưu trữ Bootstrap trên thiết bị? Bạn có thể nhúng Bootstrap thông qua CDN (Content Delivery Network – mạng phân phối nội dung). Đây là cách mà đa số lập trình viên sử dụng để nhúng Bootstrap vì tiết kiệm băng thông cũng như tích hợp JavaScript, CSS, thư viện jQuerry mang đến nhiều tính năng cho website và nâng cao trải nghiệm người dùng hơn.

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

Bootstrap 4 có gì mới?

Theo kinh nghiệm sau một thời gian sử dụng phần mềm này, tôi đã thấy một số đặc điểm mới của Bootstrap 4 gồm:

• Dung lượng File Bootstrap.min.CSS giảm đi đáng kể, từ 121KB chỉ còn 88KB.
• Sử dụng Sass thay thế LESS để giúp bạn sử dụng đồng thời nhiều khả năng tùy biến hơn.
• Không còn hỗ trợ IE8: Đa phần các nhà làm Web sẽ gặp hiển thị lỗi trên IE8. Vì vậy mà phần mềm này đã đổi từ đơn vị px sang đơn vị EM hoặc REM. Nó sẽ giúp cho các thành phần trong Website có thể đổi kích thước tương ứng mà không làm ảnh hưởng đến cấu trúc.
• Hỗ trợ Flexbox: Giúp các nhà phát triển Web có thể sắp xếp các phần tử trên Website một cách linh hoạt. Chỉ với vài dòng lệnh đơn giản là các phần tử của Website đã được sắp xếp theo đúng ý đồ.
• Bổ sung các Class mới: Một điểm cộng nữa là so với các phiên bản cũ, nó đã được bổ sung thêm các Class tiện ích.

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

Thêm HTML5 doctype

Bootstrap 4 ứng dụng các phần tử HTML và các thuộc tính CSS. Bootstrap đòi hỏi người dùng bổ sung thẻ HTML5 doctype. Để sử dụng Bootstrap, bạn cần đảm bảo Bootstrap được cài đặt đã bao gồm HTML5 doctype ở đầu trang, cùng với thuộc tính lang và bộ ký tự chính xác.

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

Bootstrap 4 mobile-first là gì?

Bootstrap 4 được thiết kế để đáp ứng cho các thiết bị di động. Mobile-first Index là một phần cốt lõi của Bootstrap 4. Để đảm bảo hiển thị đúng và thu phóng khung của website linh hoạt với khung browser, hãy thêm thẻ <meta> sau vào bên trong phần tử <head>:

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

• Width = device-width thiết lập chiều rộng của trang theo chiều rộng màn hình của thiết bị hay browser.
• Initial-scale = 1 phần đặt mức thu phóng ban đầu khi trang được trình duyệt tải ban đầu.

Bootstrap 4 containers là gì?

Khi sử dụng trên webiste của riêng mình, người dùng cần bọc toàn bộ nội dung trong webiste bằng thẻ container (class container hoặc container-fluid). Trong đó:

• Container class cung cấp một container với chiều rộng tương thích (responsive fixed width container)
• Container-fluid class cung cấp một container có chiều rộng đầy đủ, trải rộng toàn bộ chiều rộng của khung nhìn (full width container)

Ví dụ trang Bootstrap 4 cơ bản

Để chạy thử các ví dụ dưới đây bạn có thể sử dụng WAMP hay XAMPP để chạy localhost và tạo file example.html. Cụ thể bạn có thể tham khảo ở bài viết sau:

• Localhost là gì?
• XAMPP là gì?
• WAMP là gì?

Hoặc bạn chỉ cần mở notepad sau đó copy các đoạn code dưới đây vào. Đừng quên đổi đuôi file khi lưu là .html và đổi Encoding thành UTF-8 để không bị lỗi font. Sau đó bạn chỉ cần dùng trình duyệt (browser) của mình mở file này để kiểm tra.

Đây là ví dụ Bootstrap 4 sử dụng Container-fluid class (Responsive fixed width container):

<!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.3.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.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.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>

Đây là ví dụ sử dụng Container-fluid class (full width container)

<!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.3.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.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.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>

Bootstrap 4 Grid System là gì?

Bootstrap 4 Grid System là mấu chốt cho khả năng tương thích giao diện (web responsive) của Bootstrap. Khi khởi động Bootstrap, giao diện của nó sẽ hiển thị dưới dạng lưới (grid). Bootstrap được chia thành 12 cột đặt trong một class row. Trong đó, mỗi cột sẽ bao gồm các Padding tương ứng với từng độ phân giải của mỗi thiết bị (điện thoại, tablet, máy tính).

Bootstrap 4 Grid System có 5 lớp

• .col- (extra small devices – chiều rộng màn hình < 576px)
• .col-sm- (small devices – chiều rộng màn hình >= 576px)
• .col-md- (medium devices – chiều rộng màn hình >= 768px)
• .col-lg- (large devices – chiều rộng màn hình >= 992px)
• .col-xl- (xlarge devices – chiều rộng màn hình >= 1200px)

Cấu trúc Bootstrap 4 Grid System là gì?

Dưới đây là cấu trúc đơn giản nhất của Bootstrap 4 Grid System

<!-- Control the column width, and how they should appear on different devices --> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <!-- Or let Bootstrap automatically handle the layout --> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>

Với:

• Tạo dòng: <div class=”row”>
• Sau đó, thêm số lượng cột mong muốn (tags phù hợp cho lớp .col-*-* ). Với (*) đầu tiên bạn xem lại các lớp của Grid System để đảm bảo sự chính xác (sm, md, lg hay xl). Dấu (*) thứ 2 đại diện cho số khung bạn muốn chia từ 1 – 12.
• Thay vì thêm số cho từng col, bootstrap có thể giúp bạn chia nhanh chóng hơn. Ví dụ muốn chia 2 “col” bạn có thể thêm thuộc tính width = 50%. Tương tự với 3 “col” bạn sẽ có width = 33.33%. Để làm điều này bạn cần có hiểu biết về CSS.
• Để tiết kiệm thời gian bạn nên dùng .col-sm|md|lg|xl để nó tương thích dễ hơn.

Cách nhúng Bootstrap vào HTML

Để thực hiện công đoạn này, bạn hãy Download toàn bộ thư viện Bootstrap về máy tính và giải nén.

Nhúng từ liên kết của Bootstrap

Phần mềm này cung cấp cho bạn các đường Link để nhúng trực tiếp vào Website của mình. Tuy nhiên, nó khá hạn chế vì phải tải liên kết từ bên ngoài nên khiến Website bị chậm lại.

Để thực hiện, bạn có thể tham khảo ví dụ của tôi về cú pháp như sau:

<!DOCTYPE html> <html lang="vi"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Chào mừng bạn đến với Website Mắt Bão</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> </head> <body> <h1>Chào mừng bạn đến với Website Mắt Bão </h1> </body> </html>

Nhúng Bootstrap vào HTML bằng cách tự Host

Theo kinh nghiệm của tôi thì cách này sẽ giúp Website hoạt động tối ưu và tải nhanh hơn. Cách thực hiện khá đơn giản, bạn mở tập tin Index.html ra và bố trí cấu trúc như sau:

<!DOCTYPE html> <html lang="vi"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Chào mừng bạn đến với website HostingViet.vn</title> <link rel="stylesheet" href="css/bootstrap.min.css"/> <link rel="stylesheet" href="css/style.css"/> </head> <body> <h1>Chào mừng bạn đến với website Mắt Bão </h1> </body> </html>

Trong đó Style.css được dùng để điều chỉnh lại lớp CSS mà bạn không muốn dùng mặc định.

Bootstrap là một framework tối ưu và sẽ được sử dụng rất nhiều trong tương lai. Đặc biệt là trong quá trình thiết kế website chuyên nghiệp. Hy vọng, bài viết này đã giúp bạn có cái nhìn tổng quát về Bootstrap là gì? – giải pháp hiệu quả và tiết kiệm thời gian thiết kế web cho nhiều doanh nghiệp.