April 21, 2015 hotro@hostingviet.vn 02466.567.555       Giới thiệuTuyển dụng    Liên hệ   Đăng nhập   Đăng ký

Bootstrap Là Gì? Hướng Dẫn Cách Dùng, Nhúng Bootstrap Vào HTML

Bootstrap là gì để có thể thiết kế cho mình một website chuẩn responsive thì đừng bỏ qua chia sẻ sau của Hosting Việt nhé. Bài viết là tổng hợp các thông tin về Bootstrap cũng như cách nhúng nó vào trang HTML.

Nếu bạn muốn tìm hiểu Bootstrap là gì để có thể thiết kế cho mình một website chuẩn responsive thì đừng bỏ qua chia sẻ sau của Hosting Việt nhé. Bài viết là tổng hợp các thông tin về Bootstrap cũng như cách nhúng nó vào trang HTML.

Bootstrap là gì?

Vì sao nên sử dụng Bootstrap?

Hiện nay, có rất nhiều ứng dụng thiết kế website mang đến cho người dùng đa dạng sự lựa chọn. Tuy nhiên, Bootstrap vẫn giữ được vị trí của mình, nhờ vào các ưu điểm nổi bật như:

  • Thao tác dễ dàng

  • Dễ dàng tùy chỉnh

Vì được tạo ra từ mã nguồn mở nên Bootstrap có tính linh động cao. Theo đó, người dùng dễ dàng thay đổi thuộc tính hay các phần tử theo nhu cầu sử dụng. Hơn nữa, CDN Boostrap còn giúp tiết kiệm kha khá dung lượng, bởi nó không yêu cầu bạn tải mã nguồn về máy tính.

  • Sản phẩm đầu ra đạt chất lượng hoàn hảo

Bootstrap được nghiên cứu và thử nghiệm trên nhiều thiết bị, đồng thời, nó lại là sản phẩm sáng tạo của những lập trình viên hàng đầu thế giới. Do đó, khi lựa chọn Bootstrap cho quá trình thiết kế website là bạn đã dùng công cụ tốt để kiến tạo các sản phẩm chất lượng hoàn hảo.

  • Độ tương thích cao

Ưu điểm nổi trội của Bootstrap là tính tương thích cao với mọi nền tảng cùng trình duyệt. Thông qua việc sử dụng Grid System cùng bộ đôi tiền xử lý Less, Sass, nó mặc định hỗ trợ Responsive Bootstrap. Hơn nữa, nó còn ưu tiên cho những giao diện trên thiết bị di động. Ngoài ra, Bootstrap cũng có tính năng thông minh là tự động điều chỉnh kích thước hiển thị của website theo khung browser, nhằm phù hợp hơn với màn hình của laptop, máy tính để bàn hay máy tính bảng.

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

  • Cho phép người dùng có thể truy cập thư viện các thành tố đa dạng để tạo nên giao diện website hoàn chỉnh như font, form, table, typography, grid…
  • Cho phép người dùng tùy chỉnh framework của trang web trước khi tải và dùng nó tại trang của khung.
  • Có thể sử dụng lại các thành phần lặp lại trên một trang web.
  • Tich hợp được với jQuery.
  • Có tính năng định nghĩa glyphicons để giảm tối đa việc dùng hình ảnh làm biểu tượng, giúp tăng tốc độ tải của trang.

Cài đặt Bootstrap và cách sử dụng?

Có hai cách tải Bootstrap về web hosting.

Cách 1: Tải trực tiếp tại trang Bootstrap

Bạn truy cập vào trang https://getbootstrap.com/ để tải Bootstrap. Sau khi hoàn tất tải, bạn nhận được cấu trúc có 2 thư mục JS và CSS. Kế đến, bạn tiến hành giải nén, rồi cài đặt Bootstrap vào hosting bằng giao thức FTP. 

Như vậy, bạn đã có thể dùng ngay Bootstrap cho việc thiết kế website. 

Cách 2: Thông qua CDN Bootstrap 

Hướng dẫn sử dụng Bootstrap 4

  • Thêm HTML5 doctype

Vì Bootstrap 4 dùng các phần tử HTML và thuộc tính CSS nên đòi hỏi người sử dụng phải bổ sung thẻ HTML5 doctype. Do đó, để có thể dùng Bootstrap, bạn cần đảm bảo Bootstrap đã bao gồm HTML5 doctype, thuộc tính lang, cũng như bộ ký tự chính xác.

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

  </head>

</html>

  • Bootstrap 4 mobile-first 

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

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

Trong đó:

- Width = device-width: Là chiều rộng của trang theo chiều rộng của màn hình thiết bị hay browser.

- Initial-scale = 1: Đây là phần đặt mức thu phóng khi trang web được trình duyệt tải lần đầu.

  • Bootstrap 4 containers 

Thẻ containers giúp người dùng bọc nội dung website, gồm:

- Container class: Cung cấp container có chiều rộng tương thích. 

- Container-fluid class: Cung cấp containr có chiều rộng đủ để trải chiều rộng của khung hình. 

  • Bootstrap 4 Grid System 

Bootstrap 4 Grid System chính là trọng tâm của khả năng tương thích giao diện. Khi người dùng khởi động Bootstrap, giao diện sẽ hiển thị dạng lưới (grid) chia thành 12 cột đặt trong cùng một class row. Mỗi cột có các Padding ứng với độ phân giải khác nhau của các thiết bị (máy tính, máy tính bảng, điện thoại). 

Cấu tạo của Bootstrap 4 Grid System gồm 5 lớp

- .col- (extra small devices): Tương ứng với chiều rộng màn hình < 576px.

- .col-sm- (small devices): Tương ứng với chiều rộng màn hình ≥ 576px.

- .col-md- (medium devices): Tương ứng với chiều rộng màn hình ≥ 768px.

- .col-lg- (large devices): Tương ứng với chiều rộng màn hình ≥ 992px

- .col-xl- (xlarge devices): Tương ứng với chiều rộng màn hình ≥1200px

Minh họa sau là cấu trúc đơn giản 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>

Trong đó:

- <div class=”row”>: Dùng để tạo dòng.

- Kế đến, bạn thêm số lượng cột theo nhu cầu. Với dấu “*” đầu tiên là các lóp của Grid System. Dấu “*” thứ 2 là số khung cần chia (nó sẽ có giá trị từ 1 – 12). 

Nếu muốn tiết kiệm thời gian, bạn có thể sử dụng .col-sm|md|lg|xl để tăng khả năng tương thích.

Bootstrap 4 có gì mới?

Các điểm nổi bật của bản Bootstrap 4 có thể kể đến là:

  • SASS thay cho LESS

Với các phiên bản trước, Bootstrap dùng LESS làm công cụ để thực hiện việc chuẩn bị CSS chính, đến bản Bootstrap 4, tất cả quy tắc được tái cấu trúc cho SASS. Nó phổ biến và dễ sử dụng, cùng với nhiều tính năng hơn. Bên cạnh đó, nhờ có Libsass Sass Comp được viết bằng ngôn ngữ C / C ++ nên tốc độ biên dịch của Bootstrap 4 cải thiện hơn trước rất nhiều.

  • Grid Tier cho màn hình nhỏ hơn

Về bản chất, Bootstrap vốn dĩ đã sở hữu một hệ thống lưới tinh vi, giúp cho người dùng dễ dàng thiết kế website tương thích với nhiều chế độ xem của các thiết bị. Tuy nhiên, bản Bootstrap 4 còn được tăng cường hệ thống lưới 5 lớp, tạo điều kiện cho nhà phát triển website tiếp cận đến các thiết bị có chiều rộng khung nhìn dưới 480px.

  • Các đơn vị CSS tương đối

Bootstrap 4 bỏ hỗ trợ cho IE 8. Điều này cho phép nó thoát khỏi những polyfill phiền phức để chuyển đổi sang đơn vị CSS tương đối. Bản phát hành mới sử dụng REM, EM thay cho pixel sẽ có khả năng thực hiện các kiểu chữ đáp ứng web Bootstrap. Nhờ thế, nó tăng khả năng đọc và giúp website được truy cập dễ dàng hơn, đặc biệt là với những người dùng bị chặn hay bị vô hiệu truy cập website.

  • Thẻ Bootstrap mới

Nhà sản xuất đã hợp nhất một vài yếu tố trong giao diện người dùng của bản Bootstrap trước đây để tạo nên thành phần mới có tên là Cards. Cards đóng vai trò thay thế các thành phần UI là thumbnails, wells, panels và cung cấp quy trình làm việc khoa học hơn cho người dùng. Mặc dù là thẻ mới nhưng Cards vẫn giữ nguyên những yếu tố quen thuộc như titles, headers, footers của thumbnails, wells, panels.

Vì tính linh hoạt cao nên Cards mang đến cho người dùng một không gian lớn, phục vụ cho mục đích sáng tạo.

  • Module Reboot mới

Module này thay thế tệp normalize.css. Bằng cách kế thừa những đặc tính của tệp, đồng thời, xây dựng thêm các quy tắc tối ưu hơn. Điều này giúp cho các bộ chọn CSS chung, các kiểu đặt lại trong CSS trở nên đơn giản và dễ sử dụng. Những thuộc tính này khá thông minh và giúp cho bố cục được quản lý dễ hơn.

  • Opt-in Flexbox Support

Cách dùng Bootstrap 4 hiệu quả còn được thể hiện qua việc tận dụng bố cục Flexbox CSS3. Tuy nhiên, điểm trừ là trình duyệt IE 9 lại không hỗ trợ module flexbox. Nếu không cần hỗ trợ IE 9 thì bạn có thể thoải mái sử dụng tính năng này.

Bố cục Flexbox dễ sử dụng, có thể được dùng trong Responsive Bootstrap design một cách xuất sắc. Bởi Opt-in Flexbox Support cung cấp một container linh hoạt cho việc mở rộng hay thu nhỏ một cách tốt nhất. 

  • Tùy chỉnh biến hợp lý

Toàn bộ biến SASS dùng trong Bootstrap 4 được chứa trong tệp _variables.scss. Vì vậy, nó sẽ giúp người dùng tùy chỉnh biến hợp lý hóa trong quá trình phát triển website. Theo đó, người dùng chỉ việc sao chép cài đặt từ tệp này sang tệp có tên _custom.scss để tiến hành thay đổi những giá trị mặc định.

Cụ thể, bạn có thể tùy ý điều chính color, spacing, typography, tables, link styles, grid breakpoints, column number, container, gutter width cùng nhiều yếu tố khác.

  • Nhiều lớp tiện ích cho Spacing

Nếu các lớp tiện ích như thay đổi floating, clearfix đã có trong Bootstrap 3 thì Bootstrap 4 không những giữ nguyên chúng, mà còn được bổ sung thêm nhiều lớp thú vị khác. Đó là, tiện ích cho phép người dùng có thể thay đổi padding và margin trên website một cách nhanh chóng. Hơn nữa, cú pháp classes mới cũng cực kỳ đơn giản. 

  • Tether cung cấp Tooltips và Popovers 

Tooltips và Popovers trong Bootstrap 4 sử dụng thư viện siêu tốc Tether. Đây là công cụ định vị có khả năng giữ định vị tuyệt đối một phần tử ngay bên cạnh phần tử khác ở cùng một trang. Điều này cho thấy, Tooltips và Popovers được đặt tự động trên những trang web Bootstrap 4.

Nhúng Bootstrap vào HTML

Sau khi đã biết Bootstrap là gì thì kế đến, bạn nên tìm hiểu về cách nhúng Bootstrap vào HTML để áp dụng chúng trong quá trình thiết kế website.

Để thực hiện, đầu tiên, bạn download toàn bộ thư viện Bootstray về máy. Sau đó, bạn giải nén sẽ có được hệ thống các file có cấu trúc như hình sau.

Trong đó:

CSS gồm các tập tin:

  • boostrap.css: Tập tin chứa bộ core CSS đầy đủ.
  • boostrap.min.css: Tập tin chứa bộ core CSS đầy đủ nhưng được loại bỏ khoảng trắng, chú thích,…nhằm làm giảm dung lượng.
  • bootstrap-theme.css: Tập tin chứa các hiệu ứng.
  • bootstrap-theme.min.css: Tập tin chứa các hiệu ứng nhưng được loại bỏ khoảng trắng, chú thích,… nhằm làm giảm dung lượng.

JS gồm các tập tin:

Fonts: Là thư mục chứa tất cả các fonts của thư viện glyphicons, hỗ trợ đắc lực cho việc trang trí trang web bằng bộ font icon.

Lưu ý: Bạn nên dùng file .min khi nhúng vào website để web được load nhanh hơn.

Phần tiếp theo, Hosting Việt sẽ hướng dẫn bạn cách dùng Bootstrap thông qua việc nhúng chúng vào HTML.

Cách 1: Nhúng từ liên kết của Bootstrap

Bootstrap cung cấp các liên kết để người dùng có thể nhúng chúng trực tiếp vào website. Tuy nhiên, đây là cách bạn nên hạn chế dùng vì nó khiến webiste chậm do phải tải liên kết bên ngoài.

Ví dụ về cú pháp thực hiện 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="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 HostingViet.vn </h1>

 

         

    </body>

</html>

Cách 2: Nhúng Bootstrap vào HTML bằng cách tự host

So với cách 1 thì cách 2 sẽ giúp website hoạt động tối ưu và tốc độ tải nhanh hơn. Cách thực hiện cũng khá đơn giản. Đầu tiên, bạn tải bộ Bootstrap về máy. Tiếp đến, bạn thiết lập cấu trúc thư mục như hình dưới đây.

Sau đó, bạn mở tập tin index.html rồi thực hiện 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 HostingViet.vn </h1>

 

         

    </body>

</html>

Trong đó:

  • style.css: Dùng để điều chỉnh lại lớp CSS mà bạn không muốn dùng mặc định cho Bootstrap.

Qua bài chia sẻ này, bạn dễ dàng nhận thấy vai trò quan trọng của Bootstrap là gì trong việc thiết kế một website chuyên nghiệp. Đó là, Bootstrap tạo nên một framework tối ưu và chắc chắc nó sẽ trở thành giải pháp thiết kế web hàng đầu được sử dụng trong tương lai gần.