bootstrap 和 jQuery mobile学习总结

一、bootstrap 组件

Bootstrap 插件部分 总结:

1、下拉菜单(dropdown)

触发源 data-toggle="dropdown"

被出发 

二、jQuery mobile组件

一、页面主结构 (data-role="page" /header/main/footer)
data-role="page" id="pageone"
    data-role="header"
    data-role="main" class="ui-content"
    data-role="footer"
总结:data-role="page" id="pageone" 为一个完整页面,也就是说写在这个div外面的任何元素都不会显示,data-role="page" id="pagetwo"则是另外一个

页面,两者之间可通过来跳转
----------------------------------------------------------------------------------------------
二、弹出对话框(data-dialog="true")
data-dialog="true" 给跳转到的页面加上该属性就会变成对话框
----------------------------------------------------------------------------------------------
三、页面的过渡效果 (data-transition="slide")

只要给跳转的a链接 加上该属性就可以更改切换的风格效果data-transition="slide"/fade/flip/flow/pop/slidefade/slideup/slidedown/turn/none
----------------------------------------------------------------------------------------------
四、按钮 (data-role="button")
三种写法:


按钮

小按钮    class="ui-btn ui-btn-inline"
返回按钮  data-rel="back"
圆角阴影小按钮 class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"

按钮组合 
用该div包裹即可 ---------------------------------------------------------------------------------------------- 五、图标(ui-icon-xx) 名称 位置 颜色(黑色 ) class="ui-btn ui-icon-search ui-btn-icon-top" class="ui-btn ui-icon-arrow-l ui-btn-icon-left ui-alt-icon" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon" ---------------------------------------------------------------------------------------------- 六、popup弹出框 (data-role="popup") data-role="popup" 弹出框加上该属性,a链接href到该弹框的id即可 关闭按钮 关闭 弹框位置 data-position-to="window"(居中显示) data-position-to="#demo" (显示在 id="demo" 元素上) data-position-to="origin"(显示在触发源上方) 过渡效果(同页面切换过渡效果):data-transition="fade"/turn/... 带方向箭头的弹窗 触发源 左边 弹出框
(data-arrow="l"取值l/t/r/b) ---------------------------------------------------------------------------------------------- 七、导航条(data-role="navbar")
---------------------------------------------------------------------------------------------- 八、滑动面板(data-role="panel") data-role="panel" 滑动的面板加上该属性 触发的a链接href到该面板的id即可 滑动效果 data-display="overlay"(堆叠)/push(推动)/reveal(默认,“像幻灯片一样从屏幕划出”) ---------------------------------------------------------------------------------------------- 九、折叠(ata-role="collapsible")

点击我 - 我可以折叠!

我是可折叠的内容。

---------------------------------------------------------------------------------------------- 十、表格(data-role="table") ---------------------------------------------------------------------------------------------- 十一、网格布局 网格类 列 列宽 对应 ui-grid-solo 1 100% ui-block-a ui-grid-a 2 50% / 50% ui-block-a|b ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e ---------------------------------------------------------------------------------------------- 十二、列表(ata-role="listview" ) ---------------------------------------------------------------------------------------------- 十三、表单 (data-role="flipswitch"...) 1.按钮(switch) 2.搜索框 3.提交按钮 4.单选按钮
Choose your gender:
5.复选框
Choose as many favorite colors as you'd like:
6.下拉菜单(select option)
7.自定义下拉加多选 ---------------------------------------------------------------------------------------------- 十四、自定义主题 .ui-bar-f { color: red; background-color: yellow; } .ui-body-f { font-weight: bold; color: white; background-color: purple; } .ui-page-theme-f { font-weight: bold; background-color: green; } jQuery Mobile 提供了 2 种不同的主题样式, 从 "a" 到 "b" - 每一种主题的按钮,工具条,内容块等等颜色都不一致,每个主题的视觉效果也不一样。 ---------------------------------------------------------------------------------------------- 十五、事件 为了让jQuery代码脚本在DOM元素加载完成后才开始执行: $(document).on("pagecreate","#pageone",function(){ // jQuery 事件... }); 其他: 点击 tap 长按 taphold 滑动 swip/swipeleft/swiperight 滚动 scrollstart/scrollstop 方向改变 orientationchange ---------------------------------------------------------------------------------------------- 总结: 功能组件 data-role="功能" 样式组件 class="ui-样式" 过渡 data-transion 位置 data-position ----------------------------------------------------------------------------------------------

你可能感兴趣的:(bootstrap,jquery-mobile)

CustomerID CustomerName ContactName Address City PostalCode Country