Bootstrap Twiter 3.0 Presentation
•Télécharger en tant que PPTX, PDF•
0 j'aime•716 vues
More details at : http://anhthienad.com/blog
Recommandé
Contenu connexe
Similaire à Bootstrap Twiter 3.0 Presentation
Similaire à Bootstrap Twiter 3.0 Presentation (20)
Dernier
Dernier (20)
Bootstrap Twiter 3.0 Presentation
- 1. Twitter Bootstrap & Less.css Dương Anh Thiện Đặng Minh Nhựt Nguyễn Quốc Nam 1
- 2. Bootstrap http://twitter.github.com/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 ) 2
- 4. Why’s using Bootstrap? Grid System Dozens of CSS components JavaScript plugins Web-based 4
- 5. Why’s using Bootstrap? : Live mockups - Prototypes 5
- 6. Why’s using Bootstrap? : Live mockups - Prototypes 6
- 7. Why’s using Bootstrap? : Responsive Design 7
- 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. 8
- 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. 9
- 11. Scaffolding Components • • • • • • • • • Grid system Fluid grid system Layouts Responsive design Dropdowns Button groups Navs Navbar … Base CSS JavaScript • • • • • • • • • • Forms Images Typography Icons by Glyphicons Transitions Modal Dropdown Scrollspy Tab … 11
- 12. 12
- 14. 14
- 15. 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 16
- 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 17
- 18. Thời gian tiết kiệm được: +60 giờ! 18
- 19. GRID 19
- 22. Thời gian tiết kiệm được: +12 giờ! 22
- 27. Thời gian tiết kiệm được: +5 giờ! 27
- 34. Thời gian tiết kiệm được: +12 giờ! 34
- 37. Thời gian tiết kiệm được: +10 giờ! 37
- 45. 45
- 46. 46
- 47. 47
- 48. 48
- 49. 49
- 50. 50
- 51. 51
- 52. 52
- 53. 53
- 54. VietNam 54
- 55. 55
- 56. 56
- 57. 57
- 58. 58
- 59. 59
- 61. Nguồn tham khảo http://blog.lynda.com/2013/08/21/boot strap-3-what-you-need-to-know/ http://designwall.com http://getbootstrap.com/2.3.2/ http://anhthienad.com/blog/2013/10/h uong-dan-su-dung-twitter-bootstrapframework-2-3-2.html 61
Notes de l'éditeur
- -Respondsive web design last year
- Do @mdovà @fat pháttriểntại TwitterGần 2 năm, 16 phiênbản
- Twitter Bootstrap là 1 front-end framework mã nguồn mở giúp bạn thiết kế 1 ứng dụng web 1 cách nhanh chóng, dễ dàng và “hợp thời trang” Nó là 1 trong số các CSS-Framework sử dụng dễ nhất thế giới tại thời điểm hiện tại để dùng cho nghành Công Nghiệp Web hiện nay.Giả sử, bạn không biết gì về thiết kế 1 trang Web. Tất cả những gì bạn cần làm là viết một đoạn mã HTML theo các thông số kỹ thuật của Bootstrap quy định và chỉ trong 1 thời gian ngắn Twitter Bootstrap sẽ viết mã CSS cho bạn, component Jquery và các công cụ Javascript phổ biến khác, điều mà trước đây, bạn phải cực khổ khi “làm” web thì với framework này, bạn sẽ giảm thiểu được số “thời gian cực khổ ấy” nhưng vẫn cho ra sản phẩm như “ý tưởng” mà bạn đã suy nghĩ trong đầu hoặc ý tưởng của khách hàng mạng lại.Công việc của bạn, chỉ đơn giản là đặt đúng những thẻ HTML vào đúng chỗ của nó mà thôi. Mình sẽ giải thích kỹ hơn ở bên dưới…
- Nghĩa là trang Web của bạn thiết kế có thể co giãn tương thích với các loại thiết bị di động như : Tablet, Smartphone, Phabet… mà ở trên đó họ có thể xem nội dung của trang Web 1 cách bình thường và không gây khó chịu.
- Ngoài ra, giúp trả lời dễ dàng những câu hỏi như là : Giao diện UI này thực sự tốt ko ? Có thể dùng nó làm giao diện trong vòng vài năm ko ?Điều này sẽ giúp cho dự án của bạn đạt được tính thực tế và tương tác cao giữa ý tưởng và kết quả đạt được.Một khi đã thiết kế được 1 bản gốc và thống nhất ý kiến của các thành viên trong team hoặc khách hang thì lúc đó mọi chuyện sẽ rõ ràng và dễ dàng hơn ở những bước kế tiếp trong 1 quy trình như quy trình xoắn ốc chẳng hạn.
- 1 framework thành công hay không là nhờ chủ yếu vào cộng đồng sử dụng nó. Điều này rất quan trọn, đặc biệt là trong các dự án về mã nguồn mở. Nó khiến cho Bootstrap ngày một tối ưu, hợp xu hướng, thân thiện hơn với người sử dụng.
- Theo như thông tin trên trang http://getbootstrap.com thì css-framework này gồm có :CSS and HTML for creating Grids, Layouts, Typography, Tables, Forms, Navigation, Alerts, Popovers etc. And along with that, comes a host of Jquery plugins to create awesome UI components like Transitions, Modal, Dropdown, Scrollspy, Tooltip, Tab, Popover, Alert, Button, Collapse, Carousel, Typeahead, Affix.Scaffolding: KhungHệthốnglướiGrid – Lưới, là những thẻ div được chia sẵn để các bạn có thể định vị các div lớn, các phần tử 1 cách dễ dàng trên 1 layout màn hình. Ở đây, mình đứng dưới góc độ các bạn chưa biết gì về thiết kế mỹ thuật. Với grid bạn có thể canh độ rộng của 1 div ra giữa trang web, chia trang Web ra những div nhỏ theo ý bạn muốn. Chỉ cần dùng class “span6″ là bạn có thể cho độ rộng của div bằng 1 nữa trang Web rồi.2. Fluid grid system : Hệthốnglướimềmdẻo : co giãnvàtùybiếncao. ( dùng % đểtínhkhoảngcách )
- Gap between designer and developerCommon component
- 6 giờ để định nghĩa 1 vài class.4 giờ để tạo 1 trang Web responsive2 giờ tiếp theo để tạo giao diện, hiệu ứng và kiểm tra lỗi phát sinh.
- LESS : CSS là một ngôn ngữ đặc tả cực kỳ đơn giản và không có tính hệ thống. Khi 1 hệ thống Web-Application đòi hỏi bạn phải thiết kế với hang nghìn dòng CSS thì việc bảo trì và nâng cấp CSS quả là 1 cơn ác mộng. Để giải quyết điều đó, 1 CSS pre-preprocessor được tạo ra để có thể soạn thảo, biên dịch các styles theo một cách chủ động hơn.Hiện tại trên cộng đồng hiện nay tồn tại 2 CSS- prepreprocessor là LESS vs SASS.
- Với LESS, ta có thể sử dụng CSS như các hàm trong Javascript : gồm có biến, hàm function…
- Funtioncs
- Lập trình CSS theo kiểu cấu trúc cây thư mục.
- Dùng các phép tính toán vào CSS.
- Cách cài đặt