twitter bootstrap và less
DESCRIPTION
Speaker: Lê Phan Đức Trọng Work at: JoomlArtTRANSCRIPT
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 & [email protected]
http://designwall.com