admin管理员组文章数量:1794759
Bootstrap
Bootstrap介绍
2011年8月，Twitter的设计师Mark Otto和Jacob Thornton发布了一个前端开发工具：Bootstrap。2012年2月，Bootstrap 2.0发布，支持HTML5，CSS3，短小精悍。
快速上手
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 mlam 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步：
- 使用普通的HTML元素定义窗口内容。
- 将一个HTML元素与窗口关联。
- 激活窗口。
例如以下的一个示例。
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>控制modal显示和隐藏的方法：
- $("#mymodal").modal("toggle")
- $("#mymodal").modal("show")
- $("#mymodal").modal("hide")
modal 技巧
Bootstrap modal使用有几个技巧。
modal在页面加载时自动隐藏：
<div class="modal hide" id="mymodal">modal弹出和隐藏时有淡入淡出效果：
<div class="modal hide fade" id="mymodal">CSS3 渐变
Bootstrap使用到CSS3渐变的特点，如在导航栏，摘取一段渐变代码：
background-color: #2c2c2c; background-image: -moz-linear-gradient(top, #333333, #222222); background-image: -ms-linear-gradient(top, #333333, #222222); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); background-image: -webkit-linear-gradient(top, #333333, #222222); background-image: -o-linear-gradient(top, #333333, #222222); background-image: linear-gradient(top, #333333, #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的成员整理的，非常简洁实用。
Free responsive admin template - 基于BootStrap的应用级theme。
使用Bootstrap的网站：
- Built With Bootstrap（展示用Bootstrap搭建的网站）
- / PyCon China 2011(ver1.3.0)
- / 计划.IN（网站作者是:/）
- / code.NASA
转载于:
本文标签： Bootstrap
版权声明：本文标题：Bootstrap 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1692599065a151488.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论