1 / 12

响应式编程 Part.01 布 局 与 MVVM

响应式编程 Part.01 布 局 与 MVVM. Crabo Yang 2014.2. Responsive layout. 12 cols Grid System .container .row .col-xs-offset-4 xs 768px sm 992px md 1200px lg Form Inline form http://getbootstrap.com/css/#forms-inline Input groups http://getbootstrap.com/components/# input-groups

cybil
Download Presentation

响应式编程 Part.01 布 局 与 MVVM

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 响应式编程 Part.01布局 与 MVVM Crabo Yang 2014.2

  2. Responsive layout • 12 cols Grid System • .container • .row • .col-xs-offset-4 • xs 768px sm 992px md 1200px lg • Form • Inline form • http://getbootstrap.com/css/#forms-inline • Input groups • http://getbootstrap.com/components/#input-groups • Table • .table-responsive

  3. Responsive component • Modal • http://getbootstrap.com/javascript/#modals • Dropdown • http://getbootstrap.com/javascript/#dropdowns • Tooltip • http://getbootstrap.com/javascript/#tooltips • Alert • http://getbootstrap.com/javascript/#alerts • Tab • http://getbootstrap.com/javascript/#tabs

  4. Responsive themeS • SIZE • Btn-lg • btn • Btn-sm • Btn-xs • COLOR • Btn-default • Btn-primary • Btn-success • Btn-info • Btn-warning • Btn-danger

  5. MVVM, what?

  6. MVVm in js

  7. MVVM JS Frameworks

  8. MVVM TRends

  9. MVVM core • ViewModel定义 • 绑定依赖 • 模板绑定 • 数据绑定（完成jQuery 90%的事） • 数据填充 • 显示隐藏 • 循环生成 • 类名添加移除 • 样式操作 • 事件绑定 • 引入局部模板

  10. BOOTstrap+mvvm=kendo UI • Bootstrap theme • Requirejs • KENDO UI • Observable • DataSource • Widgets • Validator • TreeView • Grid • Scheduler • DatePicker

  11. LESS (Mobile first) • DEMO • LessCss

  12. Q&A • Keywords • Less • Requirejs • Mvvm • Bootstrap • kendo

More Related