Cách Dụng Bootstrap 5

Bootstrap được sử dụng rất phổ biến trong thiết kế website. Bài học đầu tiên này sẽ trình bày cho các bạn giới thiệu và cài đặt Bootstrap. Cũng như trả lời các câu hỏi: Bootstrap là gì? Tại sao nên dùng Boostrap? Dùng như thế nào?

Nội dung chính Show

• Bài 1: Giới thiệu và cài đặt Bootstrap
• Video Giới thiệu bootstrap
• Hướng dẫn chi tiết
• Bootstrap là gì?
• Ưu điểm của bootstrap
• Cách cài đặt bootstrap
• Cách học Bootstrap
• Cài đặt plugin hỗ trợ viết code bootstrap trong sublime text
• Video Giới thiệu bootstrap
• Hướng dẫn chi tiết
• Bootstrap là gì?
• Ưu điểm của bootstrap
• Cách cài đặt bootstrap
• Cách học Bootstrap
• Cài đặt plugin hỗ trợ viết code bootstrap trong sublime text
• Video liên quan

Nội dung chính

• Video Giới thiệu bootstrap
• Hướng dẫn chi tiết
  • Bootstrap là gì?
  • Ưu điểm của bootstrap
  • Cách cài đặt bootstrap
  • Cách học Bootstrap
  • Cài đặt plugin hỗ trợ viết code bootstrap trong sublime text

Video Giới thiệu bootstrap

Hướng dẫn chi tiết

"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo" Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

Bootstrap là gì?

+ Một framework của css và javascript. Hay nói cách khác, nó là những đoạn code viết sẵn.

+ Định nghĩa sẵn các class css và các hàm trong javascript. Chúng ta chỉ việc sử dụng các class này để tùy chỉnh thêm

Ưu điểm của bootstrap

+ Giảm thiểu bớt việc viết code, đóng vai trò như bộ khung nền, giúp phát triển web nhanh hơn.

Bài viết cùng chủ đề

Bài 12: Khoảng cách và chia layer trong Bootstrap

Bài 11: Scrollspy Hiệu ứng điều hướng khi

"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

+ Hỗ trợ đa dạng như slide, responsive, menu nhiều cấp.

Ví dụ: Chúng ta muốn tạo ra một button

HTML

Button 1

CSS

.btn1{ background-color: red; color: white; margin-bottom: 50px; }

Trong khi đó, nếu dùng Bootstrap, chúng ta chỉ việc dùng cách class định nghĩa sẵn.

Button Bootstrap Button Primary

Và kết quả là

Button của Bootstrap làm nhanh và đẹp hơn rất nhiều

Cách cài đặt bootstrap

Cách 1: Đưa vào file html đường link trực tuyến. Cách này phụ thuộc khá nhiều vào đường truyền mạng, nhất là khi các bạn đang học. Nhưng sẽ giúp website của bạn giảm tải băng thông vì có server của bootstrap gánh dùm những thư viện này.

Các bạn vào link này và copy những thẻ link và script, dán vào file html của bạn. Chi tiết bạn có thể xem video nhé.

Cách 2: Tải về và dùng trực tiếp local

+ Tải file source của Bootstrap tại getbootstrap.com

+ Thêm thẻ link, chỉ đường dẫn đến file bootstrap.css hoặc bootstrap.min.css

+ Thêm thẻ script vào cuối thẻ body. Phần jQuery mình hướng dẫn thêm sau nhé.

Cách học Bootstrap

+ Học từng thành phần components của Bootstrap. Thành phần nào quan trọng sẽ học kỹ, không quan trọng học lướt qua.

+ Làm bài tập để biết cách phối hợp, vận dụng các components bootstrap.

Cài đặt plugin hỗ trợ viết code bootstrap trong sublime text

Phần mềm được sử dụng để học Bootstrap là Sublime Text 4 và view chỉnh sửa trên Chrome. Ngoài ra, cũng cần có Faststone capture để hỗ trợ việc đo đạt và lấy mã màu.

Chúng ta nên cài thêm 1 số plugin trong Sublime text để hỗ trợ viết code dễ dàng hơn.

Đầu tiên chúng ta cần cài package control. Các bạn xem video hướng dẫn nhé.

Sau khi cài được package control. Các bạn cài thêm Bootstrap autocomplete và Bootstrap Snipets. Vào Preferences, chọn package control, nhập vào install package, và tìm tên 2 plugin trên.

Code mẫu:Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cáchcommentbên dưới, quaemail, hoặc nhắn tin quaFanpage Góc làm web.

Liên hệ