Posted by:
努力记

努力记,通过记录,计划,让自己的努力可以触碰彩虹!

4,267

Bootstrap:学习

  • 2013-12-29
  • 暂无评论
目前Bootstrap的版本已经是3了

CND加速:

Bootstrap中文网提供了CDN加速功能,可以在本地留有备份,线上使用CDN连接访问,提升性能
http://open.bootcss.com/查找对应的开源模块,本地可以用同样的目录结构
Bootstrap所必须的文件:

技巧:

  1. 对于头部fixed定位,可以在body中添加padding-top已保证文档内容可以从正确的高度开始渲染,底部同样:padding-bottom
  2. 用栅格系统能很容易的布局页面位置

css样式:

  • 栅格系统:在container下添加row样式,可以非常容易的布局整个页面,并且可以容易的兼容响应式设计在不同分辨率下提供兼容的样式展示
  • 表单样式:内联form-inline,水平排列样式form-horizontal
  • 按钮:<button type="button" class="btn btn-default">Default</button>
Bootstrap的灵活设计:组件
大大的简化页面设计提供了丰富的工具使用,完全能满足绝大多数功能样式需求
特别是:下拉菜单导航分页警告框进度条

js插件:

  • 可以打包使用bootstrap.min.js,也可以根据需要单独一个个导入它们
  • 所有插件都依赖于jQuery.js,并且调用形式也与jQuery一致,支持链式调用,支持默认参数,option对象或特殊的字符串参数
获取插件实例:

$('选择器').data('插件名');
对于插件冲突:
$.fn.bootstrapBtn = $.fn.button.noConflict();

重新设置新的插件名称
对于事件开始前被触发的事件,可以通过e.preventDefault();停止其操作

注:可以通过设置data属性即可使用所有的js插件
$(document).off('.data-api');

关闭所有的data属性API方式,解除所有绑定到文档命名空间的所有事件

$(document).off('.alert.data-api');

也可以选择性的关闭某个特定插件
option中的选项都可以通过data-来进行设置



back up ↑

无觅相关文章插件,快速提升流量