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="data: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="data:images/t2.JPG" /></div></div><a class="carousel-control left" href="#photos" data-slide="prev">&lsaquo;</a><a class="carousel-control right" href="#photos" data-slide="next">&rsaquo;</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的网站：

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

前端框架之bootstrap学习(一)相关推荐

前端框架之bootstrap框架基本介绍及常用UI框架
前端框架之:bootstrap框架基本使用下载地址:https://v3.bootcss.com/getting-started/ Bootstrap框架版本: 2.x 3.x 4.x // 推荐使 ...
Python 前端框架【Bootstrap】
Bootstrap Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML.CSS.JavaScript 开发的简洁.直观.强悍的前端开发框 ...
前端框架之Bootstrap
框架概述: bootstrap是基于HTML.CSS.JavaScript 开发的简洁.直观.强悍的前端开发框架,使得 Web 开发更加快捷.Bootstrap提供了优雅的HTML和CSS规范,它即是 ...
【JavaWeb】前端框架之Bootstrap
文章目录 1 概念 2 快速入门 3 响应式布局 4 CSS样式和JS插件 1 概念 BootStrap是前端开发框架,基于HTML.CSS.JavaScript. 优点: 定义了很多CSS样式和JS ...
【前端框架之Bootstrap 02】布局与导航
前言距离上次有几天时间了,其实我这段时间也多多少少在看这块,但是效果不好啊! 我就在那里捣鼓捣鼓,搞了半天还是一头雾水,可能是老夫真的老了吧,学习新东西还是不行了! 所以老夫这里就要开始无耻了,我准 ...
【Bootstrap】＜前端框架＞Bootstrap布局容器栅格网格系统
目录一.Bootstrap概述: 二.Bootstrap HTML模板: 三.布局容器和栅格网格系统: 1.布局容器: 2.栅格网格系统: 2.1 媒体查询: 2.2 栅格参数: 2.3 列组合: ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：禁用按钮
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：让按钮看起来像个链接 (仍然保留按钮行为)...
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮组
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>B ...

前端框架之bootstrap学习(一)