Speaker: Lê Phan Đức Trọng Work at: JoomlArt

1. Bootstrap, from Twitter
& Less.css
Lê Trọng
Joomlart.com – Designwall.com

2. Bootstrap
http://twitter.github.com/bootstrap/
41.530 người theo
dõi & 10.696 lượt
sao chép (fork) tại
Github

3. Bootstrap
?

4. Scaffolding Components
• Grid system • Dropdowns
• Fluid grid system • Button groups
• Layouts • Navs
• Responsive design • Navbar
• …
Base CSS JavaScript
• Forms • Transitions
• Images • Modal
• Typography • Dropdown
• Icons by Glyphicons • Scrollspy
• Tab
• …

6. Thiết kế Kỹ thuật

9. Sử dụng Bootstrap:
6 phiên bản khác nhau
~60 giờ để hoàn thành
Tương thích IE8+, Firefox, Chrome, Safari, Opera
Tương thích Smartphone, tablet
Không quá nhiều code phải viết thêm
Giảm thiểu lỗi phát sinh

10. Sử dụng Bootstrap:
Ít nhất 120 giờ tuần để hoàn thành
Khá nhiều code phải viết thêm
Khá nhiều lỗi phát sinh

11. Thời gian tiết kiệm được:
+60 giờ!

12. GRID

13. Nesting columns

14. RESPONSIVE DESIGN

15. Thời gian tiết kiệm được:
+12 giờ!

16. Base CSS
Icons
<i class="icon-search"></i>

17. Base CSS
buttons

18. Base CSS
Images

19. Thời gian tiết kiệm được:
+5 giờ!

20. Components
Navbar

21. Components
Navbar

22. Components
Navbar - Responsive

23. Components
Breadcrumbs

24. Components
Pagination

25. Components
Button groups

26. Thời gian tiết kiệm được:
+12 giờ!

27. JavaScript
Carousel

28. JavaScript
ScrolSpy

29. Thời gian tiết kiệm được:
+10 giờ!

30. Cài đặt Bootstrap

31. 1) LESS 2) CSS

32. LESS
http://lesscss.org/

33. LESS
http://lesscss.org/

34. LESS
http://lesscss.org/

35. LESS
http://lesscss.org/

36. LESS
http://lesscss.org/

41. http://demo.designwall.com

44. Thanks & QA
t@designwall.com
http://designwall.com