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