Tại sao chúng ta sử dụng bootstrap

Hiện nay số lượng người sử dụng thiết bị lướt web ngày càng tăng, chính vì thế việc thiết kế đáp ứng trong Bootstrap cho trang web ngày càng trở nên quan trọng hơn bao giờ hết. Để làm được như vậy, bạn sẽ cần sự trợ giúp từ Bootstrap

Show

Vậy Bootstrap là gì? . Hãy cùng tôi tìm hiểu về Bootstrap ngay nhé

1. Bootstrap là gì?

Bootstrap là một loại front-end framework rất phổ biến. Nó được sử dụng để xây dựng trang web đáp ứng tiêu chuẩn và Mobile First

Bootstrap thuộc dạng mã nguồn mở và sử dụng miễn phí. Dự án này được Twitter tạo và lưu trữ trên GitHub. Nó bao gồm các mẫu HTML, CSS và JavaScript có sẵn

Tại sao chúng ta sử dụng bootstrap
Tại sao chúng ta sử dụng bootstrap

Tìm hiểu bootstrap là gì?

Các mẫu này chứa các yếu tố thiết kế cơ sở web bên trong như biểu mẫu, lưới, nút,… và các cài đặt về giao diện như màu sắc, độ cao, kích thước,… Các nhà thiết kế có thể dựa vào các thành phần có sẵn

2. History of Bootstrap

Bootstrap được xây dựng bởi Twitter. Cha đẻ của sản phẩm này là Mark Otto và Jacob Thornton

Sau khi mã nguồn mở được phát hành vào ngày 19/8/2011 với tên Twitter Blueprint, framework này đã nhanh chóng trở nên phổ biến nhờ tính linh hoạt và khả năng ứng dụng của nó

Kể từ khi ra đời, bootstrap đã cho nhiều hơn hai mươi bản phát hành, bao gồm ba bản viết lại chính là phiên bản 2, 3 và 4

  • Bootstrap 2 được công bố vào ngày 31/1/2012. Bản này được bổ sung lưới lưới 12 cột, các thành phần thiết kế đáp ứng và một số thành phần hiện có cũng được thay đổi
  • Bootstrap 3 được công bố vào ngày 19/8/2013. Bản này chuyển sang cách tiếp cận thiết bị di động đầu tiên và sử dụng định dạng thiết kế phẳng
  • Vào ngày 29 tháng 10 năm 2014, Mark Otto thông báo Bootstrap 4 đang được phát triển. Phiên bản alpha đầu tiên của Bootstrap 4 được khai thác vào ngày 19 tháng 8 năm 2015 và xuất bản vào ngày 19 tháng 1 năm 2018
  • Bản này chuyển sang sử dụng CSS Preprocessor Sass và CSS flexbox để tối ưu hóa khả năng đáp ứng của thiết kế web

3. 3 file main của Bootstrap

Cấu hình cấu trúc Bootstrap khá đơn giản và dễ hiểu. Nó bao gồm các tệp đã được biên dịch trước đó, các tệp này dễ dàng được tích hợp vào các dự án xây dựng web để công việc thiết kế được diễn ra nhanh chóng.

Bên cạnh file CSS và JS, Bootstrap còn có file font chữ từ Glyphicons

Tại sao chúng ta sử dụng bootstrap
Tại sao chúng ta sử dụng bootstrap

Các tập tin của bootstrap

Khi tải bootstrap 3 và bootstrap 4 về, giải nén sẽ cho ra các thư mục tương tự như hình trên. Trong đó sẽ có thư mục CSS, JS và font chữ (Glyphicons)

3. 1 Bootstrap. CSS

HTML và CSS là bộ đôi cần xuất hiện giống nhau để có thể thực hiện một hành động xác định

Chức năng của HTML là quản lý cấu trúc còn CSS có chức năng là xử lý bố cục trang web. Bạn có thể sử dụng tệp CSS này để tạo giao diện mà không cần phải nạp quá nhiều thời gian

Bootstrap cung cấp các tệp có định dạng CSS trong thư mục CSS, chúng bao gồm nhiều lớp khai báo sẵn có. Bootstrap. tối thiểu. css is file quan trọng nhất trong thư mục này

3. 2. Bootstrap. JS

JS (JavaScript) có chức năng quản lý công việc tương tác của trang web. Các nhà thiết kế thường sử dụng jQuery để rút ngắn thời gian viết JS. Khi sử dụng Bootstrap, bạn cần có sự hỗ trợ từ jQuery để thiết kế Responsive. Chúng sẽ có một số chức năng như

  • Hỗ trợ tạo tiện ích bằng Plugin JavaScript
  • Tạo thông số thông qua thuộc tính CSS và tính năng cho nội dung của trang
  • Thực hiện các yêu cầu của Ajax

Thư mục JS của Bootstrap sẽ bao gồm các file JS mà trong đó có rất nhiều hàm khai báo sẵn. Bootstrap. tối thiểu. js is file quan trọng nhất trong thư mục này

3. 3. Glyphicons

Khi thiết kế website, icon là một trong những phần không thể thiếu để giúp trang trở nên sinh động hơn

Bạn có thể liên kết chúng với dữ liệu phù hợp nhất hoặc phù hợp với hành động của người dùng để tăng cường hoạt động của trang

Bộ biểu tượng tại Glyphicons này xuất hiện trong bootstraps 3. Qua bootstrap 4 chúng được thay thế bởi các loại biểu tượng khác. Bạn cũng có thể tìm mua thêm bộ biểu tượng cao cấp để sử dụng cho trang web của mình

4. Cấu hình, tính năng của Bootstrap là gì?

Ở phần này tôi sẽ tập trung vào phiên bản biên dịch trước, bạn có thể tải về tại. Khi đã tải xuống và giải nén, cấu trúc tệp cơ bản sẽ như sau

khởi động /

├── css/

│   ├── khởi động. css

│   ├── khởi động. css. bản đồ

│   ├── khởi động. tối thiểu. css

│   ├── bootstrap-theme. css

│   ├── bootstrap-theme. css. bản đồ

│   └── bootstrap-theme. tối thiểu. css

├── js/

│   ├── khởi động. js

│   └── khởi động. tối thiểu. js

└── phông chữ/

├── glyphicons-halflings-regular. eot

├── glyphicons-halflings-regular. svg

├── glyphicons-halflings-regular. tf

├── glyphicons-halflings-regular. đánh trống lảng

└── glyphicons-halflings-regular. woff2

Như đã nói ở phần trước, cấu trúc của Bootstrap khá đơn giản và dễ hiểu

Nó bao gồm các tệp đã được biên dịch trước đó và dễ dàng áp dụng vào việc xây dựng trang web. Ngoài 3 loại tệp chính là CSS, JS và phông chữ từ Glyphicons, nó còn bao gồm chủ đề khởi động Bootstrap

Bạn có thể kết hợp cấu trúc này vào các tệp dự án riêng của mình một cách dễ dàng bằng cách giữ nguyên các tệp Bootstrap như trong tệp. Nếu bạn muốn nó phù hợp hơn với dự án, bạn có thể sắp xếp lại các tệp này và đặt vào vị trí mà bạn chọn là phù hợp

Lưu ý. font chữ thư mục phải ở cùng cấp với thư mục CSS

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

Bootstrap là framework rất nổi tiếng và được sử dụng rộng rãi trên thế giới. Vì lý do đó khiến Bootstrap được gọi là gì?

5. 1. Responsive Grid của Bootstrap

Không cần phải tốn nhiều thì giờ để tự mình mã hóa lưới nữa – Bootstrap cung cấp cho bạn hệ thống lưới riêng biệt. Bây giờ bạn chỉ việc bắt đầu lấp đầy những chỗ trống trong thiết kế của mình bằng những đoạn mã này

Xác định điểm ngắt (breakpoint) tùy chọn chỉnh sửa cho mỗi cột sẽ được tiến hành trong nháy mắt. Bootstrap cung cấp các loại ngắt nhỏ, siêu nhỏ, vừa, lớn và siêu lớn để bạn có thể áp dụng tùy chọn

Nếu bạn không có yêu cầu chi tiết, thì sử dụng tệp mặc định cũng sẽ đáp ứng đầy đủ nhu cầu trang web

5. 2. Responsive Image của Bootstrap

Bootstrap chứa các mã riêng, các mã này sẽ tự động thay đổi kích thước hình ảnh tùy theo màn hình thiết bị

Bạn chỉ cần thêm lớp. img-responsive vào hình ảnh, các quy tắc CSS (đã được xác định trước) sẽ giúp bạn hoàn thành công việc còn lại

Bootstrap thậm chí có thể thay đổi cả định dạng của ảnh bằng cách bổ sung các lớp như img-circle và img-round vào ảnh (mà bạn không cần phải vừa sửa mã vừa sửa ảnh trong phần mềm thiết kế)

5. 3. Các thành phần của Bootstrap

Các thành phần của Bootstrap là gì? . Ví dụ như

  • Thanh điều hướng – Thanh điều hướng
  • Dropdowns – Menu thả xuống
  • Progress bar – Thanh tiến trình
  • Hình thu nhỏ

…và còn nhiều thành phần khác nữa

Bạn không chỉ dễ dàng thêm các yếu tố thiết kế đẹp mắt vào trang web mà còn có thể yên tâm về chất lượng hiển thị của chúng trên các loại màn hình thiết bị. Bạn sẽ không phải lo lắng về việc nó hiển thị trên điện thoại có đẹp như khi bạn xem trên màn hình máy tính hay không

Rõ ràng, các chức năng này được tạo sẵn để bạn sử dụng

Nếu bạn muốn biết đầy đủ hơn về các tính năng bổ sung, bạn có thể tham khảo tại bảng tài liệu thành phần

5. 4. JavaScript của Bootstrap

Bạn thấy các chức năng được liệt kê trong bảng thành phần vẫn chưa đủ hấp dẫn?

Bootstrap cho phép các nhà phát triển tận dụng lợi thế của các plugin JQuery

JQuery sẽ cung cấp cho bạn nhiều chức năng hơn nữa để bạn có thể nâng tầm tương tác của trang web

Nó đưa ra các giải pháp dễ dàng để tạo cửa sổ bật, chuyển tiếp, băng hình ảnh và – một trong những mục yêu thích của các nhà thiết kế – plugin scrollspy. Plugin này tự động cập nhật thanh điều hướng khi bạn cuộn trang

5. 5. Tài liệu Bootstrap

Tài liệu Bootstrap là một trong số những tài liệu được cho là hoàn chỉnh nhất. Tất cả các đoạn mã đều được mô tả và giải thích rõ ràng trên trang web của họ

Các phần giải thích cũng đi kèm các ví dụ phát triển cơ bản, giúp đơn giản hóa quá trình cho những người mới bắt đầu

Tất cả những gì bạn cần làm là chọn một thành phần sau đó sao chép và dán mã vào trang của mình

5. 6. Khả năng tùy chỉnh của Bootstrap

Một trong những khuyết điểm của những framework như Bootstrap là. size

Vì kích thước tệp lớn nên chúng sẽ làm chậm ứng dụng của bạn trong lần tải đầu tiên

Ví dụ. Phiên bản hiện tại của file CSS Bootstrap 3 là 119KB. Mặc dù con số này nghe có vẻ không lớn khi so với các tệp hình ảnh và video, nhưng đối với một tệp CSS, con số này quá lớn

Tuy nhiên, Bootstrap đã khôi phục lại chức năng gỡ gạc lại nhờ người dùng cho phép tùy chỉnh chức năng khi tải xuống. Tức là bạn có thể lựa chọn các chức năng mà bạn muốn đưa vào bản tải xuống

Bạn có thể kiểm tra và tùy chỉnh ngay trang web Bootstrap và bỏ qua các tính năng không được sử dụng để giảm trọng lượng tệp

Khả năng chỉnh sửa này đã giúp người dùng Bootstrap tiết kiệm điện năng được tải xuống trong nhiều thời gian. Ở đây, tùy chỉnh chính là chìa khoá giúp Bootstrap nổi bật hơn so với các framework khác

5. 7. Bootstrap Bootstrap

Cũng giống như các dự án mã nguồn mở khác, Bootstrap có cộng đồng người sử dụng lớn (lập trình viên và các nhà phát triển)

Khung này được lưu trữ trên GitHub, nhờ đó mà các nhà phát triển có thể dễ dàng sửa đổi và đóng góp cho codebase của Bootstrap

Với lượng người dùng lớn, các câu hỏi đặt ra cũng nhận được nhiều phản hồi và tương tác hơn. Sự giao lưu giữa những người dùng cũng được thể hiện rõ ràng thông qua các chủ đề Bootstrap đông người tham gia

Ngoài ra, Bootstrap còn có một trang Twitter đang hoạt động, một Blog Bootstrap và chắc chắn có một phòng Slack chuyên dụng. Từng đó là chưa đủ để nói đến mức độ phổ biến của khung này. ở

Stack Overflow – cộng đồng hỏi đáp giúp đỡ lập trình viên lớn nhất thế giới – bạn có thể tìm thấy câu trả lời cho những câu hỏi đơn giản như Bootstrap nghĩa là gì đối với các câu hỏi về hướng dẫn sử dụng Bootstrap cơ bản như tạo vùng

5. 8. Template bên ngoài Bootstrap

Khi sự phổ biến của Bootstrap ngày càng tăng, mọi người bắt đầu tạo các mẫu dựa trên khung này để thúc đẩy nhanh quá trình phát triển web

Có rất nhiều trang web dành riêng cho việc chia sẻ và mua bán các mẫu tùy chỉnh dựa trên Bootstrap như

  • Các mẫu Bootstrap của W3Schools
  • Bắt đầu các mẫu Bootstrap
  • Bọc các mẫu Bootstrap

Tại sao chúng ta sử dụng bootstrap
Tại sao chúng ta sử dụng bootstrap

Template bên ngoài của Bootstrap

6. Lý do không nên sử dụng Bootstrap là gì?

Đến thời điểm này, có thể bạn đang cho rằng việc sử dụng Bootstrap là quyết định đúng đắn, không cần phải bàn cãi. Nhưng đồng tiền nào cũng có hai mặt

Như hầu hết tất cả mọi thứ xung quanh ta, Bootstraps cũng có những mặt trái. Hãy cùng tôi tìm hiểu nhanh những khuyết điểm mà người dùng đang hoang phí về Bootstrap là gì nhé

6. 1. Cú pháp Bootstrap dễ gây nhầm lẫn

Trước khi bạn sử dụng quen Bootstrap, một số cú pháp của nó có thể gây nhầm lẫn

Ví dụ. Khi sử dụng lưới hệ thống, để tạo một cột chiếm một phần ba màn hình, bạn phải thêm lớp. col-md-4 to it. 4?

Cú pháp này sẽ khiến bạn nghĩ rằng cột sẽ chiếm một phần tư màn hình chứ không phải là một phần ba

Bạn cho rằng cú pháp này rõ ràng có ý nghĩa gì hết. Nhưng không, thực tế nó lại đúng. Bootstrap sử dụng hệ thống 12 cột. Vì thế 4 là một phần ba của 12

Giống như bạn, có nhiều người mới gặp không ít khó khăn với những cú pháp này

6. 2. Bootstrap File too large

Như đã đề cập ở phần trước, các tệp Bootstrap có thể hơi… lớn nếu bạn tải toàn bộ chức năng của nó. Điều này có thể dẫn đến việc tăng thời gian tải cho các trang web, đặc biệt là trên các mạng chậm

Người mới bắt đầu có thể gặp khó khăn trong việc xác định và giải quyết vấn đề này;

Tuy nhiên, như đã đề cập ở trên, công cụ tùy chỉnh trên trang web của Bootstrap có thể giúp loại bỏ mọi đoạn mã không cần thiết. Chỉ cần bạn biết mình đang cần gì

6. 3. Bootstrap Stop Stop your learning code

Có một rủi ro xảy ra là bạn sẽ rơi vào chu kỳ tái chế. Khi sử dụng Bootstrap, bạn sẽ quen với việc tái chế mã hiện có mà không thực sự hiểu nó là gì

Vì thế, bằng cách dành thời gian để thực hiện việc tìm hiểu các đoạn mã bạn đang làm, bạn có thể sử dụng Bootstrap như một cách để tăng tốc quá trình học của mình, thay vì cản trở nó đấy.

Tại sao chúng ta sử dụng bootstrap
Tại sao chúng ta sử dụng bootstrap

Bootstrap has Stop your learning code

7. Cách cài đặt Bootstrap

Bạn đã xem qua những kiến ​​thức cơ bản liên quan đến Bootstrap, bây giờ chúng ta cần thực hiện

Có hai cách để bạn có thể cài đặt Bootstrap vào trang web của mình

7. 1. Tải xuống Bootstrap từ trang web

Nếu bạn muốn tự tải và lưu trữ Bootstrap, hãy truy cập getbootstrap. com và làm theo hướng dẫn. Or you could

7. 2. Cách sử dụng Bootstrap thông qua CDN

Nếu bạn không muốn tải và lưu trữ Bootstrap, bạn có thể bổ sung chúng từ CDN (Mạng phân phối nội dung – Mạng phân phối nội dung). Có nhiều dịch vụ CDN mà bạn có thể lựa chọn (ví dụ như CloudFlare, MaxCDN,. )

Ví dụ như MaxCDN, dịch vụ này cung cấp hỗ trợ phân phối nội dung cho CSS và Javascript của Bootstrap. Bạn cũng sẽ cần thêm jQuery (Bootstrap sử dụng jQuery cho các plugin JavaScript

Tuy nhiên, nếu bạn chỉ sử dụng phần CSS của Bootstrap, bạn không cần jQuery)

MaxCDN

<. – CSS được biên dịch và rút gọn mới nhất –>

<. – Thư viện jQuery –>

<. – JavaScript được biên dịch mới nhất –>

Có nhiều lập trình viên chọn cách này để tiết kiệm băng thông. Khi sử dụng bootstrap thông qua CDN, bootstrap sẽ được tải xuống từ bộ nhớ cache khi người dùng truy cập trang web của bạn, dẫn đến thời gian tải nhanh hơn

Ngoài ra, hầu hết các CDN sẽ đảm bảo rằng khi người dùng yêu cầu một tệp, tệp đó sẽ được phục vụ từ máy chủ gần họ nhất, điều này cũng dẫn đến thời gian tải nhanh hơn

8. Bootstrap 4 có gì mới?

Twitter của Bootstrap đã đăng thông báo về việc phát hành Bootstrap 4 vào ngày 19/1/2018

Chúng tôi chưa bao giờ ngừng tin tưởng và hy vọng bạn cũng vậy. Bootstrap 4. 0. 0 cuối cùng đã cập bến. https. //t. co/zFAOxpyhvD

- Bootstrap (@getbootstrap) ngày 18 tháng 1 năm 2018

Bản Bootstrap 4 này được nâng cấp với nhiều tính năng mới và thú vị hơn so với các phiên bản cũ như sau

  • Thay thế bộ tiền xử lý LESS bằng SASS để đẩy nhanh quá trình biên dịch
  • Sửa đổi tên cho bộ lưới và thêm lớp cho màn hình nhỏ hơn
  • Bỏ hỗ trợ IE8 (chuyển qua sử dụng REM và EM thay thế pixel)
  • Giảm kích thước tập tin. dung lượng file Bootstrap. tối thiểu. CSS only but 88KB
  • Cung cấp thẻ Bootstrap mới. thẻ
  • Hỗ trợ Flexbox
  • Thêm các lớp tiện ích mới
  • Cấu hình lại các plugin JavaScript

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

Nếu bạn đã tải mã nguồn của Bootstrap 4, thì tệp cấu trúc sẽ như bên dưới

Tại sao chúng ta sử dụng bootstrap
Tại sao chúng ta sử dụng bootstrap

Constructor file of bootstrap

  • Các tệp bên dưới js/ và scss/ là mã nguồn cho Bootstrap CSS và JavaScript
  • Thư mục dist/ bao gồm các tập tin được biên dịch đã nói ở trên
  • Thư mục docs/examples/ chứa mã nguồn và tài liệu, cách sử dụng Bootstrap

Cách tạo trang web với Bootstrap 4

Ví dụ

<đầu>

<. – Thẻ meta –>

<. – CSS Bootstrap –>

href = “https. // ngăn xếp. bootstrapcdn. com/bootstrap/4. 1. 3/css/khởi động. tối thiểu. css”

tính toàn vẹn =”sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO”

crossorigin = “ẩn danh”>

Ví dụ về Bootstrap 4

Xin chào thế giới. Chào mừng bạn đến với Tutorialspoint…

<. – jQuery trước, sau đó là Popper. js, sau đó là Bootstrap JS –>

Nó sẽ cho ra đầu ra như bên dưới

Tại sao chúng ta sử dụng bootstrap
Tại sao chúng ta sử dụng bootstrap

Kết quả chương trình chạy bằng Bootstrap

9. 1. Mobile-first của Bootstrap 4

Bootstrap 4 thiết kế quan trọng đến việc nâng cao trải nghiệm lướt web cho các thiết bị di động. Ở đây Mobile-first Index đóng vai trò quan trọng

Để đạt được hiệu quả hiển thị, bạn cần thêm thẻ vào sau và thiết lập thu phóng.

  • Chiều rộng = chiều rộng thiết bị. chiều dài bằng chiều dài của thiết bị
  • quy mô ban đầu = 1. zoom level by 1

9. 2. Container của Bootstrap 4

Bootstrap sử dụng các lớp chứa hoặc để bao bọc nội dung trang. There are two layer container is

  • lớp vùng chứa. Đại diện cho một vùng chứa chiều rộng cố định
  • Lớp chất lỏng chứa. đại diện cho một vùng chứa đầy đủ chiều rộng

Tại sao chúng ta sử dụng bootstrap
Tại sao chúng ta sử dụng bootstrap

Ví dụ về container và container-fluid

Ví dụ vùng chứa chiều rộng cố định và vùng chứa chiều rộng đầy đủ

Bạn có thể sử dụng WAMP hoặc XAMPP để chạy localhost và tạo tệp ví dụ. html cho ví dụ dưới đây

Hoặc bạn có thể đưa đoạn mã bên dưới vào notepad sau đó lưu tên dưới định dạng. html and open by browser (chrome, coccoc hay bất kỳ trình duyệt nào bạn đang dùng đều được)

Dưới đây là ví dụ vùng chứa chiều rộng cố định

<đầu>

<. – Thẻ meta –>

<. – CSS Bootstrap –>

href = “https. // ngăn xếp. bootstrapcdn. com/bootstrap/4. 1. 3/css/khởi động. tối thiểu. css”

tính toàn vẹn = “sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO”

crossorigin = “ẩn danh”>

Ví dụ về Bootstrap 4

thùng đựng hàng {

lai lịch. #a52c644a;

căn chỉnh văn bản. trung tâm;

đệm-top. 100px;

đệm-đáy. 100px;

}

Vùng chứa có chiều rộng cố định

Đây là một trang web đơn giản với vùng chứa chiều rộng cố định bằng cách sử dụng

. lớp chứa

<. – jQuery trước, sau đó là Popper. js, sau đó là Bootstrap JS –>

Đầu ra sẽ hiển thị như hình dưới đây

Tại sao chúng ta sử dụng bootstrap
Tại sao chúng ta sử dụng bootstrap

Ví dụ vùng chứa chiều rộng cố định

Dưới đây là ví dụ vùng chứa đầy đủ chiều rộng

<đầu>

<. – Thẻ meta –>

<. – CSS Bootstrap –>

href = “https. // ngăn xếp. bootstrapcdn. com/bootstrap/4. 1. 3/css/khởi động. tối thiểu. css”

tính toàn vẹn = “sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO”

crossorigin = “ẩn danh”>

Ví dụ về Bootstrap 4

container-liquid {

lai lịch. #a52c644a;

căn chỉnh văn bản. trung tâm;

đệm-top. 100px;

đệm-đáy. 100px;

}

Vùng chứa có chiều rộng đầy đủ

Đây là một trang web đơn giản với vùng chứa đầy đủ chiều rộng bằng cách sử dụng

. lớp container-liquid

<. – jQuery trước, sau đó là Popper. js, sau đó là Bootstrap JS –>

Đầu ra sẽ hiển thị như hình dưới đây

Tại sao chúng ta sử dụng bootstrap
Tại sao chúng ta sử dụng bootstrap

Ví dụ vùng chứa đầy đủ chiều rộng

9. 3. Hệ thống Grid của Bootstrap 4

Hệ thống lưới (hệ thống lưới) của Bootstrap 4 được xây dựng với Flexbox nhằm tăng khả năng phản hồi của web và mở rộng lên 12 cột (theo kích thước thiết bị)

Nó cung cấp hệ thống lưới linh hoạt, tự động tăng kích thước cột khi kích thước thiết bị hoặc khung nhìn tăng lên

Tại sao chúng ta sử dụng bootstrap
Tại sao chúng ta sử dụng bootstrap

Mô hình Grid System Bootstrap 4

Mô hình Grid System Bootstrap 4

Hệ thống lưới của Bootstrap 4 có 5 lớp

  • col- (Thiết bị siêu nhỏ, màn hình < 576px)
  • col-sm- (Thiết bị nhỏ, màn hình >= 576px)
  • col-md- (Thiết bị vừa, màn hình >= 768px)
  • col-lg- (Thiết bị lớn, màn hình >= 992px)
  • col-xl- (Thiết bị siêu lớn, màn hình >= 1200px)

Cấu trúc lưới cơ bản của Bootstrap 4

Còn dưới đây là ví dụ về cấu trúc lưới của Bootstrap 4

<đầu>

<. – Thẻ meta –>

<. – CSS Bootstrap –>

href = “https. // ngăn xếp. bootstrapcdn. com/bootstrap/4. 1. 3/css/khởi động. tối thiểu. css”

tính toàn vẹn = “sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO”

crossorigin = “ẩn danh”>

Ví dụ về Bootstrap 4

grid_system  div[class^=”col”] {

biên giới. 1px màu trắng đặc;

lai lịch. #e4dcdc;

căn chỉnh văn bản. trung tâm;

đệm-top. 5px;

đệm-đáy. 5px

}

. col-sm-1

. col-sm-1

. col-sm-1

. col-sm-1

. col-sm-1

. col-sm-1

. col-sm-1

. col-sm-1

. col-sm-1

. col-sm-1

. col-sm-1

. col-sm-1

. col-sm-3

. col-sm-3

. col-sm-3

. col-sm-3

. col-sm-4

. col-sm-4

. col-sm-4

. col-sm-3

. col-sm-3

. col-sm-6

. col-sm-5

. col-sm-7

. col-sm-6

. col-sm-6

. col-sm-12

<. – jQuery trước, sau đó là Popper. js, sau đó là Bootstrap JS –>

Đầu ra sẽ hiển thị

Tại sao chúng ta sử dụng bootstrap
Tại sao chúng ta sử dụng bootstrap

Cấu hình lưới Bootstrap 4

10. Cách nhúng Bootstrap vào website

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

Framework này có sẵn các đường link để bạn có thể nhúng vào trang web của mình. Chế độ của cách làm này khiến trang web bị chậm lại (do tải xuống các liên kết bên ngoài)

Ví dụ

<đầu>

Chào mừng bạn đến với Ironhack

Chào mừng bạn đến với Ironhack

<. – JavaScript Bootstrap –>

10. 2. Nhúng Bootstrap bằng cách tự lưu trữ

Đối với cách này, bạn cần tải bộ Bootstrap về máy và thiết lập cấu trúc thư mục cấu trúc như hình dưới đây

Tại sao chúng ta sử dụng bootstrap
Tại sao chúng ta sử dụng bootstrap

Constructor thư mục Bootstrap

Bước tiếp theo, bạn mở tệp Index. html ra và nhập cấu trúc như sau

<đầu>

Chào mừng bạn đến với Ironhack

Chào mừng bạn đến với Ironhack

Với cách này, trang web sẽ hoạt động mượt mà và tải nhanh hơn so với một cách khác

11. Các plugin hỗ trợ mã bootstrap

Để quá trình viết chương trình được nhanh hơn, các nhà lập trình viên thường tìm đến các công cụ hỗ trợ soạn thảo mã

Có một số công cụ soạn thảo mã biến phổ biến có thể kể đến như Notepad++, Eclipse, PHPStorm, MS Word,… và không thể kể đến Sublime Text 3

Có nhiều nhà lập trình đánh giá cao công cụ Sublime này vì đặc điểm nhẹ, dễ cài đặt, plugin đa dạng và mạnh mẽ của nó. Đặc biệt, công cụ này cũng tích hợp nhiều plugin bổ trợ cho quá trình sử dụng Bootstrap

Các bạn có thể tải về tại đây. Sau đó cài đặt Package Control và vào mục Preferences – Package Control – Install Package để cài đặt Plugin

Các plugin hỗ trợ code bootstrap trong Sublime Text 3 có rất nhiều, bạn có thể tham khảo từng loại plugin và lựa chọn chúng để giúp công việc viết code bootstrap được nhanh hơn. Emmet, Bootstrap Snippets, AutoFileName, Sidebar Enhancement, Alignment, Color Picker,…

Kết luận

Qua bài giới thiệu Bootstrap này, bạn đã tìm thấy câu trả lời cho câu hỏi Bootstrap là gì chưa?

Nói ngắn gọn, Bootstrap là một framework được sử dụng rộng rãi trong thiết kế web, tốt nhất là các trang web đáp ứng tiêu chuẩn. Nó dễ sử dụng và linh hoạt, là công cụ hữu hiệu giúp bạn xây dựng web một cách nhanh chóng và nhanh chóng hơn

Hy vọng bài viết này có thể đưa đến cho bạn cái nhìn rõ ràng hơn về Bootstrap và cách ứng dụng của chúng