Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Giới Thiệu Bootstrap 4

Giới Thiệu Bootstrap 4


Ngày 24 Tháng 3 Năm 2020

Giới thiệu Bootstrap 4

Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu một framework của css và hoàn toàn miễn phí có tên là Bootstrap. Nào hãy cũng mình tìm hiểu nhé!

Framework Bootstrap 4

Tại sao mình lại lựa chọn Bootstrap?

  • Bootstrap được xây dựng trên những ngôn ngữ thông dụng về web đó là CSS, HTML và Javascript.
  • Nó sẽ giúp các bạn phát triển giao diện nhanh, đẹp hơn và responsive(đáp ứng) được nhiều màn hình của những thiết bị khác nhau.
  • Mobile First: có thể hiệu là nó sẽ đặt giao diện điện thoại ưu tiên hàng đầu.
  • Nó cũng tương thích với đa số trình duyệt hiện đại hiển nay như là Chrome, Firefox, Internet Explorer 10+, Edge, Safari, Opera...
Nào các bạn hãy cùng mình sang phần tiếp theo để tìm hiểu cách cài đặt bootstrap 4 nhé!

Cài đặt bootstrap4

Sau đây mình sẽ hướng dẫn các bạn những cách để sử dụng cho trang web của mình nhé:

Cách 1:

Đó là chúng ta sẽ sử dụng CDN để thiết lập trực tiếp vào trang HTML mà không cần cài đặt nào cả. Cách này cũng hay được mình sử dụng vì ta không cần phải lo lắng việc tải file và liên kết file mà chỉ tập trung vào việc sử dụng nó. Tuy vậy cũng có một số hạn chế là các bạn sẽ không sử dụng được nếu máy tính không có mạng, không thể tối ưu hay tinh chỉnh những file đặt trên host CDN và có thể ảnh hưởng đến bảo mật và quyền riêng tư nếu các bạn sử dụng host CDN không đáng tin cậy.

CSS:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Javascript và Jquery:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Mình có lưu ý nhỏ là với CSS thì các bạn sẽ đặt nó trong thẻ <head> và ba đường dẫn javascript thì chúng ta sẽ đặt ở vị trí cuối cùng trong thẻ <body> để tốc độ tải trang được tối ưu hơn nhé. Các bạn cũng có thể copy đường dẫn Bootstrap4 tại đây.

Cách 2:

Cách tiếp theo là mình sẽ tải file trực tiếp từ Bootstrap và liên kết nó với HTML. Các bạn cứ liên kết tới các file Bootstrap như file .css, .js bình thường nha. Nếu các bạn muốn sử dụng phiên bản tối ưu giúp giảm nhẹ dung lượng của file bootstrap thì sẽ sử dụng bootstrap.min.css và bootstrap.min.js. Còn không thì chúng ta sẽ sử dụng file dạng đuôi chỉ là .css, .js. Vậy các bạn có đang thắc mắc là hai file này khác nhau như thế nào và có ảnh hưởng đến việc sử dụng Bootstrap không?
Thì theo mình tìm hiểu thì đối với file .min thì nó sẽ bỏ đi những dấu cách không cần thiết cũng như rút ngắn code ngắn nhất có thể làm cho file giảm dung lượng nhưng khó đọc, còn loại còn lại thì mình khuyên các bạn nên sử dụng vì giúp chúng ta dễ nhìn cũng như dễ tinh chỉnh hơn. Để không mất thời gian thì mình có tạo một trang trang_chu.html đã liên kết sẵn với bootstrap. Các bạn có thể tải ở dưới đây nhé:
Đường dẫn tải file Bootstrap 4

Cách 3:

Chúng ta sẽ sử dụng npm để cài file bootstrap 4 cho dự án web của mình(Với các bạn mới bắt đầu tìm hiểu thì nên sử dụng hai cách trên nhé!). Nhưng để sử dụng được các bạn phải cài Node js và npm nha. Đường dẫn ở đây nhé:
Nodejs
Npm

Và đây là cách mà chúng ta sẽ cài đặt:

npm init
npm install bootstrap

Các bạn có thể tìm hiểu thêm những cách tải và sử dụng khác ở trang Bootstrap

Hệ thống lưới trong Bootstrap 4:

Đây có thể coi là điểm nổi bật và thường được sử dụng thường nhiều nhất trong Bootstrap, nó giúp chúng ta tự động cân bằng các vị trí của nội dung web theo cả chiều dọc cũng như chiều ngang trên nhiều loại màn hình thiết bị khác nhau. Cấu trúc lưới sẽ được hình thành bởi 3 yếu tố chính là container, row và column. Để dễ hình dung các bạn sẽ xem container như là một bảng HTML và nó được chia theo chiều ngang bởi thuộc tính row(dòng) như tr. Mỗi dòng sẽ chứa các cột như td nhưng chỉ đối đa là 12 cột trên mỗi dòng nhé. Để dễ hình dung các bạn cùng mình xem ảnh dưới đây nha:

Grid System Bootstrap 4

Các bạn chú ý là rows(dòng) phải luôn nằm bên trong container và các column(cột) cũng chỉ xuất hiện trong rows(dòng) thôi nhé. Và nó không giống như bảng HTML, các bạn có thể tự do xác định số cột có trong một dòng chứ không nhất thiết là phải 12 cột trong một dòng.

Container:

Theo nghĩa dịch thì nó là nơi chứa, thùng chứa nhưng để giữ được bản chất của nó thì mình vẫn sẽ gọi là container nhé. Như theo mình nghĩ thì các bạn có thể hình dung là nó sẽ là nơi chứa tất cả các nội dung khác như row(dòng), cột(column), hình ảnh, văn bản... Một điều quan trọng là nó sẽ hiển thị nội dung theo chiều rộng cố định trên từng màn hình khác nhau.

Vậy làm sao nó xác định được những màn hình khác nhau trên trang web?

Nếu các bạn đã học qua CSS thì có lẽ sẽ biết thuộc tính là @media only screen and (max-width: ...px) giúp chúng ta hiển thị nội dung, cỡ chữ, kích cỡ hình ảnh... khác nhau cho các màn hình thiết bị khác nhau. Nếu chưa biết các bạn có thể tìm hiểu ở đây nhé: Tìm hiểu @medias creen. Do tiện ích đó Bootstrap đã giúp chúng ta xác định những màn hình cơ bản thông dụng và chuẩn nhất cho web bằng việc chúng ta chỉ còn gọi class của màn hình tương ứng. Để dễ hình dung các bạn xem bảng sau đây nhé:

Loại màn hìnhCách gọi CSSClass trong Bootstrap 4
Điện thoại@media (min-width: 576px) { ... }.col-sm-
Máy tính bảng@media (min-width: 768px) { ... }.col-md-
Desktop@media (min-width: 992px) { ... }.col-lg-
Desktop lớn@media (min-width: 1200px) { ... }.col-xl-

Bây giờ để dễ hình dung thì các bạn hãy thử xem hai thẻ div thông thườngdiv có class container ở dưới đây nhé:

See the Pen Introduce bootstrap 4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Dù các bạn có thu nhỏ hay phóng to thì div có class container sẽ luôn nằm giữa và cách một khoảng nhất định với hai bên lề trái và tùy theo màn hình mà khoảng cách đó nhiều hơn hay ít hơn. Các bạn có thể xem chiều dài cố định của mỗi container cho kích cỡ màn hình khác nhau ở đây nhé: Độ rộng của container

Row(dòng):

Row(dòng) sẽ nhóm các đối tượng khác vào trong một hàng và nó sẽ luôn nằm trong thẻ <div class="container">. Theo mình hiểu nó còn giúp chúng ta xác định độ cao của <div class="container"> như thẻ <tr> trong bảng và không giới hạn số lượng nhé. Để hiểu rõ hơn thì các bạn xem ví dụ sau đây nhé:

See the Pen Row Bootstrap4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để xem màn hình khác nhau các bạn nhấn trên Codepen ở dưới cùng là 1x, 0.5x, 0.25x để xem sự thay đổi nha.

Column(cột):

Đây được xem là phần quan trọng nhất trong hệ thống lưới nó sẽ quyết định của chúng ta sẽ hiện thị như thế nào trên các màn hình khác nhau. Một dòng trong Bootstrap sẽ được chia thành 12 cột. Để dễ hình dung các bạn xem ví dụ sau đây nhé:

See the Pen column bootstrap4 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Để xem màn hình khác nhau các bạn nhấn trên Codepen ở dưới cùng là 1x, 0.5x, 0.25x để xem sự thay đổi nha. Ở đây mình sẽ giải thích về col-sm-1 một tí là:

  • col: Ta sẽ gán một đối tượng(element) như một cột trong dòng.
  • sm: Nó sẽ áp dụng cho tất cả màn hình bằng hoặc lớn hơn 576px.
  • 1: Nó sẽ có độ rộng của 1 cột(chiều dài của 1/12 dòng).

Tại sao khi để Codepen chế độ 1x nó lại không hiện 12 cột trên dòng mà lại hiện 12 dòng?

Đó là do màn hình hiển thị kết quả của Codepen lúc này nhỏ hơn 576px nên nó sẽ không áp dụng 12 cột cho một dòng. Để sử dụng cho màn hình nhỏ hơn 576px thì ta sẽ sử dụng thuộc tính là .col. Để dễ hình dung các bạn xem ví dụ dưới đây nhé:

See the Pen column bootstrap4 2 by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thì thuộc tính này giúp nó tự động chia các dòng thành những phần bằng nhau theo kích thước của màn hình mà web hiển thị.

Vậy nếu tôi nhập 13 dòng cho một cột thì sao?

Thì cột thứ 13 của các bạn sẽ tự động xuống dòng tiếp theo.

Làm sao để chia 3 cột nằm một dòng của Bootstrap?

Ở đây các bạn sẽ làm một phép tính nho nhỏ là 1 dòng thì chứa 12 cột vậy độ rộng 3 cột trong một dòng của bạn sẽ bằng 12/3 = 4. Sau khi có độ rộng thì chúng ta sẽ gọi class .col-4. Để hiểu rõ hơn các bạn xem ví dụ dưới đây nhé:

See the Pen divide pen column by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ giúp các nắm được sơ lược về Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!