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

转载于:https://my.oschina.net/OQKuDOtsbYT2/blog/131156

Bootstrap - 前端框架相关推荐

html5前端开发框架模板,HTML5中50个免费的Bootstrap前端框架模板
原标题:HTML5中50个免费的Bootstrap前端框架模板毫无疑问,Bootstrap模板的受欢迎程度依然如雨后春笋般迅速增长,这股力量就在不久前还被低估了呢,Bootstrap前端框架基于最新 ...
Bootstrap前端框架学习（一）：Bootstrap在Vue项目中的安装及可视化布局
Bootstrap前端框架学习(一):Bootstrap在Vue项目中的安装及可视化布局 node.js的安装 bootstrap的安装 bootstrap快速布局 node.js的安装我们需要安装 ...
bootstrap 按钮样式单选效果_【20201117】Bootstrap前端框架学习笔记
1. 介绍 1.1 介绍 Bootstrap是一个免费的web前端框架,它将HTML.CSS.Javascript结合到一起,制定了一系列的前端开发规则,使设计网页就像搭积木一样简单. 今天我们就跟着 ...
Bootstrap 前端框架制作响应式网站
放假突然兴起,想学点前端框架,制作一个页面玩玩(PS:一直做后端,怕忘了前端的知识,所以补一补).说做就做,花了一天的时间,谷歌开发者模式,仿制别人公司的页面(希望不会被查),做了个响应式小网页,可以 ...
二、JavaWeb基础(BootStrap前端框架)
一 .BootStrap概念概述一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript 的,它简洁 ...
50个极好的bootstrap前端框架
转载出处http://sudasuta.com/bootstrap-admin-templates.html 越来越多的设计师和前端工程师开始用bootstrap来作为网页项目的框架,在这一次的免费设 ...
吴裕雄 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 - 前端框架