Bootstrap学习笔记
Bootstrap介绍
2011年8月，Twitter的设计师Mark otto和Jacob Thornton发布了一个前端开发工具：Bootstrap。2012年2月，Bootstrap 2.0发布，支持HTML5，CSS3，短小精悍。波黎克斯使用VimWiki写作，并用jQuery/Bootstrap优化显示效果的网站，因此有一份Bootstrap的实战记录。
快速上手
Step-1
Bootstrap依赖于jQuery，因此先下载最新的jQuery库。
Step-2
从Github下载Bootstrap 2.0源码。
Step-3
测试Bootstrap可用，在HTML中包含：
- jQuery：
jquery-1.7.1.js - Bootstrap CSS文件：
bootstrap/css/bootstrap.css - BootStrap Javascript文件：
bootstrap/js/bootstrap.js
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css" />
<title>Hello BootStrap</title>
</head>
<body>
<h1>Hello BootStrap</h1>
<ul class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown" id="menu1">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">Dropdown<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another Action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
<script src="jquery-1.7.1.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script>
$(".dropdown-toggle").dropdown()
</script>
</body>
</html>
打开浏览器，有类似如下输出：
要注意文档类型用HTML5 doctype，即：
<!DOCTYPE html>
Bootstrap 详解
Bootstrap解压后的主要目录/文件：
- ./css，包括 bootstrap.css,bootstrap.min.css
- ./js，包括 bootstrap.js,bootstrap.min.js
- ./img，包括 glyphicons-halflings.png，即Glyphicons的icon集合
手册分为以下几个类别介绍了Bootstrap：
- Scaffolding，介绍了文档布局方式。
- Base CSS，介绍了如何用CSS渲染HTML元素（如table,form,button等），以及使用由Glyphicons提供的icons。
- Componets，介绍了常见页面元素，如按钮(Buttons),导航栏(Navigation)，标签(Labels)，徽标(Badges，如序列行前的数字)，警告条(Alerts)，进度条(Progress bars)等。
- Javascript plugins，介绍了多个Javascript扩展库。
- Using LESS，介绍了如何用LESS扩展Bootstrap。
以下笔记，也大致按此分类记录。
文档分块
Scaffolding（理解为页面布局）。
Bootstrap把一个文档块（Block）分为12列，有固定（grid system）和浮动（Fluid grid system）两种。
固定块：
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
浮动块和固定块类似，不过用row-fluid替换row。
在row的嵌套上，两者有所区别。固定块：子列的.span*之和，等于父列的.span值（如父列为span6，可有2个span3的子列）；浮动块：子列的.span*之和始终可为12（即100%）。
列偏移
让两个span4分散在两端，中间空出1个span4的宽度，使用.offset：
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4 offset4">...</div>
</div>
| 变量 | 默认值 | 说明 |
|---|---|---|
| @gridColumns | 12 | 列数 |
| @gridColumsWidth | 60px | 列宽 |
| @gridGutterWidth | 20px | 列间距 |
页面布局
固定布局的页面：
<body>
<div class="container">
</div>
</body>
浮动布局使用<div class="container-fluid">：
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!-- nav,sidebar -->
</div>
<div class="span10">
<!-- page content -->
</div>
</div>
</div>
Javascript扩展
Carousel（图片循环播放）
<div id="photos" class="carousel">
<div class="carousel-inner">
<div class="active item"><img src="images/t1.JPG" />
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio,dapibus ac facilisis in,egestas eget quam. Donec id elit non mi porta gravida at eget m
lam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item"><img src="images/t2.JPG" /></div>
</div>
<a class="carousel-control left" href="#photos" data-slide="prev">‹</a>
<a class="carousel-control right" href="#photos" data-slide="next">›</a>
</div>
modal
当需要弹出一个窗口让用户确认时，可以用alert()函数。但alert()只能输出简单的文本，在不同浏览器显示效果还不同。可以用BootStrap modal弹出一个界面一致的窗口，并在其中输出结构良好的文档，例如：
弹出小窗口后，会把背后的页面锁住，并呈现黑灰色。
使用modal需要3步：
例如以下的一个示例。
1. 定义窗口内容：
<div class="modal" id="mymodal">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h3>Are you sure remove item from order ?</h3>
</div>
<div class="modal-body">
<p><img scr="URL"> Any HTML elements. </p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary">Delete</a>
</div>
</div>
2. 关联窗口：
<a href="#mymodal" data-toggle="modal" class="btn btn-mini">删除商品</a>
3. 激活窗口：
$("#mymodal").modal({show:false});
modal 详解
从以上示例可见，窗口可以有几个部分：
<div class="modal" id="mymodal">
<div class="modal-header"></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
- $("#mymodal").modal("toggle")
- $("#mymodal").modal("show")
- $("#mymodal").modal("hide")
modal 技巧
Bootstrap modal使用有几个技巧。
<div class="modal hide" id="mymodal">
modal弹出和隐藏时有淡入淡出效果：
<div class="modal hide fade" id="mymodal">
扩展和自定义Bootstrap
环境准备
安装npm（Node Package Manager），而npm依赖于Node.js，需先安装：
$ wget http://nodejs.org/dist/v0.6.14/node-v0.6.14.tar.gz # ./configure && make install # curl http://npmjs.org/install.sh | sh
编译安装node.js的时间较长，完成后，npm的安装脚本自动下载如 http://registry.npmjs.org/npm/-/npm-1.1.13.tgz 这样的文件，自解压安装。
安装BootStrap编译依赖的工具
# npm install -g less uglify-js jshint recess
这些工具被安装到了 /usr/local/lib/node_modules/
$ ls /usr/local/lib/node_modules/ jshint/ less/ npm/ recess/ uglify-js/
粗略了解了这些工具的作用，记录如下：
- recess
- recess是Twitter的Jacob Thornton开发的一个工具，目的是处理CSS，建立在LESS的基础上。
- jshint
- jshint类似jslint，是一个JavaScript代码检测工具（也就是JavaScript的lint）。
- uglify-js
- uglify-js是一个JavaScript分析/压缩/美化工具（uglify的意思是丑化，有点讽刺阿）。
编译BootStrap
从github下载BootStrap。
可见BootStrap的目录结构：
$ ls docs img js less LICENSE Makefile package.json README.md
这里出现了Makefile文件和less目录。
先测试下用 less 重新生成 bootstrap.css：
$ lessc ./less/bootstrap.less > bootstrap.css $ lessc --compress ./less/bootstrap.less > bootstrap.min.css
测试下生成 BootStrap：
$ make bootstrap mkdir -p bootstrap/img mkdir -p bootstrap/css mkdir -p bootstrap/js cp img/* bootstrap/img/ recess --compile ./less/bootstrap.less > bootstrap/css/bootstrap.css recess --compress ./less/bootstrap.less > bootstrap/css/bootstrap.min.css recess --compile ./less/responsive.less > bootstrap/css/bootstrap-responsive.css recess --compress ./less/responsive.less > bootstrap/css/bootstrap-responsive.min.css cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > bootstrap/js/bootstrap.js uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.tmp.js echo "/*!\n* Bootstrap.js by @fat & @mdo\n* copyright 2012 Twitter,Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > bootstrap/js/copyright.js cat bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js > bootstrap/js/bootstrap.min.js rm bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js
这里用recess从.less生成.css，用uglifyjs处理了JavaScript代码，-nc参数的意思是--no-copyright，然后加了BootStrap自己的版权信息。
CSS3 渐变
Bootstrap使用到CSS3渐变的特点，如在导航栏，摘取一段渐变代码：
background-color: #2c2c2c; background-image: -moz-linear-gradient(top,#333333,#222222); background-image: -ms-linear-gradient(top,#222222); background-image: -webkit-gradient(linear,0 0,0 100%,from(#333333),to(#222222)); background-image: -webkit-linear-gradient(top,#222222); background-image: -o-linear-gradient(top,#222222); background-image: linear-gradient(top,#222222); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333',endColorstr='#222222',GradientType=0);
其他
利用Bootstrap写的一个导航栏，默认设置下就挺像Google的置顶导航栏：
参考
Bootstrap支持的icons，这些图标来自Glyphicons。
Bootstrap配色生成器 上传一张图片，根据图片色调，生成新的Bootstrap css文件（Generate your own Bootstrap color scheme from an image and customize to your taste）。
在线生成BootStrap新样式 提供可视化的BootStrap元素配置。
构建Twitter BootStrap 图灵社区翻译稿。
less中文版讲解 淘宝UED的成员整理的，非常简洁实用。
SAE上的BootStrap 新浪对BootStrap提供的CDN。
略晓 应该是用Bootstrap，看其css文件，像是修改Bootstrap后用LESS生成。
使用Bootstrap的网站：
- http://builtwithbootstrap.com Built With Bootstrap（展示用Bootstrap搭建的网站）
- http://cn.pycon.org/2011/ PyCon China 2011(ver1.3.0)
- https://jihua.in/ 计划.IN（网站作者是:http://ichuan.net/）
- http://code.nasa.gov/project/ code.NASA
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
