Bootstrap Twiter 3.0 Presentation

61
Twitter Bootstrap & Less.css Dương Anh Thiện Đặng Minh Nhựt Nguyễn Quốc Nam 1

description

More details at : http://anhthienad.com/blog

Transcript of Bootstrap Twiter 3.0 Presentation

Page 1: Bootstrap Twiter 3.0 Presentation

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

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

3

?Bootstrap

Page 4: Bootstrap Twiter 3.0 Presentation

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

5

Why’s using Bootstrap? :

Live mockups - Prototypes

Page 6: Bootstrap Twiter 3.0 Presentation

6

Why’s using Bootstrap? :

Live mockups - Prototypes

Page 7: Bootstrap Twiter 3.0 Presentation

7

Why’s using Bootstrap? :

Responsive Design

Page 8: Bootstrap Twiter 3.0 Presentation

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

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

10

BootstrapCó gì ?

Page 11: Bootstrap Twiter 3.0 Presentation

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

12

Page 13: Bootstrap Twiter 3.0 Presentation

13

Thiết kếGiao diện Kỹ thuật

Page 14: Bootstrap Twiter 3.0 Presentation

14

Page 15: Bootstrap Twiter 3.0 Presentation

15

Page 16: Bootstrap Twiter 3.0 Presentation

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

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

18

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

Page 19: Bootstrap Twiter 3.0 Presentation

19

GRID

Page 20: Bootstrap Twiter 3.0 Presentation

20

Nesting columns

Page 21: Bootstrap Twiter 3.0 Presentation

21

RESPONSIVE DESIGN

Page 22: Bootstrap Twiter 3.0 Presentation

22

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

Page 23: Bootstrap Twiter 3.0 Presentation

23

Base CSS

Typhography

Page 24: Bootstrap Twiter 3.0 Presentation

24

Base CSSIcons

<i class="icon-search"></i>

Page 25: Bootstrap Twiter 3.0 Presentation

25

Base CSSbuttons

Page 26: Bootstrap Twiter 3.0 Presentation

26

Base CSSImages

Page 27: Bootstrap Twiter 3.0 Presentation

27

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

Page 28: Bootstrap Twiter 3.0 Presentation

28

ComponentsNavbar

Page 29: Bootstrap Twiter 3.0 Presentation

29

ComponentsNavbar

Page 30: Bootstrap Twiter 3.0 Presentation

30

ComponentsNavbar - Responsive

Page 31: Bootstrap Twiter 3.0 Presentation

31

ComponentsBreadcrumbs

Page 32: Bootstrap Twiter 3.0 Presentation

32

ComponentsPagination

Page 33: Bootstrap Twiter 3.0 Presentation

33

ComponentsButton groups

Page 34: Bootstrap Twiter 3.0 Presentation

34

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

Page 35: Bootstrap Twiter 3.0 Presentation

35

JavaScriptCarousel

Page 36: Bootstrap Twiter 3.0 Presentation

36

JavaScriptScrolSpy

Page 37: Bootstrap Twiter 3.0 Presentation

37

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

Page 38: Bootstrap Twiter 3.0 Presentation

38

Cài đặt Bootstrap

Page 39: Bootstrap Twiter 3.0 Presentation

39

1) LESS 2) CSS

Page 40: Bootstrap Twiter 3.0 Presentation

40

LESShttp://lesscss.org/

Page 41: Bootstrap Twiter 3.0 Presentation

41

LESShttp://lesscss.org/

Page 42: Bootstrap Twiter 3.0 Presentation

42

LESShttp://lesscss.org/

Page 43: Bootstrap Twiter 3.0 Presentation

43

LESShttp://lesscss.org/

Page 44: Bootstrap Twiter 3.0 Presentation

44

LESShttp://lesscss.org/

Page 45: Bootstrap Twiter 3.0 Presentation

45

Page 46: Bootstrap Twiter 3.0 Presentation

46

Page 47: Bootstrap Twiter 3.0 Presentation

47

Page 48: Bootstrap Twiter 3.0 Presentation

48

Page 49: Bootstrap Twiter 3.0 Presentation

49

Page 50: Bootstrap Twiter 3.0 Presentation

50

Page 51: Bootstrap Twiter 3.0 Presentation

51

Page 52: Bootstrap Twiter 3.0 Presentation

52

Page 53: Bootstrap Twiter 3.0 Presentation

53

Page 54: Bootstrap Twiter 3.0 Presentation

54

VietNam

Page 55: Bootstrap Twiter 3.0 Presentation

55

Page 56: Bootstrap Twiter 3.0 Presentation

56

Page 57: Bootstrap Twiter 3.0 Presentation

57

Page 58: Bootstrap Twiter 3.0 Presentation

58

Page 59: Bootstrap Twiter 3.0 Presentation

59

Page 60: Bootstrap Twiter 3.0 Presentation

60

Thanks & QA

AnhThienAD.com/blog