6 个基于Bootstrap的实用开发教程和演示
2014-04-01 19:36:01   来源:   评论:0 点击:

1 移动为先的Bootstrap3Bootstrap3已经发布好几周了, 现在该是我们看看Bootstrap有什么新鲜内容的时候了。首先,最重要的一个改变就是支

1.  移动为先的Bootstrap3 

Bootstrap3已经发布好几周了, 现在该是我们看看Bootstrap有什么新鲜内容的时候了。首先,最重要的一个改变就是支持响应式网站设计,原来的响应式模块已经去掉了。 现在从内核,Bootstrap3就支持响应式设计,不仅仅如此,更深入的在于,整合了Mobile First的设计思想,即移动为先,这个概念最初由Luke wrobleski在他的博客提出。在这篇文章中,我们将分享一些BT3的新内容,希望大家喜欢! 



在线演示 

2.  使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验 

大家在开发基于web的网站或者web应用中,常常在AJAX调用的过程中需要提示用户并且展示相关的“加载中”效果,类似的UI设计也非常多,比如,当点击一个按钮后,在它的旁边显示一个 “加载中” 文字,或者是添加一个“旋转GIF”动画效果图。 



在线演示1  /  在线演示2  /  在线演示3 

3.  基于bootstrap的纯CSS多级菜单 - BootM 

BootM是基于bootstrap开发的一款多级菜单实现。其主要特性包括:无JS,基于bootstrap,响应式设计,无层次限制,基于文本的图标。 



在线演示 

4.  Bootstrap3和jQuery实现响应式iOS/Android风格滚动到页顶(底)弹跳效果 

如果大家使用iOS或者android相关移动平台的话,对于页面滑动到最底端后的弹跳效果肯定不会陌生,在这篇教程中,我们将使用最新版的Bootstrap3和jQuery来生成一个类似移动设备app的web页面效果,支持各种设备的响应式展示。 



在线演示 

5.  Bootstrap富文本编辑器bootstrap-wysiwyg的使用 

使用其实很简单的,倒入bootstrap相关CSS,JS,jQuery,还有bootstrap-wysiwyg的JS。 



在线演示 

6.  Bootstrap3的一个landing page(着落页模板) 

非常适合你做产品推广或者app推广,支持响应式,并且可以自行扩展开发! 



在线演示 

相关热词搜索:

上一篇:网易游戏TTT计划实习生笔试题
下一篇:程序员如何提高自我修养