Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 14 trang
THÔNG TIN TÀI LIỆU
Cấu trúc
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Slide 13
Slide 14
Nội dung
TRƯỜNG ĐẠI HỌC KINH TẾ KĨ THUẬT BÌNH DƯƠNG KHOA KĨ THUẬT – CÔNG NGHỆ Sinh viên thực hiện: Phạm Công Chức Phạm Lý Hùng Huỳnh Quốc Sang Giảng viên hướng dẫn: Th.s Dương Thành Phết TÌM HIỂU VỀ ‘ BOOSTRAP’ NỘI DUNG 1. Giới thiệu bootstrap. 1.1Boostrap là gì. 1.2 Tại sao phải sử dụng Boostrap. 1.3 Cơ chế hoạt động của Bootstrap. 2. Hướng dẫn download và cài đặt Bootstrap. 2.1 Link Download. 2.2 Hướng dẫn cài đặt 3. Hướng dẫn sử dụng Bootstrap. 3.1 Slide + Demo 4. Ưu điểm và hạn chế của Bootstrap. 4.1 Ưu điểm 4.2 Nhược điểm 5. Tài liệu tham khảo. 2 I. GIỚI THIỆU BOOTSTRAP. 1. Bootstrap là gì ? . Là một framework CSS được Twitter phát triển. . Một tập hợp các bộ chọn, thuộc tính và giá trị có sẵn để giúp web designer tránh việc lặp đi lặp lại trong quá trình tạo ra các class CSS và những đoạn mã HTML giống nhau trong dự án web của mình. . Ngoài CSS ra, thì bootstrap còn hỗ trợ các function tiện ích được viết dựa trên JQuery(Carousel, Tooltip, Popovers , ). 3 I. GIỚI THIỆU BOOTSTRAP(tt). 2. Tại sao phải sử dụng Bootstrap ?. Sự tương thích của trình duyệt với thiết bị đã được kiểm tra nhiều lần nên có thể tin tưởng kết quả mình làm ra và nhiều khi không cần kiểm tra lại. Vì vậy, giúp cho dự án của bạn tiết kiệm được thời gian và tiền bạc. Chỉ cần biết sơ qua HTML, CSS, Javascript, Jquery là bạn có thể sử dụng Bootstrap để tạo nên một trang web sang trọng và đầy đủ. Với giao diện mặc định là màu xám bạc sang trọng, hỗ trợ các component thông dụng mà các website hiện nay cần có. 4 I. GIỚI THIỆU BOOTSTRAP(tt). 2. Tại sao phải sử dụng Bootstrap ?(tt). Do có sử dụng Grid System nên Bootstrap mặc định hỗ trợ Responsive. Bootstrap được viết theo xu hướng Mobile First tức là ưu tiên giao diện trên Mobile trước. Nên việc sử dụng Bootstrap cho website của bạn sẽ phù hợp với tất cả kích thước màn hình. Nhờ đó mà chúng ta không cần xây dựng thêm một trang web riêng biệt cho mobile. Đội ngũ phát triển Bootstrap đã bổ sung thêm tính năng Customizer. Giúp cho designer có thể lựa chọn những thuộc tính, component phù hợp với project của họ. Chức năng này giúp ta không cần phải tải toàn bộ mã nguồn về máy. 5 I. GIỚI THIỆU BOOTSTRAP(tt). 3. Cơ chế hoạt động của Bootstrap. ! "#$%&'()*(+, /+(0'0,'$,1,23 4! Với grid ta có thể canh độ rộng của 1 div ra giữa trang web, chia trang Web ra những div nhỏ theo ý muốn VD56789span6: /+(;;<'-=%> -%'? @ 6 II.HƯỚNG DẪN DOWNLOAD VÀ CÀI ĐẶT BOOTSTRAP 1. Link Download Boostrap. Truy cập vào trang http://getbootstrap.com/2.3.2/. 2. Cài Đặt. Sau khi download thành công và giải nén thì ta được : 7 II.HƯỚNG DẪN DOWNLOAD VÀ CÀI ĐẶT BOOTSTRAP(tt) 2. Cài Đặt(tt). Coppy chúng vào thư mục chứa Website của chúng ta. Tham khảo:https://www.youtube.com/watch?v=fIxYFGAFXAQ. 8 III.HƯỚNG DẪN SỬ DỤNG BOOTSTRAP A4(BC3$DDE+FGHG'! (0IJ,K'<D71L,(/'L(M<4! Sau khi hoàn thành quá trình cài đặt chúng ta làm như sau: 6D.N /3 O!CL-'PEQM3! 9 III.HƯỚNG DẪN SỬ DỤNG BOOTSTRAP(tt) 6D.N /3 O!CL-'PEQM3!R 10 [...]... Hỗ trợ khả năng Responsive: tức là trang web sẽ tự động co giãn theo kích thước của cửa sổ trình duyệt Tương thích tốt với thiết bị cỡ nhỏ: với sự phổ biến của smartphone hiện nay, đây là một yếu tố quan trọng Không cần phải design một bản riêng cho mobile, với bootstrap bạn chỉ cần thiết kế một lần cho mọi thiết bị Được tích hợp với thư viện jQuery và tương tác tốt với chuẩn HTML5 và CSS3 Ngoài... http://votrungchinh.blogspot.com/2013/11/lam-quen-voi-bootstrap.html#.VCRYG-135qs Link download Sách: Extending BootStrap: http://it-ebooks.info/book/2331/ Responsive Wed Bootstrap: http://it-ebooks.info/book/2331/ 13 THE END CẢM ƠN THẦY VÀ CÁC BẠN ĐÃ QUAN TÂM THEO DÕI XIN CHÂN THÀNH CẢM ƠM . Huỳnh Quốc Sang Giảng viên hướng dẫn: Th.s Dương Thành Phết TÌM HIỂU VỀ ‘ BOOSTRAP’ NỘI DUNG 1. Giới thiệu bootstrap. 1.1Boostrap là gì. 1.2 Tại sao phải sử dụng Boostrap. 1.3 Cơ chế hoạt động của. Demo 4. Ưu điểm và hạn chế của Bootstrap. 4.1 Ưu điểm 4.2 Nhược điểm 5. Tài liệu tham khảo. 2 I. GIỚI THIỆU BOOTSTRAP. 1. Bootstrap là gì ? . Là một framework CSS được Twitter phát triển. . Một. hỗ trợ các function tiện ích được viết dựa trên JQuery(Carousel, Tooltip, Popovers , ). 3 I. GIỚI THIỆU BOOTSTRAP(tt). 2. Tại sao phải sử dụng Bootstrap ?. Sự tương thích của trình duyệt