前端框架及交互组件集Bootstrap
2012-11-19 17:14
585 查看
基于HTML,CSS,JAVASCRIPT的简洁灵活的流行前端框架及交互组件集
可以很方便构建出流行的HTML元素。
记录下来方便以后使用。。。
项目地址:http://twitter.github.com/bootstrap/
中文版介绍:http://wrongwaycn.github.com/bootstrap/docs/index.html
可以很方便构建出流行的HTML元素。
记录下来方便以后使用。。。
适用于任何场景,适用于每一个人
需要理由来爱上Bootstrap么?那就请接着向下看。由匠人建,为匠人用
和您一样,我们乐于创造出色的web应用,于是想帮助更多象我们一样的匠人更为高效快捷地构建产品。Bootstrap因此而生。适应各种技术水平
Bootstrap适应不同技术水平的从业者,无论是设计师还是程序员,大牛还是菜鸟。既能用来开发简单的小东西,也能构造更为复杂的应用。跨设备,跨浏览器
最初设想中的Bootstrap只支持现代浏览器,不过新版本已经能支持所有主流浏览器(甚至包括IE7)。从Bootstrap 2开始,提供对平板和智能手机的支持。12列栅格布局
栅格系统不是万能的,不过在应用的核心层有一个稳定和灵活的栅格系统确实可以让开发变得更简单。可以选用内置的栅格或是自己手写。响应式设计
从Bootstrap 2开始,提供完整的响应式特性。所有的组件都能根据分辨率和设备灵活缩放,从而提供一致性的用户体验。样式化的文档
与其他前端工具箱不同,Bootstrap优先设计了一个样式化的使用指南,不仅用来介绍特性,更用以展示最佳实践,应用以及代码实例。不断完善的库
尽管只有10kb(gzip压缩后),Bootstrap却仍是最完备的前端工具箱之一,提供了几十个全功能的随时可用的组件。定制的jQuery插件
一个出色的组件设计岂能没有易用易扩展的人机界面?Bootstrap为此提供了定制的jQuery内置插件。用LESS构建
当传统的枯燥CSS写法止步不前时,LESS横空出世了。LESS中使用变量,嵌套,操作,混合编码,花费很小成本却让书写CSS更快更灵活。HTML5
支持HTML5标签和语法CSS3
逐步改进组件达到最终效果开源
全部托管于 GitHub.Twitter制造
由经验丰富的工程师和设计师奉献<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- Le styles --> <link href="css/bootstrap.css" rel="stylesheet" /> <link href="css/bootstrap-responsive.css" rel="stylesheet"> <style type="text/css"> body { padding-top: 60px; padding-bottom: 40px; } </style> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div style="margin-left:10px;"> <p><a class="btn btn-primary btn-large">了解更多 »</a></p> <div class="btn-group"> <button class="btn">前一页</button> <button class="btn">回目录</button> <button class="btn">后一页</button> </div> <br> <div style="margin-top: 18px;" class="btn-toolbar"> <div class="btn-group"> <button data-toggle="dropdown" class="btn dropdown-toggle">动作 <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">动作</a></li> <li><a href="#">其他动作</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">被间隔的链接</a></li> </ul> </div> <!-- /btn-group --> <div class="btn-group"> <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">动作 <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">动作</a></li> <li><a href="#">其他动作</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">被间隔的链接</a></li> </ul> </div> <!-- /btn-group --> <div class="btn-group"> <button data-toggle="dropdown" class="btn btn-danger dropdown-toggle">危险 <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">动作</a></li> <li><a href="#">其他动作</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">被间隔的链接</a></li> </ul> </div> <!-- /btn-group --> </div> <br> <div class="btn-toolbar"> <div class="btn-group"> <button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">警告 <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">动作</a></li> <li><a href="#">其他动作</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">被间隔的链接</a></li> </ul> </div> <!-- /btn-group --> <div class="btn-group"> <button data-toggle="dropdown" class="btn btn-success dropdown-toggle">成功 <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">动作</a></li> <li><a href="#">其他动作</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">被间隔的链接</a></li> </ul> </div> <!-- /btn-group --> <div class="btn-group"> <button data-toggle="dropdown" class="btn btn-info dropdown-toggle">信息 <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">动作</a></li> <li><a href="#">其他动作</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">被间隔的链接</a></li> </ul> </div> <!-- /btn-group --> <div class="btn-group"> <button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">逆操作 <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">动作</a></li> <li><a href="#">其他动作</a></li> <li><a href="#">其他</a></li> <li class="divider"></li> <li><a href="#">被间隔的链接</a></li> </ul> </div> <!-- /btn-group --> </div> </div> <!-- /container --> <!-- Le javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="http://wrongwaycn.github.com/bootstrap/docs/assets/js/jquery.js"></script> <script src="js/bootstrap.js"></script> <script language="javascript"> $(document).ready(function(){ $(".dropdown-menu li a").each(function(){ $(this).attr('href', 'javascript:void(0);') .bind('click', function(){ alert( $(this).text() ); }); }); }); </script> </body> </html>
项目地址:http://twitter.github.com/bootstrap/
中文版介绍:http://wrongwaycn.github.com/bootstrap/docs/index.html
相关文章推荐
- Bootstrap 基于HTML,CSS,JAVASCRIPT的简洁灵活的流行前端框架及交互组件集
- Bootstrap响应式前端框架笔记十七——下拉列表交互
- Bootstrap响应式前端框架笔记十六——模态框交互
- Bootstrap框架---krajee插件fileinput--最好用的文件上传组件----单多张图片上传交互方式三(推荐)
- Bootstrap响应式前端框架笔记十——导航栏相关组件
- Web 前端 UI 框架 Bootstrap
- 【前端组件】bootstrapValidator表单验证组件实践
- 【前端框架之Bootstrap01】我们一起来看看这个家伙是什么
- Web前端框架bootstrap实战【第一次接触使用】
- 一个非常优秀的前端框架--BootStrap
- 前端框架及组件参考
- 【Bootstrap框架】——组件(Component)
- Web前端框架bootstrap资料收集
- Bootstrap响应式前端框架笔记十八——导航滚动监听
- Bootstrap前端框架学习总结---Bootstrap介绍
- 响应式前端框架Bootstrap系列(4)表格
- 前端框架Bootstrap的使用
- 响应式前端框架Bootstrap系列(6)下拉列菜单
- 响应式前端框架Bootstrap系列(8)图片处理
- 响应式前端框架Bootstrap系列(10)字体图标和消息徽章