Bootstrap là gì? Hướng dẫn cách dùng Bootstrap cơ bản

Lượt xem
Home

Bạn đang muốn tìm hiểu về Bootstrap là gì và cách cài đặt và sử dụng Bootstrap để thiết kế website reponsive. Bài viết dưới đây, Vietnix sẽ giúp bạn hiểu rõ hơn về Bootstrap và cách sử dụng hiệu quả nhất.

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,…

bootstrap la gi
Bootstrap là gì?

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ử về Bootstrap

Tiếp theo, ta cùng tìm hiểu về lịch sử Bootstrap một chút để hiểu rõ hơn Bootstrap là gì. 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ộ.

Lịch sử của Bootstrap
Lịch sử của Bootstrap

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) – tức là bố cục của các trang web sẽ tự động điều chỉnh theo đặc điểm của thiết bị được sử dụng (bất kể đó là desktop, tablet hay mobile).

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. Dù Bootstrap 3 không còn hỗ trợ Internet Explorer 7 và Firefox 3.6 nữa, nhưng vẫn có các polyfill cho những trình duyệt này.

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. Các bạn có thể tải Bootstrap phiên bản mới nhất tại trang web chính thức.

3 file chính 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.

tìm hiểu về bootstrap
Framework CSS giúp xử lý bố cục của website

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.

giới thiệu về bootstrap
File JavaScript là thành phần cốt lõi của Bootstrap

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

  • Dễ dàng tạo Ajax: Nhờ vào thư viện JQuery, code được viết bởi Ajax có thể dễ dàng tương tác với server và cập nhật nội dung tự động.
  • Xử lý sự kiện jQuery: Xử lý các sự kiện đa dạng mà không làm cho code HTML trở nên lộn xộn với các Event Handler.
  • 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.

Bootstrap với các thuộc tính HTML và CSS hoạt động tốt nhưng cũng cần sử dụng thêm JQuery để tạo thiết kế Reponsive hiệu quả hơn khi sử dụng CSS tĩnh.

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. Còn nếu, bạn muốn có thêm nhiều icon hiện đại, phong cách hơn thì bạn có thể mua bộ iocn Premium. Glyphicons sẽ giúp cho website trở nên sống động và đẹp hơn.

Các icons basic trong Glyphicons
Các icons basic trong Glyphicons

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, Mageto,.. 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.
  • Dễ sử dụng.
  • Tùy chỉnh dễ dàng.
  • Responsive.
  • Tương thích với trình duyệt.
  • Nguồn mở.

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. Rõ ràng rằng các developer không cần phải khổ sở xây dựng mọi thứ từ đầu, mà có thể thay đổi những thứ có sẵn ở trong thư viện Bootstrap.

bootstrap cơ bản
Bootstrap với thư viện lớn hỗ trợ và tiết kiệm thời gian cho lập trình viên

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 desgin đã có sẵn, hay là bổ sung các chức năng cho nhau…Việc này đặc biệt hữu ích khi người dùng muốn xây dựng một trang web độc đáo, những lại không đủ thời gian để tìm hiểu sâu về CSS.

thu viện bootstrap tùy chỉnh dễ dàng
Có thể tùy chỉnh file CSS Bootstrap dễ dàng

Bên cạnh đó, 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 thậm chí là 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. Vì vậy, bất kỳ sai sót nào trong thiết kế front-end đều sẽ ảnh hưởng đến tính xác thực của trang web. Từ đó làm giảm uy tín của trang web trong mắt người dùng.

reponsive trong bootstrap
Reponsive trong Bootstrap

Như đã đề cập ở các phần trước khi chúng ta giới thiệu về Bootstrap, framework này được xây dựng theo hướng “Mobile-First”, tức là ưu tiên người dùng mobile. Vì vậy 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. Vì vậy, front-end của trang web sẽ thân thiện hơn với những người dùng mobile. 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. Bên cạnh đó, các developer của Bootstrap cũng khẳng định rằng họ không hỗ trợ proxy brower cũng như những trình duyệt cũ nữa. Dẫu vậy, việc này cũng không ảnh hưởng gì đến chức năng của framework Bootstrap.

Tương thích với nhiều trình duyệt khác nhau
Tương thích với nhiều trình duyệt khác nhau

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ở. Vì vậy 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. Bên cạnh đó, chính 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 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 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ư WordPressJoomlaMagento,…Trong đó, 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. Trong phần dưới đây, Vietnix sẽ giới thiệu hai cách phổ biến để tải Bootstrap về hosting của bạn.

  • Tải Bootstrap trực tiếp.
  • Thông qua CDN Boostrap.

Tải Bootstrap trực tiếp

Bước 1: Click vào đường link dưới đây để 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: https://getbootstrap.com/docs/4.0/getting-started/download/

tải bootstrap
Download Bootstrap

Package Bootstrap bây giờ có thể được sử dụng và có thể dễ dàng tích hợp vào project. Nó bao gồm các plugin CSS và JavaScript đã được compile và rút gọn.

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

download bootstrap
Download source files

Click vào Download Source để download các file, gồm JS, CSS và một số file khác.

Bước 3: Package Managers: 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 bunder: 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. Việc này nhằm cải thiện trải nghiệm user interface và đặc biệt là JQuery nâng cao các tính năng của bootstrap, mang lại giao diện hấp dẫn hơn, phản hồi tốt hơn.

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. Đồng thời cũng có thể mở file HMTL để kiểm tra response.

Ví dụ:

<!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>

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.

<!-- 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?

Flexbox mặc định

Thông thường, layout của Bootstrap được hỗ trợ bởi các kiểu float-based. Trong các phiên bản gần đây, Bootstrap đã cung cấp một giải pháp thay thế là flexbox. Cùng với sự hỗ trợ rộng rãi của các trình duyệt, hiện nay fluxbox chính là bậc thầy của Bootstrap grid. Mặc dù công nghệ CSS đằng sau Bootstrap grid, nhưng flexbox mang lại sự linh hoạt cao hơn so với float. Do đó, các grid flexbox-based có thêm nhiều lựa chọn hơn. Chẳng hạn, người dùng sử dụng flexbox có thể định nghĩa một cột, rồi những cột tương đồng sẽ tự động thay đổi kích thước quanh nó.

flexbox bootstrap 4
Flexbox thay thế float-based

Tập trung hỗ trợ trình duyệt

Bước chuyển tiếp lên flexbox thực chất cũng cho thấy một thay đổi khác nữa của Bootstrap: browser support. Bootstrap v4 đã chính thức ngừng hỗ trợ Internet Explorer 8, 9 và iOS 6. Do đó, Bootstrap sẽ chỉ hỗ trợ IE10+ và iOS 7+ mà thôi.

Từ Less đến Sass

Người ưa thích Sass chắc hẳn sẽ hài lòng khi biết được Bootstrap đã chính thức ưu tiên các project Sass. Nếu download nguồn Bootstrap, ta sẽ thấy có một folder tên “Saas“. Trong đó, “variables.scss” chứa mọi biến và cài đặt mà ta cần, “bootstrap.scss” chứa mọi directive @import, cho phép tùy chỉnh cài đặt Bootstrap bằng cách thêm hoặc bỏ bớt bất kỳ thành phần nào.

Tier bổ sung

Bên cạnh việc chuyển sang layout float-based, khả năng response của Bootstrap cũng đi kèm với một tier bổ sung. Bây giờ, ta có thể tùy chỉnh 5 thiết lập mặc định sau:

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

Reboot

Một thay đổi đáng chú ý nữa của Bootstrap chính là file reset mới. “Reboot” chỉ thực hiện các reset của Normalize, tức là chỉ dùng những element selector, rồi xây dựng dựa trên nó với một số kiểu reset class-based được xác định (ta có thể thấy .table và .table-border nằm trong đó với mốt số kiểu khác nữa).

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

Bổ sung thẻ HTML5

Để sử dụng Bootstrap 4 cần đảm bảo có và bổ sung thêm thẻ HTML 5 doctype ở đầu trang và cùng với thuộc tính lang.

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

Bootstrap 4 mobie-first

Mobile-first là một phần cốt lõi của Bootstrap 4 và để đảm bảo hiển thị đúng và reponsive của website linh hoạt với các trình duyệt, bạn hãy thêm thẻ <meta> vào bên trong <head>:

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

Ví dụ Bootstrap 4 cơ bản

Để kiểm tra thử các ví dụ dưới đây, bạn có thể sử dụng XAMPP hoặc WAMP để chạy trên localhost và đặt tên file “example.html“. Hoặc bạn chỉ cần copy đoạn code dưới đây vào trong notepad và lưu file với đuôi “.html” và đổi Encoding thành UTF-8. Và mở file này với trình duyệt để kiểm tra thử.

Ví dụ về Bootstrap 4 sử dụng Container 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>

Ví dụ về Bootstrap 4 sử dụng Container -fluid ( 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>

Trong đó:

  • Container class: cung cấp một container với chiều rộng cố định (Responsive fixed width container).
  • Container-fluid: cung cấp một container có chiều rộng đầy đủ (Full width container).

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

Thành phần Offcanvas mới

Một trong những bổ sung mới nhất của Bootstrap 5 với thành phần offcanvas đi kèm với backdrop, nội dung scroll và vị trí định cấu hình. Offcanvas có thể được đặt ở trên cùng bên phải hoặc dưới cùng bên trái khung hình. Định dạng cấu hình các tùy chọn bằng thuộc tính dữ liệu hoặc thông qua API JavaScript.

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

Update form

Bootstrap 5 đã update hợp nhất tất cả form thành một phần để tạo thêm điểm nhấn. Với Bootstrap 5 bạn có thể tùy chỉnh form (check, radio, switches, files,…)

bootstrap 5
Update form trong Bootstrap 5

Và check những tính năng mới được update trong Bootstrap 5 như hình dưới đây.

bootstrap 5 có gì mới
Check mới được update trong Bootstrap 5

Tiện ích API mới

Bootstrap 5 triển khai tiện ích API hoàn toàn mới để mở rộng các tiện ích mặc định của Bootstrap. Dễ dàng tạo và tùy chọn các tiện ích với hỗ trợ name class, hỗ trợ tạo các class :hover.

$utilities: () !default;
$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

Nói về các tiện ích, Bootstrap 5 có thêm nhiều tiện ích vào thư viện như:

  • Thêm tiện ích: top, right, bottom, left với giá trị 0, 50%100%.
  • Thêm tùy chọn .d-grid, cùng với gap để bố trí grid-layout dễ dàng.
  • .fs được thêm cho font-size.
  • Thay đổi tên font-weight thành .fw.
  • Thêm .overflow-visibleoverflow-scroll

Với Bootstrap 5 là phiên bản mới nhất hiện nay, với nhiều thay đổi và update phù hợp với người sử dụng, với nhiều tính năng và tiện ích hơn. Giúp cho việc sử dụng Bootstrap được hiệu quả cao hơn. Trên đây là một số thay đổi mới trong bootstrap 5 và còn rất nhiều thay đổi khác.

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

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

Phần mềm nãy sẽ hỗ trợ đường link để nhúng Bootstrap trực tiếp vào website của bạn. Nhưng bị hạn chế vì tải liên kết từ bên ngoài ảnh hưởng đến tốc website bị chậm lại. Bạn có thể tham khảo ví dụ dưới đây:

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cảm ơn bạn đã quan tâm đến Vietnix</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
  </head>
  <body>
<h1>Cảm ơn bạn đã quan tâm đến Vietnix </h1>
  </body>
</html>

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

Sử dụng cách này sẽ tối ưu hoạt động và tốc độ tải trang hơn. Bạn mở folder Index.html và bố trí lại 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>Welcome to website</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" href="css/style.css"/>
  </head>
  <body>
<h1>Welcome to Website</h1>
  </body>
</html>

Câu hỏi thường gặp

Bootstrap được sử dụng để làm gì?

Bootstrap là một front-end framework mạnh được sử dụng để 
tạo các trang web và ứng dụng web hiện đại

Nó là mã nguồn mở và miễn phí, người dùng có thể dễ dàng sử dụng. Ngoài ra, Bootstrap có nhiều mẫu HTML và CSS cho các phần tử giao diện người dùng như các nút và biểu mẫu. Bootstrap cũng hỗ trợ các phần mở rộng JavaScript.

Sự khác biệt giữa HTML và bootstrap là gì?

Bootstrap là khuôn khổ của HTML, CSS và JS – các ngôn ngữ phổ biến nhất để phát triển các dự án đặc biệt dành cho thiết bị di động, website responsive. 
Mặt khác, HTML5 được coi là “bản sửa đổi thứ 5 của ngôn ngữ World Wide Web”.

Học Bootstrap có cần biết JavaScript không?

Mặc dù có thể học Bootstrap mà không cần bất kỳ kiến ​​thức JavaScript nào, nhưng bạn sẽ có thể gặp khó khăn trong việc tùy chỉnh các yếu tố hoặc tạo các phần tử web của mình nếu bạn không có kiến thức về JavaScript cơ bản.

Kết luận

Hiện nay, Bootstrap đang được sử dụng rộng rãi với vai trò là một web framework front-end. Bootstrap hỗ trợ nhiều ngôn ngữ lập trình khác nhau, đồng thời cũng không phụ thuộc vào platform. Framework này cũng có một cộng đồng hỗ trợ rộng rãi cho những người mới bắt đầu. Trang web chính thức của Bootstrap cũng bao gồm mọi bản cập nhật, các tài liệu liên quan đến những phiên bản mới…

Qua bài viết này, Vietnix chia sẻ cho bạn rất rõ và chi tiết về Bootstrap là gì, tính năng và một số update mới trong Bootstrap. Hy vọng những nội dung này sẽ giúp bạn có thêm kiến thức và sử dụng Bootstrap hiệu quả nhất. Chúc các bạn thành công.

Chia sẻ lên

Theo dõi trên

Logo Google new

Đánh giá

5/5 - (69 bình chọn)

Hưng Nguyễn

Kết nối với mình qua

Icon Quote
Icon Quote
Đăng ký nhận tin
Để không bỏ sót bất kỳ tin tức hoặc chương trình khuyến mãi từ Vietnix

Bình luận

Theo dõi
Thông báo của
guest
0 Comments
Phản hồi nội tuyến
Xem tất cả bình luận

Chỉ số tăng trưởng

Điểm Desktop

100 (+39)

Điểm Mobile

100 (+67)

Core Web Vitals

Passed

Lĩnh vực

Ecommerce

Chỉ số tăng trưởng

Điểm Desktop

99 (+28)

Điểm Mobile

100 (+50)

Core Web Vitals

Passed

Lĩnh vực

SEO

Chỉ số tăng trưởng

Điểm Desktop

99 (+26)

Điểm Mobile

98 (+59)

Core Web Vitals

Passed

Lĩnh vực

Ecommerce

Chỉ số tăng trưởng

Điểm Desktop

100 (+8)

Điểm Mobile

98 (+35)

Core Web Vitals

Passed

Lĩnh vực

Giáo Dục

Chỉ số tăng trưởng

Điểm Desktop

100 (+61)

Điểm Mobile

100 (+61)

Core Web Vitals

Passed

Lĩnh vực

Giáo Dục

Võ Thiên Tòng

25 Tháng 2 lúc 21:09

·

Mình muốn gửi lời cảm ơn chân thành đến Team Vietnix, anh Hưng Nguyễn, anh Vietnix Trung, em Quốc Huy đã hỗ trợ tối ưu Page Speed Insight (PSI) cho website vanvoiminhhoa.vn của mình.
Biết đến anh Hưng đã lâu nhưng chưa có duyên sử dụng dịch vụ bên anh. Tình cờ thấy được bài Post của anh về việc hỗ trợ tối ưu PSI miễn phí chỉ với vài Slot, thấy AE cmt khá nhiều nên cũng không nghĩ tới lượt mình. Hôm sau đánh liều inbox 1 phen xem sao thì may mắn được đưa vào danh sách. Vài ngày sau được Team Vietnix liên hệ và hỗ trợ.
Kết quả đạt được:
• Điểm xanh lè xanh lét
• Tốc độ tải trang nhanh hơn hẳn
• Các chỉ số cũng được cải thiện đáng kể
• Và mình tin rằng với việc PSI được cải thiện cũng thúc đẩy những thứ khác đi lên theo!
Mình thực sự hài lòng với dịch vụ của Vietnix và muốn giới thiệu đến tất cả mọi người:
• Dịch vụ Wordpress Hosting: Tốc độ nhanh, ổn định, bảo mật cao, hỗ trợ kỹ thuật 24/7. (https://vietnix.vn/wordpress-hosting/)
• Dịch vụ Business Hosting: Dung lượng lớn, phù hợp cho website có lượng truy cập cao, tích hợp nhiều tính năng cao cấp. (https://vietnix.vn/business-hosting/)
Đặc biệt, Vietnix đang có chương trình ưu đãi:
• Giảm giá 20% trọn đời khi nhập code THIENTONG_PAGESPEED tại trang thanh toán (Chu kỳ 12 tháng trở lên)
• Tặng 1 lần tối ưu điểm Page Speed Insight cho 1 website
Cám ơn Vietnix một lần nữa!
#Vietnix #Vanvoiminhhoa #Pagespeedinsight
Trước khi tối ưu
Sau khi tối ưu
Thiện Nguyễn - CEO SEO Dạo

5 Tháng 3 lúc 16:21

·

CORE WEB VITAL YẾU TỐ XẾP HẠNG TÌM KIẾM SEO
Core Web Vitals là một tập hợp các chỉ số đo lường hiệu suất của trang web từ góc độ người dùng, được Google sử dụng để đánh giá trải nghiệm người dùng trên các trang web. Các chỉ số chính bao gồm:
– Largest contentful paint (LCP): Tốc độ render của page. Mục tiêu là dưới 2,5 giây.
– First input delay (FID): Tốc độ phản hồi của website với tương tác của người dùng. Mục tiêu là dưới 100ms.
– Cumulative Layout Shift (CLS): Độ ổn định của bố cục trang. Mục tiêu là dưới 0.1.
Tất cả các chỉ số này đo lường các khía cạnh quan trọng của trải nghiệm người dùng trên trang web. Google đã công bố rằng từ tháng 5 năm 2021, các Core Web Vitals sẽ được sử dụng làm một trong các yếu tố đánh giá trong việc xếp hạng trang web trên kết quả tìm kiếm. Do đó, hiểu và cải thiện các Core Web Vitals là rất quan trọng đối với SEO.
Tóm lại, Core Web Vitals không chỉ giúp cải thiện hiệu suất và xếp hạng trang web trên công cụ tìm kiếm, mà còn cải thiện trải nghiệm của người dùng khi họ truy cập và tương tác với trang website.
P/s: mình đang có gói hỗ trợ đặc biệt cho anh em tối ưu tốc độ bên VIETNIX:
– Giảm 20% lifetime dịch vụ Hosting Business và Hosting Wordpress chu kỳ 12 tháng trở lên.
– Tặng 1 lần tối ưu điểm Page Speed Insight cho 1 website.
Anh em có nhu cầu đăng ký qua bạn Vietnix Trung này nhé và nhập mã SEODAO_PAGESPEED để được ưu đãi nhé.😁
Trước khi tối ưu
Sau khi tối ưu SEO Dạo
Icharm review

5 Tháng 3 lúc 15:43

·

[Mình vừa được hỗ trợ tối ưu page speed website]
Trước khi được tối ưu, web của mình điểm rất thấp, đặc biệt là mobile chỉ có 39. Cơ duyên thế nào lúc lướt face lại va phải chương trình tối ưu pagespeed bên Vietnix.
Sau khi được Trần Hoàng Phúc và team Vietnix hỗ trợ nhiệt tình, điểm web vọt lên 98 99 (như hình bên dưới). Dùng thử web thì thấy quá là mượt, 10 điểm cho team Vietnix.
Nói thật thì mình thật sự ấn tượng về sự nhiệt huyết, tận tâm và rất chuyên nghiệp bên Vietnix.
Anh em có nhu cầu về hosting hay có vấn đề về website như:
1. Web load chậm
2. Khách rời web vì đợi tải nội dung, hình ảnh lâu
3. Hay tất tần tật mọi thứ về website
THÌ LIÊN HỆ NGAY VIETNIX NHÉ!
Và đừng quên dùng pass “ICHARM_PAGESPEED” để được giảm 20% trọn đời hosting business và wp hosting. Quả code này còn được tặng 1 lần tối ưu pagespeed nữa nhé, ưu đãi chắc cũng phải nhất nhì thị trường luôn.
Trước khi tối ưu
Sau khi tối ưu
Hoàng Nguyễn

29 Tháng 2 lúc 17:04

·

Xin chào mọi người! Vừa rồi mình có sử dụng dịch vụ tối ưu website, tăng tốc độ tải trang pagespeed của Vietnix kết quả trên cả tuyệt vời nên mình viết bài này để chia sẻ thông tin với các bạn.
Lý do mình chọn dịch vụ tối ưu tốc độ website của Vietnix:
✅ Đội ngũ chuyên gia giàu kinh nghiệm: Đã tối ưu thành công cho hàng nghìn website trong nhiều lĩnh vực khác nhau. Các bạn nhân viên rất thân thiện, nhiệt tình và chủ động trong quá trình làm việc để cập nhật tiến độ.
✅ Quy trình chuyên nghiệp:
– Kiểm tra và phân tích: Vietnix sử dụng các công cụ tiên tiến để kiểm tra và phân tích tốc độ website của bạn.
– Xác định nguyên nhân: Vietnix xác định nguyên nhân khiến website tải chậm và đưa ra giải pháp tối ưu phù hợp.
– Tối ưu hóa website: Vietnix áp dụng các kỹ thuật tối ưu tiên tiến nhất để tăng tốc độ tải trang.
– Báo cáo kết quả: Vietnix cung cấp báo cáo chi tiết về kết quả tối ưu hóa website.
Công nghệ tiên tiến: Vietnix sử dụng các công nghệ tối ưu mới nhất như LiteSpeed, LSCache, Memcached, Redis, v.v.
✅ Cam kết kết quả: Vietnix cam kết tăng tốc độ website của bạn lên tối thiểu 90%.
✅ Giá cả cạnh tranh: Vietnix cung cấp dịch vụ tối ưu tốc độ website với mức giá cạnh tranh nhất trên thị trường.
📣 Để đăng ký sử dụng dịch vụ tối ưu tốc độ website và các dịch vụ khác như hosting, vps, domain… các bạn có thể đăng ký tại https://portal.vietnix.vn/aff.php?aff=57 hoặc Inbox cho sếp Vietnix Trung nhé.
Các bạn có thể kiểm tra tốc độ trang của mình https://lasan.edu.vn hoặc một vài trang khác đã sử dụng dịch vụ của Vietnix như sau:
https://pagespeed.web.dev/…/https…/v8beqewyt2…
https://pagespeed.web.dev/…/https…/etiohjvtl4…
https://pagespeed.web.dev/…/https…/yczuqpw6d1…
https://pagespeed.web.dev/…/https…/xf9y65kuzk…
https://pagespeed.web.dev/…/https…/fdrsms15en…
https://pagespeed.web.dev/…/https…/s7p9cgzeri…
Trước khi tối ưu
Sau khi tối ưu
Dũng cá xinh

30 Tháng 1 lúc 19:09

·

[Đỉnh]
Em có dùng hosting, vps, cloud vps, cloud server, dedicated server của rất nhiều bên từ trong nước đến nước ngoài để hosting khoảng 2,000+ domain. Mỗi bên đều có ưu nhược khác nhau, nhưng có 1 số bên đặc biệt “bá đạo”, trong đó có: Vietnix!!!!

Lần đầu tiên em được cả CEO Hưng Nguyễn lẫn Master về dev Vietnix Trung của 1 đơn vị hàng đầu liên quan đến Hosting, Server support từ A – Z (từ Zalo, Tele, đến FB và cả Phone)

Em có khá nhiều web dạng Big Data (bài, ảnh, database, data) lên đến hàng trăm Gb. Càng to thì nó càng có nhiều vấn đề về phần phản hồi ban đầu (nhược điểm cố hữu của php wordpress so với nativejs, reactjs, html, headless,…), và anh em Vietnix có nhã ý hỗ trợ xử lý phần Speed Insight này.

Kết quả thực sự kinh ngạc, từ cách trao đổi đến xử lý vấn đề, cut off những cái cần cut off, xử lý rất sâu vấn đề và gợi ý rất nhiều ý tưởng optimize hệ thống!!!! Thực sự quá hài lòng về kết quả cũng như cách tương tác của các đầu tầu bên Vietnix ^^!!!

Nhân cơ duyên được kết nối với những cao thủ của Vietnix, em xin chia sẻ và lan tỏa để nhiều anh em có cơ hội được sử dụng những dịch vụ tốt nhất với giá vô cùng hợp lý!!!!

1 – Với anh em chưa có hosting, em đặc biệt recommend sử dụng hosting bên Vietnix:
– Sử dụng mã DUNGCAXINH_PAGESPEED sẽ được giảm 20% trọn đời (lifetime luôn)
– Áp dụng các gói Hosting Business, Hosting wordpress và reg 1 năm trở lên
– Anh em chưa biết cách reg thì còm men hoặc ib để em hướng dẫn hoặc nhờ các bạn bên Vietnix support từ A – Z

2 – Anh em có hosting rồi và muốn build blog hoặc web = wordpress mà chưa có giao diện thì nhân tiện em đang có tài khoản Premium bên Envato, em sẽ tặng bất kỳ giao diện nào có trên Envato Themes (Link em để dưới còm men) ạ. Cả nhà còm hoặc ib em Themes mà mọi người “chim ưng”, em sẽ cho anh em tải về, up drive và gửi ạ!!! (Chương trình này kéo dài đến ngày 29 tết âm lịch ạ)

3 – BEST NHẤT luôn!!!! Anh em nào mua hosting dùng mã DUNGCAXINH_PAGESPEED sẽ được tối ưu 100 điểm tốc độ cho 1 web (đây là ưu đãi riêng của CEO Hưng Nguyễn dành cho bạn bè của #dungcaxinh ^^) (Giá trị nhất là cái vụ số 3 này anh chị em nhé ^^), cơ hội vàng để move về đơn vị hosting uy tín là đây ^^!!!!

Một lần nữa xin chân thành cám ơn 2 đồng chí em: Hưng Nguyễn và Vietnix Trung đã giải được một bài toán khó cho các trang WP Big data mà anh loay hoay bao lâu nay chưa tìm ra đáp án!!! Chúc Vietnix ngày càng phát triển và có một năm 2024 đại đại thắng nhé ^^ !!!!!
#SEO #Vietnix #dungcaxinh

Trước khi tối ưu
Sau khi tối ưu
Hiếu AI

2 Tháng 2 lúc 21:06

·

UY TÍN – TẬN TÂM – TỐC ĐỘ

3 từ trên là vẫn chưa đủ để nói về quy trình làm việc cực chuyên nghiệp của team Vietnix.Chuyện là mình có con website chính đang có lượt truy cập organic hàng ngày cũng tương đối (hình 1)

Vấn đề là, con site này đang nằm trên hosting dùng chung nên tốc độ load chưa nhanh, tốc độ load chưa nhanh thì trải nghiệm visitor chưa tốt, trải nghiệm visitor chưa tốt thì tỷ lệ chuyển đổi ra đơn hàng kiểu gì thì kiểu cũng sẽ bị ảnh hưởng.

Biết rõ là đang mất tiền nhưng không biết xử lý như lào, nghĩ mà cay.

Đang loay hoay thì vận may nó tới, hôm qua đang lướt phở bò thấy a Nguyễn Việt Dũng đăng bài, rảnh nên thả cái comment hóng hớt, ai ngờ ngoằng phát thấy ông Dũng tạo nhóm với Vietnix Trung luôn.

Ae Vietnix thì siêu tốc độ, lập tức lấy thông tin vào việc, không hỏi han lằng nhằng, không kỳ kèo chốt đơn dù lúc đấy cũng đang đêm muộn.
Sáng hôm sau dậy vẫn còn đang lơ ngơ mở điện thoại check tin nhắn thì đã thấy ae Vietnix báo xong việc, trong khi mình vẫn chưa biết có chuyện gì xảy ra @@.

Được cái bấm thử website thì thấy load siêu nhanh, chưa tới một giây là thông tin các thứ hiện hết. Quá phê, thả con ảnh trước sau (hình 2,3) để ace tiện đối chiếu nhé. Thế này thì mình gửi gắm nốt 15 em website còn lại cho team Vietnix thôi chứ không cần nghĩ ngợi gì nữa. 10/10.

Nên là:

  1. Anh chị em muốn có một con website tốc độ load nhanh như tốc độ trở mặt của nyc – Dùng ngay dịch vụ hosting của Vietnix
  2. Anh chị em có website rồi muốn tìm bên hosting uy tín, chuyên nghiệp hỗ trợ không quản ngày đêm – Liên hệ ngay Vietnix Trung
  3. Anh chị em quan tâm đến trải nghiệm khách hàng, từ những cái nhỏ nhất như tăng tốc độ website – Better call Vietnix Trung

Và đừng quên dùng pass “HIEUAI_PAGESPEED” để được giảm 20% trọn đời hosting business và wp hosting, quả code này còn được tặng 1 lần tối ưu pagespeed nữa nhé, ưu đãi chắc cũng phải nhất nhì thị trường luôn.
#SEO #Vietnix #hieuai

Website
Trước khi tối ưu
Sau khi tối ưu

Chỉ số tăng trưởng

Điểm Desktop

100 (+43)

Điểm Mobile

100 (+74)

Core Web Vitals

Passed

Lĩnh vực

AI