Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架.(主要是结合HTML5 CSS3的样式, 基于jquery+Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。 )
2011年，twitter的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。Bootstrap由MARK OTTO和Jacob Thornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork的项目。
GitHub上这样介绍 bootstrap：简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集。基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档，自定义JQuery插件，完整的类库，基于Less等。
bootstrap最新版本:
- V2.3.2
- v3.3.5
类似jquery. 2的版本不再更新但能兼容旧版的浏览器. 3版本代码比较简洁,不再兼容IE8甚至是IE7和IE6
2版本的官方地址 http://v2.bootcss.com/
起步和脚手架大概就是介绍bootstrap的情况. 以及搭建页面. 其中可以考虑将引入的js css等文件放到本地,或者使用百度之类的cdn网站,这样访问速度比较快
bootstrap大概分为几个模块:
[脚手架][基本CSS样式] [组件] [javascript插件]
脚手架: 布局相关
基本css样式: 常规的样式.
组件: 下拉菜单 按钮组 导航条 分页 警告框 进度条 等 如下面例子 <ul class="nav navbar-nav">
javascript插件: 组件的相关动作实现.如下面例子用到的下拉菜单组件 <li class="dropdown"> 如不使用下拉组件,则点击下拉菜单无响应动作.
插件内还可以设置很多参数和方法.
如:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Bootstrap 实例 - 默认的导航栏</title> 5 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> 6 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 7 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 8 </head> 9 <body> 10 11 <nav class="navbar navbar-default" role="navigation"> 12 <div class="navbar-header"> 13 <a class="navbar-brand" href="#">W3Cschool</a> 14 </div> 15 <div> 16 <ul class="nav navbar-nav"> //备注: nav是导航条样式 navbar-nav是导航条内部ui li的样式 17 <li class="dropdown"> //备注: 使用下拉菜单（Dropdown）插件 18 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 19 Java 20 <b class="caret"></b> 21 </a> 22 <ul class="dropdown-menu"> 23 <li><a href="#">jmeter</a></li> 24 <li><a href="#">EJB</a></li> 25 <li><a href="#">Jasper Report</a></li> 26 <li class="divider"></li> 27 <li><a href="#">分离的链接</a></li> 28 <li class="divider"></li> 29 <li><a href="#">另一个分离的链接</a></li> 30 </ul> 31 </li> 32 </ul> 33 </div> 34 </nav> 35 36 </body> 37 </html>
效果:
最后:
jquery 和Extjs 选择之外 在ui方面也出现了新的选择:
easyUI、Extjs和Bootstrap都是浏览器前端控件库，
easyUI基于jQuery，免费的各个控件相对独立；
Extjs更高级一些控件与控件直接的交互用起来会很方便，要收费；
Bootstrap相对前两个来说在控件上面会差很多，但是在不同终端的兼容性方面做得很好，就是电脑、手机、平板等这些，这一点是前两个无法比的。
一般easyUI和Extjs是用来做后台管理系统的，Bootstrap是做网站界面的。
推荐学习地址:
http://getbootstrap.com/2.3.2/ http://v3.bootcss.com/
http://www.runoob.com/bootstrap/bootstrap-tutorial.html
http://www.cnblogs.com/ventlam/archive/2012/05/28/2520703.html