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"> 如不使用下拉组件,则点击下拉菜单无响应动作.
插件内还可以设置很多参数和方法.
如:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 默认的导航栏</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body> <nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">W3Cschool</a>
</div>
<div>
<ul class="nav navbar-nav"> //备注: nav是导航条样式 navbar-nav是导航条内部ui li的样式
<li class="dropdown"> //备注: 使用下拉菜单（Dropdown）插件
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</nav> </body>
</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