Giới thiệu cách sử dụng Bootstrap CSS Framework

Giới thiệu cách sử dụng Bootstrap CSS Framework

• 1.
  Giới thiệu vềBootstrap CSS Framework Copyright by hocwebgiare.com – Giáo viên: Nguyễn Phát Tài TỔNG QUAN BOOTSTRAP • Bootstrap : là một CSS Framework do Twitter phát triễn. • Hỗ trợ thiết kế giao diện web đáp ứng chuẩn RWD (Responsive Web Design) để có thể chạy được trên tất cả các thiết bị như Desktop, Mobile hay Tablet. • Giúp thiết kế giao diện website nhanh chóng nhờ các CSS class được xây dựng sẳn. • Phiên bản hiện tại là Bootstrap v 3.3.4 • Để sử dụng được Bootstrap bạn cần phải có kiến thức về CSS & Javascript.
• 2.
  Giới thiệu vềBootstrap CSS Framework Copyright by hocwebgiare.com – Giáo viên: Nguyễn Phát Tài TỔNG QUAN BOOTSTRAP • Việc chỉnh sửa giao diện của Bootstrap sẽ khó khăn nếu như chúng ta không nắm vững kiến thức về CSS và Javascript do các class trong thư viện này là có sẳn do đó chúng ta phải mất nhiều thời gian để có thể tìm hiểu hết tất cả các thuộc tính trong CSS Framework này. • Giao diện website sẽ chạy chậm vì nhiều class chúng ta không dùng tới trong Framework CSS này nhưng cũng phải tải vào trang web.
• 3.
  Download Bootstrap CSSFramework Copyright by hocwebgiare.com – Giáo viên: Nguyễn Phát Tài TỔNG QUAN BOOTSTRAP • Để sử dụng được Bootstrap đầu tiên chúng ta phải tải nó về từ website http://getbootstrap.com/
• 4.
  Phiên bản BootstrapCSS Framework Copyright by hocwebgiare.com – Giáo viên: Nguyễn Phát Tài TỔNG QUAN BOOTSTRAP • Hiện có 3 phiên bản Bootstrap được hỗ trợ download dành cho các cấp độ người dùng khác nhau.
• 5.
  Phiên bản BootstrapCSS Framework Copyright by hocwebgiare.com – Giáo viên: Nguyễn Phát Tài TỔNG QUAN BOOTSTRAP • Phiên bản đầu tiên là phiên bản được biên dịch sẳn (Precompiled Bootstrap) . • Đối với phiên bản này chúng ta chỉ việc download về và dùng. Chúng ta không thể tự xây dựng bộ thư viện CSS Bootstrap riêng của mình vì không có kèm theo các tài liệu hướng dẫn.
• 6.
  Cấu trúc củaPrecompiled Bootstrap Copyright by hocwebgiare.com – Giáo viên: Nguyễn Phát Tài TỔNG QUAN BOOTSTRAP
• 7.
  Phiên bản BootstrapCSS Framework Copyright by hocwebgiare.com – Giáo viên: Nguyễn Phát Tài TỔNG QUAN BOOTSTRAP • Phiên bản thứ hai là là bộ mã nguồn của Bootstrap (Bootstrap source code) . • Đối với phiên bản này bao gồm các CSS biên dịch sẳn, các tập tin Javascript, các tập mã nguồn less (CSS pre-processor) và tài liệu hướng dẫn để chúng ta có thể tự xây dựng bộ Bootstrap CSS riêng.
• 8.
  Cấu trúc củaBootstrap source code Copyright by hocwebgiare.com – Giáo viên: Nguyễn Phát Tài TỔNG QUAN BOOTSTRAP
• 9.
  Phiên bản BootstrapCSS Framework Copyright by hocwebgiare.com – Giáo viên: Nguyễn Phát Tài TỔNG QUAN BOOTSTRAP • Phiên bản thứ ba là Sass (Syntactically awesome stylesheets) : là một siêu ngôn ngữ CSS. • Đối với phiên bản này giúp chúng ta phát triễn CSS nhanh hơn, đơn giản hơn, nhẹ hơn và hiệu quả hơn. • Sass giúp chúng ta có thể tạo ra các stylesheet có thể quản lý động.
• 10.
  Nhúng Bootstrap vàotrang web Copyright by hocwebgiare.com – Giáo viên: Nguyễn Phát Tài TỔNG QUAN BOOTSTRAP
• 11.
  Nhúng Bootstrap vàotrang web Copyright by hocwebgiare.com – Giáo viên: Nguyễn Phát Tài TỔNG QUAN BOOTSTRAP <meta name="viewport" content="width=device-width, initial-scale=1"> • Dùng để bật chức năng thiết kế web RWD (Responsive Web Design) • Tag meta viewport giúp thiết lập màn hình theo tỷ lệ 1×1, điều này sẽ loại bỏ các chức năng mặc định từ các trình duyệt smartphone, chỉ hiển thị vừa màn hình để xem và có thể phóng to bằng thao tác tay. <meta http-equiv="X-UA-Compatible" content="IE=edge"> • Giúp một số trang web không được hiển thị tốt khi được xem trong chế độ Tiêu chuẩn của Internet Explorer 8 sẽ được hiển thị tốt hơn khi người dùng sử dụng chế độ Hiển thị Tương thích (Compatibility View).
• 12.
  TAKE ACTION Copyright byhocwebgiare.com – Giáo viên: Nguyễn Phát Tài TỔNG QUAN BOOTSTRAP Giới thiệu về Bootstrap CSS Framework