1
Twitter Bootstrap& Less.css
Dương Anh Thiện
Đặng Minh Nhựt
Nguyễn Quốc Nam
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/
3
?Bootstrap
4
Why’s using Bootstrap?
Grid System Dozens of CSS
components JavaScript plugins Web-based
Customizer Saving Time
5
Why’s using Bootstrap? :
Live mockups - Prototypes
6
Why’s using Bootstrap? :
Live mockups - Prototypes
7
Why’s using Bootstrap? :
Responsive Design
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.
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.
10
BootstrapCó gì ?
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• …
12
13
Thiết kếGiao diện Kỹ thuật
14
15
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
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
18
Thời gian tiết kiệm được:+60 giờ!
19
GRID
20
Nesting columns
21
RESPONSIVE DESIGN
22
Thời gian tiết kiệm được:+12 giờ!
23
Base CSS
Typhography
24
Base CSSIcons
<i class="icon-search"></i>
25
Base CSSbuttons
26
Base CSSImages
27
Thời gian tiết kiệm được:+5 giờ!
28
ComponentsNavbar
29
ComponentsNavbar
30
ComponentsNavbar - Responsive
31
ComponentsBreadcrumbs
32
ComponentsPagination
33
ComponentsButton groups
34
Thời gian tiết kiệm được:+12 giờ!
35
JavaScriptCarousel
36
JavaScriptScrolSpy
37
Thời gian tiết kiệm được:+10 giờ!
38
Cài đặt Bootstrap
39
1) LESS 2) CSS
40
LESShttp://lesscss.org/
41
LESShttp://lesscss.org/
42
LESShttp://lesscss.org/
43
LESShttp://lesscss.org/
44
LESShttp://lesscss.org/
45
46
47
48
49
50
51
52
53
54
VietNam
55
56
57
58
59
60
Thanks & QA
AnhThienAD.com/blog
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