SLIDE BÁO CÁO TÌM HIỂU VỀ BOOTRAP Nếu các bạn đã từng học qua HTML, JQUERYthì giờ đây tài liệu này có thể giúp các bạn làm được những website chuyên nghiệp hơn. Có thể làm web chạy lên hệ điều hành IOS8, Android, hay ipad điều có thể vì phần mềm này có thể tự động co dãn bất kỳ vào nội dung của trang web đó. Xin được giới thiệu đến bạn tài liệu SLIDE TÌM HIỂU VỀ BOOTRAP Tài liệu này sẽ hướng dẫn cho các bạn làm được điều đó. Chúc các bạn thành công
Trang 1TRƯỜ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
Trang 2NỘ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
Trang 3I 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
Trang 4I GIỚI THIỆU BOOTSTRAP(tt).
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
Trang 5I 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.
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
Trang 6I GIỚI THIỆU BOOTSTRAP(tt).
3 Cơ chế hoạt động của Bootstrap.
Bootstrap chia 1 layout ra làm 12 phần gọi là 12 grids (lưới) trong hệ thống lưới Grids System
Grid – Lưới, là những thẻ div được chia sẵn để các bạn có thể định vị các div lớn, các phần tử 1 cách dễ dàng trên 1 layout màn hình
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
VD: Chỉ cần dùng class “span6″ là bạn có thể cho độ rộng của div bằng 1
nữa trang Web ra những div nhỏ theo ý muốn
6
Trang 7II.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
Trang 8II.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
Trang 9III.HƯỚNG DẪN SỬ DỤNG BOOTSTRAP
Như mình đã giới thiệu ở trên ,Bootstrap giúp chúng ta giảm thiểu thời
gian thiết kết html và css
Bootstrap định nghĩa sẳn các class css công việc của chúng ta chỉ là sử
dụng các class đó vào mục đích của mình
Sau khi hoàn thành quá trình cài đặt chúng ta làm như sau:
Chúng ta tạo 1 file html có tên là index.html ở trong thư mục bootstrap
vừa giải nén phía trên
9
Trang 10III.HƯỚNG DẪN SỬ DỤNG BOOTSTRAP(tt)
Chúng ta tạo 1 file html có tên là index.html ở trong thư mục bootstrap vừa giải nén phía trên.(Demo)
10
Trang 111 Ưu Điểm.
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 ra Bootstrap còn được cập nhật phiên bản thường xuyên, hệ thống tài liệu hướng dẫn chi tiết, thân thiện với các công cụ tìm kiếm, tương thích trên nhiều trình duyệt
11
Trang 12IV ƯU ĐIỂM VÀ HẠN CHẾ CỦA BOOTSTRAP (tt).
2 Hạn Chế
Mặc dù, với nhiều ưu thế to lớn Nhưng bootstrap cũng có những khuyết
điểm riêng của nó:
Thứ nhất, để tìm ra một tổ chức, hay cá nhân thành thạo bootstrap để
có thể sử dụng với nền tảng lập trình web không nhiều
Thứ hai là bootstrap chưa đầy đủ các thư viện cần thiết
- Các develop chưa thể tạo ra cho mình một framework riêng hoàn hảo
- Do đó một số trang web như nhaccuatui hay foody…vẫn còn sử dụng
phiên bản mobile riêng, mặc dù họ đã dùng bootstrap
- Tuy nhiên việc hình thành thư viện đầy đủ chỉ còn là vấn đề thời gian
12
Trang 13V TÀI LIỆU THAM KHẢO
1 Video hướng dẫn cài đặt và demo:
https://www.youtube.com/watch?v=fIxYFGAFXAQ
2 Hệ thống grid và component trong Bootstrap Framework 3:
http://votrungchinh.blogspot.com/2013/11/lam-quen-voi-bo otstrap.html#.VCRYG-135qs
3 Link download Sách:
Extending BootStrap: http://it-ebooks.info/book/2331/
Responsive Wed Bootstrap: http://it-ebooks.info/book/2331/
13
Trang 14CẢM ƠN THẦY VÀ CÁC BẠN ĐÃ QUAN TÂM THEO DÕI. XIN CHÂN THÀNH CẢM ƠM.
THE END.