FRONT END FRAMEWORKS bài 1 GIỚI THIỆU BOOTSTRAP

FRONT-END FRAMEWORKS BÀI 1: GIỚI THIỆU BOOTSTRAP MỤC TIÊU Hiểu Bootstrap Nắm vững tổ chức hệ thống lưới Biết cách tổ chức layout Sử dụng navbar để xây xây dựng menu Sử dụng Glyphicons Sử dụng Panel Sử dụng List Group NỘI DUNG Tổng quan twitter Nhúng Bootstrap vào website Grid System Xây dựng layout Navs menu Glyphicons Panel List Group TỔNG QUAN VỀ BOOTSTRAP Bootstrap framework cho phép nhà phát triển thiết kế trang web reponsive nhanh chóng dễ dàng Bootstrap xây dựng dựa tảng HTML templates, CSS templates Javascript để hình thành nên mẫu giao diện thiết kế có sẵn Bootstrap Mark Otto Jacob Thornton phát triển lên Twitter Bootstrap góp phần thúc đẩy công việc nhà phát triển lập trình nhanh hơn, tiện lợi đồng ƯU ĐIỂM CỦA BOOTSTRAP  Bootstrap giúp nhà thiết kế website giảm bớt thời gian việc thiết kế website Khi sử dụng Bootstrap, bạn hạn chế thời gian bỏ để viết code cho giao diện thư viện có sẵn đoạn mã chèn vào website  Khi sử dụng Bootstrap bạn hồn tồn tùy biến giao diện theo ý muốn với hệ thống Grid System mặc định bao gồm 12 cột với độ rộng 940px tích hợp sẵn Bootstrap  Ngày nay, mà xu hướng phát triển website tương thích với thiết bị Bootstrap lên Framework cung cấp sẵn reponsive css phù hợp với thiết bị SmartPhone, tablets, dextop… NHÚNG BOOTSTRAP VÀO WEBSITE Vào website: http://getbootstrap.com/gettingstarted/ nhấp vào nút [Download Boostrap] Giải nén NHÚNG BOOTSTRAP VÀO WEBSITE Tạo trang index.html chép nội dung HTML phần Basic Template hình vào trang index.html NHÚNG BOOTSTRAP VÀO WEBSITE Mã HTML trang index.html NHÚNG BOOTSTRAP VÀO WEBSITE Không xét IE 9- download jquery local mã trang index.html đơn giản sau ÁP DỤNG BOOTSTRAP CSS Hãy sửa nội dung trang web index.html sau, chạy phân tích kết container, alert-info, btn btn-default gì? FRONT-END FRAMEWORKS BÀI (PHẦN 2) NAVS MENU Navbar NAVS MENU Vào http://getbootstrap.com/components/ thực theo hình sau để lấy mã navbar Chép mã navbar dán vào layout NAVS MENU Cấu trúc mã navbar Hiệu chỉnh mã theo hướng dẫn sau Xóa thẻ … Thêm liên kết sửa đổi văn liên kết menu sub-menu slide trước Override navbar{margin-bottom:0px} để bỏ lề menu GLYPHICONS GLYPHICONS Đăng nhập DEMO Bổ sung menu có icon vào layout LIST GROUP LIST GROUP LINK PANEL .panel: khung chứa .panel-default: kiểu .panel-heading: phần đầu .panel-body: phần thân .panel-footer: phần chân KIỂU PANEL panel-default panel-primary panel-success panel-info panel-danger panel-warning KẾT HỢP PANEL VÀ LIST GROUP Thay panel-body list-group THẢO LUẬN VỀ LAYOUT  Hãy liệt kê thành phần giao diện bootstrap sử dụng  Nêu bước để hoàn thiện layout TỔNG KẾT NỘI DUNG BÀI HỌC Tổng quan twitter Nhúng Bootstrap vào website Grid System Xây dựng layout Navs menu Glyphicons Panel List Group ... .col-md-offset-n : dịch phải n cột .col-lg-offset-n : dịch phải n cột FRONT- END FRAMEWORKS BÀI (PHẦN 2) NAVS MENU Navbar NAVS MENU Vào http://getbootstrap.com/components/ thực theo hình sau để lấy mã navbar... dễ dàng ? ?Bootstrap xây dựng dựa tảng HTML templates, CSS templates Javascript để hình thành nên mẫu giao diện thiết kế có sẵn ? ?Bootstrap Mark Otto Jacob Thornton phát triển lên Twitter ? ?Bootstrap. .. lập trình nhanh hơn, tiện lợi đồng ƯU ĐIỂM CỦA BOOTSTRAP  Bootstrap giúp nhà thiết kế website giảm bớt thời gian việc thiết kế website Khi sử dụng Bootstrap, bạn hạn chế thời gian bỏ để viết code