bootstrap twiter 3.0 presentation
DESCRIPTION
More details at : http://anhthienad.com/blogTRANSCRIPT
![Page 1: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/1.jpg)
1
Twitter Bootstrap& Less.css
Dương Anh Thiện
Đặng Minh Nhựt
Nguyễn Quốc Nam
![Page 2: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/2.jpg)
2
Bootstrap
59.537 người theo dõi, 5.571 topic thảo luận , 20.767 lượt sao chép
(fork) tại Github ( Oct,15,2013 )
http://twitter.github.com/bootstrap/
![Page 3: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/3.jpg)
3
?Bootstrap
![Page 4: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/4.jpg)
4
Why’s using Bootstrap?
Grid System Dozens of CSS
components JavaScript plugins Web-based
Customizer Saving Time
![Page 5: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/5.jpg)
5
Why’s using Bootstrap? :
Live mockups - Prototypes
![Page 6: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/6.jpg)
6
Why’s using Bootstrap? :
Live mockups - Prototypes
![Page 7: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/7.jpg)
7
Why’s using Bootstrap? :
Responsive Design
![Page 8: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/8.jpg)
8
Why’s using Bootstrap? :
Benefit Features
• Dễ dàng để tạo ra 1 bản concept cho đội nhóm hoặc khách hàng để có thể nắm bắt đúng thông tin trước khi ký kết 1 hợp đồng thiết kế Web.
• Tiết kiệm thời gian vì hạn chế tiếp xúc với code.
• Có sẵn các Khung Template cơ bản sẵn sàng cho Web-developer ( copy & past )
• Tương thích với nhiều thiết bị di động.
![Page 9: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/9.jpg)
9
Why’s using Bootstrap ?
Sumarry
Tóm lại những lý do khiến bạn mong muốn sử dụng Bootstrap.
Tính năng vượt trội.Thiết kế đa nền tảng.Tạo ra những bản demo nhanh chóng,
tiết kiệm thời gian.Mã nguồn mở nên miễn phíCộng đồng hỗ trợ cực kỳ khủng khiếp.
![Page 10: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/10.jpg)
10
BootstrapCó gì ?
![Page 11: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/11.jpg)
11
Scaffolding• Grid system• Fluid grid system• Layouts• Responsive design
Base CSS• Forms• Images• Typography• Icons by Glyphicons
Components• Dropdowns• Button groups• Navs• Navbar• …
JavaScript• Transitions• Modal• Dropdown• Scrollspy• Tab• …
![Page 12: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/12.jpg)
12
![Page 13: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/13.jpg)
13
Thiết kếGiao diện Kỹ thuật
![Page 14: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/14.jpg)
14
![Page 15: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/15.jpg)
15
![Page 16: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/16.jpg)
16
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
![Page 17: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/17.jpg)
17
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
![Page 18: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/18.jpg)
18
Thời gian tiết kiệm được:+60 giờ!
![Page 19: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/19.jpg)
19
GRID
![Page 20: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/20.jpg)
20
Nesting columns
![Page 21: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/21.jpg)
21
RESPONSIVE DESIGN
![Page 22: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/22.jpg)
22
Thời gian tiết kiệm được:+12 giờ!
![Page 23: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/23.jpg)
23
Base CSS
Typhography
![Page 24: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/24.jpg)
24
Base CSSIcons
<i class="icon-search"></i>
![Page 25: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/25.jpg)
25
Base CSSbuttons
![Page 26: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/26.jpg)
26
Base CSSImages
![Page 27: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/27.jpg)
27
Thời gian tiết kiệm được:+5 giờ!
![Page 28: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/28.jpg)
28
ComponentsNavbar
![Page 29: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/29.jpg)
29
ComponentsNavbar
![Page 30: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/30.jpg)
30
ComponentsNavbar - Responsive
![Page 31: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/31.jpg)
31
ComponentsBreadcrumbs
![Page 32: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/32.jpg)
32
ComponentsPagination
![Page 33: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/33.jpg)
33
ComponentsButton groups
![Page 34: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/34.jpg)
34
Thời gian tiết kiệm được:+12 giờ!
![Page 35: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/35.jpg)
35
JavaScriptCarousel
![Page 36: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/36.jpg)
36
JavaScriptScrolSpy
![Page 37: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/37.jpg)
37
Thời gian tiết kiệm được:+10 giờ!
![Page 38: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/38.jpg)
38
Cài đặt Bootstrap
![Page 39: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/39.jpg)
39
1) LESS 2) CSS
![Page 40: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/40.jpg)
40
LESShttp://lesscss.org/
![Page 41: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/41.jpg)
41
LESShttp://lesscss.org/
![Page 42: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/42.jpg)
42
LESShttp://lesscss.org/
![Page 43: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/43.jpg)
43
LESShttp://lesscss.org/
![Page 44: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/44.jpg)
44
LESShttp://lesscss.org/
![Page 45: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/45.jpg)
45
![Page 46: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/46.jpg)
46
![Page 47: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/47.jpg)
47
![Page 48: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/48.jpg)
48
![Page 49: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/49.jpg)
49
![Page 50: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/50.jpg)
50
![Page 51: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/51.jpg)
51
![Page 52: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/52.jpg)
52
![Page 53: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/53.jpg)
53
![Page 54: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/54.jpg)
54
VietNam
![Page 55: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/55.jpg)
55
![Page 56: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/56.jpg)
56
![Page 57: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/57.jpg)
57
![Page 58: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/58.jpg)
58
![Page 59: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/59.jpg)
59
![Page 60: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/60.jpg)
60
Thanks & QA
AnhThienAD.com/blog
![Page 61: Bootstrap Twiter 3.0 Presentation](https://reader035.vdocuments.co/reader035/viewer/2022062300/558c61d4d8b42ae04e8b4613/html5/thumbnails/61.jpg)
61
Nguồn tham khảo http://blog.lynda.com/2013/08/21
/bootstrap-3-what-you-need-to-know/
http://designwall.com http://getbootstrap.com/2.3.2/ http://anhthienad.com/blog/2013/
10/huong-dan-su-dung-twitter-bootstrap-framework-2-3-2.html