twitter bootstrap và less

Bootstrap, from Twitter

& Less.css

Lê Trọng

Joomlart.com – Designwall.com

Bootstrap

41.530 người theo dõi & 10.696 lượt sao chép (fork) tại Github

http://twitter.github.com/bootstrap/

?Bootstrap

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• …

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

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

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

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

GRID

Nesting columns

RESPONSIVE DESIGN

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

Base CSSIcons

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

Base CSSbuttons

Base CSSImages

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

ComponentsNavbar

ComponentsNavbar

ComponentsNavbar - Responsive

ComponentsBreadcrumbs

ComponentsPagination

ComponentsButton groups

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

JavaScriptCarousel

JavaScriptScrolSpy

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

Cài đặt Bootstrap

1) LESS 2) CSS

LESShttp://lesscss.org/

LESShttp://lesscss.org/

LESShttp://lesscss.org/

LESShttp://lesscss.org/

LESShttp://lesscss.org/

http://demo.designwall.com

Thanks & QAt@designwall.com

http://designwall.com