(TIỂU LUẬN) FRONT END FRAMEWORKS bài 1 GIỚI THIỆU BOOTSTRAP

FRONT-END FRAMEWORKS BÀI 1: GIỚI THIỆU BOOTSTRAP Tieu luan 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 Tieu luan 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 Tieu luan 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 Tieu luan Ư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 hoàn toà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… Tieu luan 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 Tieu luan 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 Tieu luan NHÚNG BOOTSTRAP VÀO WEBSITE Mã HTML trang index.html Tieu luan NHÚNG BOOTSTRAP VÀO WEBSITE Khơng xét IE 9- download jquery local mã trang index.html đơn giản sau Tieu luan Á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ì? Tieu luan FRONT-END FRAMEWORKS BÀI (PHẦN 2) Tieu luan NAVS MENU Navbar Tieu luan 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 Tieu luan 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 Tieu luan GLYPHICONS Tieu luan GLYPHICONS Đăng nhập Tieu luan DEMO Bổ sung menu có icon vào layout Tieu luan LIST GROUP Tieu luan LIST GROUP LINK Tieu luan 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 Tieu luan KIỂU PANEL panel-default panel-primary panel-success panel-info panel-danger panel-warning Tieu luan KẾT HỢP PANEL VÀ LIST GROUP Thay panel-body list-group Tieu luan 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 Tieulayout luan 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 Tieu luan Tieu luan ... cột .col-lg-offset-n : dịch phải n cột Tieu luan FRONT- END FRAMEWORKS BÀI (PHẦN 2) Tieu luan NAVS MENU Navbar Tieu luan NAVS MENU Vào http://getbootstrap.com/components/ thực theo hình sau để... 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. .. nhanh hơn, tiện lợi đồng Tieu luan Ư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