Bootstrap

一、Bootstrap简介

1、Bootstrap是什么？

Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个开源的前端开发框架

基于HTML、CSS、JavaScript,代码简洁、视觉优美，用来快速开发基于PC以及移动端的Web页面，更快速、简单。

2010 年 6 月，Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历

各种方案后，Bootstrap 最终被确定下来，并于 2011 年 8 月发布。经过很长时间的迭代升

级，由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端

的开源框架。

Bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容 PC 端、PAD

以及手机移动端的页面访问。

Bootstrap官网：http://www.getbootstrap.com

中文网：http://www.bootcss.com

版本：v3.0、v4.0

2、特点

l 跨设备、跨浏览器

兼容所有主流浏览器，包括IE7、IE8

l 响应式布局

支持PC、移动端（手机、PAD）等，移动设备优先。

l 丰富的组件

表单、下拉菜单、导航、面板、徽章、标签等

l 内置jQuery插件

模态框、工具提示、弹出框、轮播图等。

l 支持动态样式

LESS 、SASS,可以使用变量、嵌套、混合等，编写样式更快、更灵活

l 支持HTML5/CSS3

二、起步

下载Bootstrap

CDN:Content Delivery Network,即内容分发网络，提供稳定快速的资源网络

优化网站：

Js、css等一些库文件，压缩

CDN

解压后，目录呈现这样的结构：

bootstrap/

├── css/

│ ├── bootstrap.css

│ ├── bootstrap.css.map

│ ├── bootstrap.min.css

│ ├── bootstrap-theme.css

│ ├── bootstrap-theme.css.map

│ └── bootstrap-theme.min.css

├── js/

│ ├── bootstrap.js

│ └── bootstrap.min.js

└── fonts/

├── glyphicons-halflings-regular.eot

├── glyphicons-halflings-regular.svg

├── glyphicons-halflings-regular.ttf

├── glyphicons-halflings-regular.woff

└── glyphicons-halflings-regular.woff2

主要分为三大核心目录：css(样式)、js(脚本)、fonts(字体)。

1.css 目录中有四个 css 后缀的文件，其中包含 min 字样的，是压缩版本，一般使用这个；不包含的属于没有压缩的，可以学习了解 css 代码的文件；而 map 后缀的文件则是css 源码映射表，在一些特定的浏览器工具中使用。

2.js 目录包含两个文件，是未压缩和压缩的 js 文件。

3.fonts 目录包含了不同后缀的字体文件。

准备

开发工具：Hbuild

测试工具：Firfox chrome （自带响应式设计模式）

基本模板

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</body>

</html>

注意：控制台报错：

源映射错误：TypeError: NetworkError when attempting to fetch resource. 源 URL：file:///E:/Bootstrap/code/css/bootstrap.css 源映射 URL：bootstrap.css.map[详细了解]

如果不将bootstrap.css.map和bootstrap.css放在一个目录下将报源映射错误

栅格系统

Bootstrap 的栅格系统，提供了一套响应式、移动设备优先的流式栅格系统。

一．移动设备优先

有一份非常重要的 meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。

二．布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于 padding 等

属性的原因，这两种容器类不能相互嵌套。

.container//固定容器

.container-fluid//100%宽度

栅格系统中，浏览器会随着屏幕的大小的增减自动分配最多 12 列。通过一系列的行(row)

与列(column)的组合来创建页面布局。工作原理如下：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。

3.你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

4.类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。

5.栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

6.如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

.col1{

background:red;

}

.col2{

background:#666;

}

.col3{

background:blue;

}

.col4{

background:green;

}

</style>

</head>

<body>

</div>

<hr/>

</div>

<hr/>

</div>

<hr/>

</div>

<hr/>

</div>

</body>

</html>

列偏移、列排序、列嵌套

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

.row div{

background:#ccc;

border: 1px solid red;

}

</style>

</head>

<body>

</div>

<hr/>

</div>

<hr/>

</div>

</div>

</body>

</html>

排版样式

1.页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 行高设置为 1.428(即

20px)；<p>段落元素被设置等于 1/2 行高(即 10px)；颜色被设置为#333。

2.标题

Bootstrap 分别对 h1 ~ h6 进行了 CSS 样式的重构，并且还支持普通内联元素定义 class=(.h1 ~ h6)来实现相同的功能。

注：Bootstrap字体颜色、字体样式、行高均被固定了，从而保

证了统一性，而原生的会根据系统内置的首选字体决定，颜色是最黑色。

在 h1 ~ h6 元素之间，还可以嵌入一个 small 元素作为副标题.

h1 ~ h3 下 small 元素的大小只占父元素的 65%，那么通过计算，h1 ~ h3 下的 small 为 23.4px、19.5px、15.6px；h4 ~ h6 下 small 元素的大小只占父元素的 75% ,分别为：13.5px、10.5px、9px。在 h1 ~ h6 下的 small 样式也进行了改变，颜色变成淡灰色：#777，行高为 1，粗度为 400。

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<span class="h1">span下的h1标题</span>

<hr/>

</div>

<hr/>

<span class="mark">span下的mark</span><br/>

<del>被删除的文本</del><br/>

<s>无用的文本</s><br/>

<ins>插入的文本</ins>

<u>带下划线的文本</u><br/>

<span class="small">span下的小号文本</span><br/>

<strong>着重强调的文本</strong><br/>

<b>用于高亮单词或短语，不带有任何着重的意味</b><br/>

<hr/>

<p style="border:1px solid red;width:30px" class="text-nowrap">超出后不换行</p>

<hr/>

<p class="text-lowercase">hello world!</p>//小写

<p class="text-uppercase">hello world!</p>//大写

<p class="text-capitalize">hello horld!</p>//首字母大写

<hr/>

<!--缩略语

class="initialism"复写html5的abbr

-->

中国北京天安门

</address>

<p>钢铁是咋样练成的？</p>

</blockquote>

<p>钢铁是咋样练成的？</p>

</blockquote>

<hr/>

<p>钢铁是咋样练成的？</p>

</blockquote>

<!--列表

list-unstyled：移除默认样式（无序列表不加小圆点）

list-inline：内联（设置为一行）

-->

<ul>

</ul>

</ul>

<hr/>

<!--水平排列描述列表

dl-horizontal:dt和dd水平排列

-->

<dd>是一款游戏</dd>

</dl>

<hr/>

press <kbd>ctrl + ,</kbd>

<hr/>

<pre><p>Please input...</p></pre>

</body>

</html>

代码样式

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<code>Console.log()</code>表示在控制台输出信息<br/>

请按<kbd>ctrl+s</kbd>进行保存

<hr/>

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

</pre>

var <var>abc</var>=10;

</body>

</html>

表格

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<!--表格

.table:实现基本的表格样式

.table-striped:条纹状表格(让<tbody>里的行产生一行隔一行加单色背景效果) 注：表格效果需要基于基本格式.table

. table-bordered:带边框的表格

.table-hover:让<tbody>下的表格悬停鼠标实现背景效果

-->

<thead>

<!--状态类

可以单独设置每一行/列的背景样式

active:鼠标悬停在行或单元格上

success:标识成功或积极的动作

info:标识普通的提示信息或动作

warning:标识警告或需要用户注意

danger:表示危险或潜在的带来负面影响的动作

-->

</tr>

</thead>

<tbody>

</tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

</body>

</html>

表单

<!DOCTYPE html>

<head>

<style>

</style>

</head>

<body>

<form>

</div>

</div>

</form>

<hr/>

<!--内联表单

(表单元素居于一行)

-->

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</form>

<hr/>

</div>

</div>

</form>

<hr/>

<form>

阅读服务协议

</textarea>

<!--

复选框

disabled:设置禁用

-->

<label>

<input type="checkbox" disabled>吃饭

</label>

</div>

<label>

<input type="checkbox">睡觉

</label>

</div>

<label>

<input type="checkbox">打豆豆

</label>

</div>

<!--

设置内联样式

-->

<input type="checkbox" disabled>睡觉

</label>

<input type="checkbox">打豆豆

</label>

<!--

设置下拉列表

-->

</select>

</form>

<hr/>

<!--校验状态

Has-success:成功状态

Has-error:失败状态

Has-warning:警告状态

添加额外的图标

glyphicon-ok：成功状态

glyphicon-warning-sign：警告状态

glyphicon-remove：错误状态

注意：图标显示在文本框中需要加上.has-feedback和.form-control-feedback

-->

</div>

</div>

</form>

<hr/>

</body>

</html>

按钮

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<button class="btn btn-default">button按钮</button>

<a href="#" class="btn btn-default" role="button">超链接按钮</a>

<br/>

<!--预定义样式、尺寸

样式：btn-default,btn-success,btn-info,btn-warning,btn-danger,btn-primary,

btn-link

尺寸：btn-lg >默认>btn-sm>btn-xs

btn-block:块级按钮（占整行）

-->

<button class="btn btn-primary ">首选项按钮</button>

<button class="btn btn-info btn-xs">一般信息按钮</button>

<button class="btn btn-default btn-block active">激活状态按钮</button>

<button class="btn btn-default btn-block disabled">禁用状态按钮</button>

<a href="#" class="btn btn-default disabled" role="button">禁用超链接按钮</a>

</body>

</html>

图片

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

img{

width:600px;

}

</style>

</head>

<body>

<!--图片 img-thumbnail自带响应式 img-responsive响应式的

.img-rounded:圆角

.img-circle：圆

.img-thumbnail：缩略图

-->

</body>

</html>

辅助类

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

img{

width:600px;

}

.crd{

width:200px;

}

</style>

</head>

<body>

<p class="bg-primary">首选项情景背景色</p>

<p class="bg-success">成功情景背景色</p>

<p class="bg-info">一般情景背景色</p>

<p class="bg-warning">警告情景背景色</p>

<p class="bg-danger">危险情景背景色</p>

</button>

<hr/>

<hr/>

</body>

</html>

响应式工具

<!DOCTYPE html>

<head>

<title>响应式工具</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<!--注：对于显示的内容，有三种变体，分别为：block、inline-block、inline。

-->

<div class="hidden-xs">超小屏幕时隐藏</div>

<div class="visible-md-block">中等屏幕时显示为块状</div>

<div class="visible-sm-inline">小屏幕时显示为内联</div>

</body>

</html>

图标

263个图标

可以使用<i>或<span>标签来使用

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<span class="glyphicon glyphicon-star"></span> Star

</button>

</body>

</html>

下拉菜单

声明式用法的关键核心：

1.外围容器使用 class="dropdown"包裹；

2.内部点击按钮事件绑定 data-toggle="dropdown"；

3.菜单元素使用 class="dropdown-menu"。

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

下拉菜单<span class="caret"></span>

</button>

</ul>

</div>

<br/>

下拉菜单<span class="caret"></span>

</button>

</ul>

</div>

<hr/>

下拉菜单<span class="caret"></span>

</button>

</ul>

</div>

<hr/>

下拉菜单<span class="caret"></span>

</button>

</ul>

</div>

</body>

</html>

按钮组

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</button>

</button>

</button>

</div>

</button>

</button>

</div>

<hr/>

</button>

</button>

</button>

点我 <span class="caret"><span>

</button>

</ul>

</div>

<hr/>

</button>

</button>

</button>

</div>

<hr/>

</div>

</body>

</html>

按钮式下拉菜单

<!DOCTYPE html>

<head>

<title>按钮式下拉菜单</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

点我 <span class="caret"><span>

</button>

</ul>

</div>

<hr/>

<button class="btn btn-default">Click Me</button>

</button>

</ul>

</div>

<hr/>

<button class="btn btn-default">Click Me</button>

</button>

</ul>

</div>

</body>

</html>

输入框组

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</div>

<hr/>

</div>

<hr/>

</div>

<hr/>

</span>

</div>

<hr/>

</span>

</div>

<button class="btn btn-default">Click Me</button>

</button>

</ul>

</div>

</div>

</body>

</html>

导航条

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<!--导航条

navbar-fixed-top 导航条一直显示在最上边，

即使页面向下拉，导航条也显示在最上面

即使代码写在下面，导航条也显示在顶端

navbar-fixed-bottom：将导航补丁在底部

navbar-static-top：静态导航，和页面等宽的导航条，去掉了圆角

不会跟着下拉，而一直显示

navbar-default:默认的导航条

navbar-inverse:反色的导航条

-->

</a>

</div>

</ul>

</span>

</div>

</form>

<p class="navbar-text">Welcome to <a href="#" class="navbar-link">China</a></p>

</div>

</body>

</html>

路径导航

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</ul>

</ol>

</body>

</html>

分页

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</a>

</li>

<li>

</a>

</li>

</ul>

<hr/>

</ul>

<hr/>

</ul>

</body>

</html>

徽章

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

</style>

</head>

<body>

<hr/>

</body>

</html>

巨幕

巨幕组件主要是展示网站的关键性区域。

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

</style>

</head>

<body>

<h1>Hello World</h1>

<p>This is my First Demo</p>

</div>

<h1>Hello World</h1>

<p>This is my First Demo</p>

</div>

</body>

</html>

缩略图

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

</style>

</head>

<body>

<!--图片 img-thumbnail自带响应式 img-responsive响应式的

.img-rounded:圆角

.img-circle：圆

.img-thumbnail：缩略图

-->

<p>关于这张图片的详情</p>

</div>

<p>关于这张图片的详情</p>

</div>

<p>关于这张图片的详情</p>

</div>

<p>关于这张图片的详情</p>

</div>

</body>

</html>

警告框

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

</style>

</head>

<body>

<!--警告框

fade in：添加淡入淡出效果

-->

不允许的操作

</div>

<div class="alert alert-success">不允许的操作</div>

</div>

<div class="alert alert-warning">不允许的操作</div>

</div>

不允许的操作<a href="#" class="alert-link">请下载</a>

</div>

</body>

</html>

Well组件

可以实现简单的嵌入效果。

<!DOCTYPE html>

<head>

<title>well组件</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

body{

margin: 10px;

}

</style>

</head>

<body>

<!--

well组件

大小：well-lg>默认>well-sm

-->

<div class="well well-sm">Bootstrap</div>

</body>

</html>

进度条组件

进度条组件为当前工作流程或动作提供时时反馈。

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

body{

margin: 10px;

}

</style>

</head>

<body>

<!--

基本进度条

-->

60%

</div>

<!--

最低值进度条

min-width:1% 设置最小宽度

-->

</div>

<!--

结合情景的进度条

progress-bar-success

-->

60%

</div>

<!--

条纹状进度条，IE10+支持

progress-bar-striped

-->

60%

</div>

<!--

动画效果

progress-bar-striped active 动画效果必须加上条纹状

-->

60%

</div>

<!--

堆叠效果

-->

20%

</div>

40%

</div>

40%

</div>

</body>

</html>

媒体对象

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

body{

margin: 50px;

}

</style>

</head>

<body>

<!--

媒体对象在左边

media-top:上边

media-middle:中间

media-bottom:底部

-->

</div>

<p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。

企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。

</p>

</div>

<!--

媒体对象在右边

-->

</p>

</div>

</div>

<hr />

<!--

媒体对象列表

-->

</div>

</p>

</div>

</p>

</div>

</p>

</div>

</div>

</p>

</div>

</li>

</p>

</div>

</div>

</li>

</ul>

</body>

</html>

列表组

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

body{

margin:20px;

}

</style>

</head>

<body>

<!--

基本的列表组组件

情景类:list-group-item-success,list-group-item-info,list-group-item-warning,list-group-item-danger

-->

</ul>

<!--

列表组组件带徽章

-->

</ul>

<!--

div a 链接

active:激活

disabled:禁用

-->

</div>

<!--

按钮式列表

-->

</div>

<!--

列表组定制内容

-->

</a>

</div>

</body>

</html>

面板

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

</style>

</head>

<body>

</div>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

底部

</div>

<!--

列表类面板

-->

</div>

内容区

</div>

</ul>

底部

</div>

</body>

</html>

响应式嵌入组件

根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定内容的尺寸，能够在各种设备上缩放。

这些规则可以直接用于<iframe>、<embed>、<video>和<object>元素。

<!DOCTYPE html>

<head>

<title>响应式嵌入组件</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<!--

响应式嵌入组件

embed-responsive-16by9：16比9

embed-responsive-4by3：4:3

-->

allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>

</div>

</body>

</html>

模态框

是一款交互式网站非常常见的弹窗功能插件。

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

$(function(){

//参数、选项

$('#btnOpen').on('click',function(){

$('#myModal').modal({

backdrop:'static',

});

//方法

$('#btn').click(function(){

$('#myModal').modal('show');

setTimeout(function(){

$('#myModal').modal('hide');

},2000)

})

//事件

$('#myModal').on('show.bs.modal',function(){

alert("模态框即将被显示");

});

$('#myModal').on('shown.bs.modal',function(){

alert("模态框已经显示");

});

$('#myModal').on('hide.bs.modal',function(){

alert("模态框即将消失");

});

$('#myModal').on('hidden.bs.modal',function(){

alert("模态框已经消失");

});

</script>

<style>

</style>

</head>

<body>

<!--模态声明

Fade:模态框淡入淡出

-->

</div>

</div>

</div>

</div>

</div>

</form>

</div>

</div>

<button class="btn btn-default" id="btnOpen">弹出模态框：通过JS编程方式</button>

<!--data-backdrop

默认值 true，表示背景存在黑灰透明遮罩，且单击空白背景可关闭弹窗；

如果为 false，表示背景不存在黑灰透明遮罩，且点击空白背景不可关闭弹窗；

static表示背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。

-->

<button class="btn btn-default" data-toggle="modal" data-target="#myModal" data-backdrop="static">弹出模态框：通过data属性方式</button>

<hr/>

<button class="btn btn-success" id="btn">模态框的方法</button>

</body>

</html>

滚动监听插件

滚动监听插件是用来根据滚动条所处在的位置自动更新导航项目，显示导航项目高亮显示。

当使用滚动监听插件的同时在 DOM 中添加或删除元素后，你需要像下面这样调用此刷新（ refresh）方法：

$('#内容区ID').scrollspy('refresh');

<!DOCTYPE html>

<head>

<title>滚动监听插件</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

</style>

</head>

<body>

<a href="#" class="navbar-brand">Web开发</a>

</div>

<li><a href="#js">JavaScript</a></li>

BootStrap

</a>

</ul>

</li>

</ul>

</nav>

<!--

data-spy="scroll" 设置滚动监听

position:relative; 相对定位

data-target="#nav"：绑定指定监听的菜单

data-offset:默认值为 10，固定弄内容距滚动容器 10 像素以内，就高亮显示所对应的菜单。可自己设置为其它值data-offset=”0”

-->

<p>

标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG）的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟）专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。

HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”

2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。

本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关的API、Canvas等，同时HTML5的图像img标签及svg也进行了改进，性能得到进一步提升。

支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

在移动设备开发HTML5应用只有两种方法，要不就是全使用HTML5的语法，要不就是仅使用JavaScript引擎。

JavaScript引擎的构建方法让制作手机网页游戏成为可能。由于界面层很复杂，已预订了一个UI工具包去使用。

纯HTML5手机应用运行缓慢并错漏百出，但优化后的效果会好转。尽管不是很多人愿意去做这样的优化，但依然可以去尝试。

HTML5手机应用的最大优势就是可以在网页上直接调试和修改。原先应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果，不断地重复编码、调试和运行，这是首先得解决的一个问题。因此也有许多手机杂志客户端是基于HTML5标准，开发人员可以轻松调试修改。

2014年10月29日，万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布。

在此之前的几年时间里，已经有很多开发者陆续使用了HTML5的部分技术，Firefox、Google Chrome、Opera、Safari 4+、Internet Explorer 9+都已支持HTML5，但直到今天，我们才看到“正式版”。

HTML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。

</p>

<p>Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式，为了现代网络中更为

flexbox

复杂的网页需求而设计。

Flexbox 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。

Flexbox通常能让我们更好的操作他的子元素布局，例如：

如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行；

可以快速让他们布局在一列；

可以方便让他们对齐容器的左、右、中间等；

无需修改结构就可以改变他们的显示顺序；

如果元素容器设置百分比和视窗大小改变，不用担心未指定元素的确切宽度而破坏布局，因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。[2] </p>

<h4 id="js">JavaScript</h4>

<p>

HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。

HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

在移动设备开发HTML5应用只有两种方法，要不就是全使用HTML5的语法，要不就是仅使用JavaScript引擎。

JavaScript引擎的构建方法让制作手机网页游戏成为可能。由于界面层很复杂，已预订了一个UI工具包去使用。

纯HTML5手机应用运行缓慢并错漏百出，但优化后的效果会好转。尽管不是很多人愿意去做这样的优化，但依然可以去尝试。

2014年10月29日，万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布。

</p>

<p>Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式，为了现代网络中更为

flexbox

复杂的网页需求而设计。

Flexbox通常能让我们更好的操作他的子元素布局，例如：

如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行；

可以快速让他们布局在一列；

可以方便让他们对齐容器的左、右、中间等；

无需修改结构就可以改变他们的显示顺序；

<p>Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式，为了现代网络中更为

flexbox

复杂的网页需求而设计。

Flexbox通常能让我们更好的操作他的子元素布局，例如：

如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行；

可以快速让他们布局在一列；

可以方便让他们对齐容器的左、右、中间等；

无需修改结构就可以改变他们的显示顺序；

<p>Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式，为了现代网络中更为

flexbox

复杂的网页需求而设计。

Flexbox通常能让我们更好的操作他的子元素布局，例如：

如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行；

可以快速让他们布局在一列；

可以方便让他们对齐容器的左、右、中间等；

无需修改结构就可以改变他们的显示顺序；

</div>

</body>

</html>

标签页

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

body{

margin:10px;

}

</style>

</head>

<body>

<li><a href="#js" data-toggle="tab">JavaScript</a></li>

<li><a href="#bootcss" data-toggle="tab">Bootstrap</a></li>

</ul>

<div class="tab-pane" id="js">JavaScript.....</div>

<div class="tab-pane" id="bootcss">Bootstrap.....</div>

</div>

<li><a href="#jss">JavaScript</a></li>

<li><a href="#bootcsss">Bootstrap</a></li>

</ul>

<!--

fade：淡出淡出

in：表示首选的内容默认显示(配合fade使用)

-->

<div class="tab-pane fade" id="jss">JavaScript.....</div>

<div class="tab-pane fade" id="bootcsss">Bootstrap.....</div>

</div>

$('.nav li a').on('click',function(e){

e.preventDefault();

$(this).tab('show');

});

$('.nav li a').on('show.bs.tab',function(){

alert('选项卡即将切换');

});

$('.nav li a').on('shown.bs.tab',function(){

alert('选项卡已经切换');

});

</script>

</body>

</html>

工具提示插件

data-container：默认值 false，将 tooltip 附加到特定的元素上。比如组合按钮组提示，容器不够，可以附加 body 上。container : 'body'。当前容器不足以防止tooltip，将tooltip放置到更大的容器上。

data-selector：当一个父容器里有多个组件需要加tooltip,当需要指定某个组件的tooltip显示时使用。

$(‘#selection’).tooltip({

Selection:’a[rel=tooltip]’//rel为自定义属性

});

<!DOCTYPE html>

<head>

<title>工具提示插件</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

body{

margin:100px;

}

</style>

</head>

<body>

<!--tooltip 工具提示插件当鼠标移动到元素之上的时候，给一个提示消息

也可以自定义显示的方式

-->

<button class="btn btn-default" data-toggle="tooltip" title="左边给提示" data-placement="top">左边给提示</button>

<hr/>

用户名：<input type="text" id="username" data-toggle="tooltip"/>

//必须使用JS编程方式进行初始化

$('[data-toggle="tooltip"]:first').tooltip();

$('#username').on('blur',function(){

if($('#username').val()==''){

$('#username').tooltip({

trigger:'manual',//自己控制触发时机

title:'用户名不能为空',

placement:'right'

}).tooltip('show');

}

});

//设置提示消息在2秒钟之后消失

$('[data-toggle="tooltip"]').each(function(){

$(this).on('shown.bs.tooltip',function(){

var _this=this;

setTimeout(function(){

$(_this).tooltip('hide');

},2000)

});

</script>

</body>

</html>

弹出框插件

<!DOCTYPE html>

<head>

<title>弹出框插件</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

body{

margin:30px;

}

</style>

</head>

<body>

<!--弹出框插件 popover 默认：当点击一个元素时会弹出一个包含标题和内容的弹框

基于工具提示插件

-->

<button class="btn btn-success" id="btn" data-toggle="popover">弹出框：JS传递参数</button>

<hr/>

<button class="btn btn-primary" id="btn3">点此按钮在div上弹框</button>

//将popover和父容器对齐

HTML5

</button>

</div>

$('[data-toggle="popover"]:first').popover();

$('#btn').popover({

title:'Bootstrap',

content:'Bootstrap是一个开源的前段框架...',

placement:'bottom'

});

$('#btn3').on('click',function(){

$('#div').popover({

trigger:'manul',

title:'HTML',

content:'超文本标记语言'

}).popover('show');

});

$('[data-toggle="popover"]').on('shown.bs.popover',function(){

var _this=this;

setTimeout(function(){

$(_this).popover('hide');

},1000);

});

//把popover放到一个容器中

/*$('#viewbtn').popover({

viewport:"#view"

});*/

$('#viewbtn').popover({

viewport : {

selector : "#view",

padding : 10

}

});

</script>

</body>

</html>

按钮插件

可以通过按钮插件创建不同状态的按钮。

//单个切换。

注：在 Firefox 多次页面加载时，按钮可能保持表单的禁用或选择状态。

解决方案是：添加 autocomplete="off"。

//单选按钮

<input type="radio" name="sex" autocomplete="off" checked> 男

</label>

<input type="radio" name="sex" autocomplete="off"> 女

</label>

</div>

//复选按钮

<input type="checkbox" name="fa" autocomplete="off" checked>音乐

</label>

<input type="checkbox" name="fa" autocomplete="off"> 体育

</label>

<input type="checkbox" name="fa" autocomplete="off"> 美术

</label>

<input type="checkbox" name="fa" autocomplete="off"> 电脑

</label>

</div>

//加载状态

加载状态

</button>

$('#myButton').on('click', function () {

var btn = $(this).button('loading');

setTimeout(function () {

btn.button('reset');

}, 1000);

});

Button 插件中的 button 方法中有三个参数：toggle、reset、string(比如 loading、

complete)。

//可代替 data-toggle="button"

$('button').on('click', function () {

$(this).button('toggle');

})

折叠插件

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

<style>

body{

margin:50px;

}

</style>

</head>

<body>

<button class="btn btn-primary" data-toggle="collapse" data-target="#content">Bootstrap</button>

Bootstrap是一个开源的前端框架

</div>

<button class="btn btn-default" data-toggle="collapse" id="btn">折叠，通过JS实现</button>

<hr/>

<!--

手风琴式的折叠插件

如果不设置data-parent="#accordion"可同时打开多个

-->

Collapsible Group Item #1

</a>

</h4>

</div>

<!--

.collapse:默认影藏

.in：隐藏后可以显示

-->

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

</div>

Collapsible Group Item #2

</a>

</h4>

</div>

</div>

Collapsible Group Item #3

</a>

</h4>

</div>

</div>

$('#btn').click(function(){

$('#content').collapse('toggle');

});

</script>

</body>

</html>

轮播图插件

<!DOCTYPE html>

<head>

<title>轮播图插件</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

body{

margin:50px;

}

#myCarousel{

width:524px;

}

</style>

</head>

<body>

<!--轮播图插件 carousel 将几张大小相同的图片按照顺序依次播放

data-ride="carousel" 5秒钟自动轮播

-->

</ul>

<h3>Bootstrap</h3>

<p>Bootstrap是一款HTML5响应式的框架</p>

</div>

</div>

</div>

</div>

</a>

</a>

</div>

//设置自动播放

$('#myCarousel').carousel({

interval:"2000" //设置自动播放的间隔时间

});

</script>

</body>

</html>

附加导航插件

附加导航即粘贴在屏幕某处实现锚点功能

<!DOCTYPE html>

<head>

<title>well组件</title>

<!--[if lt IE 9]>

<![endif]-->

<style>

.nav-pills{

width: 200px;

}

.nav-pills.affix{

top:30px;

}

</style>

</head>

<h2>Bootstrap</h2>

</div>

</ul>

</div>

<p style="line-height: 2">这一同比下降主要是由于电商的兴起。许多美国消费者通过智能手机、平板电脑和PC去寻找优惠信息。另一方面，在感恩节之前，很多零售商就已提供了优惠折扣，从而冲淡了黑色星期五的影响力。过去几周，电商平台通过电子邮件等渠道向用户进行了推广。Adobe的数据显示，今年黑色星期五，美国电商销售总额同比增长14%，达到27.2亿美元。Adobe追踪了美国4500家零售网站的情况。相对于2014年，电子邮件推广带来的销售额增长了25%。这一同比下降主要是由于电商的兴起。许多美国消费者通过智能手机、平板电脑和PC去寻找优惠信息。另一方面，在感恩节之前，很多零售商就已提供了优惠折扣，从而冲淡了黑色星期五的影响力。过去几周，电商平台通过电子邮件等渠道向用户进行了推广。Adobe的数据显示，今年黑色星期五，美国电商销售总额同比增长14%，达到27.2亿美元。Adobe追踪了美国4500家零售网站的情况。相对于2014年，电子邮件推广带来的销售额增长了25%。这一同比下降主要是由于电商的兴起。许多美国消费者通过智能手机、平板电脑和PC去寻找优惠信息。另一方面，在感恩节之前，很多零售商就已提供了优惠折扣，从而冲淡了黑色星期五的影响力。过去几周，电商平台通过电子邮件等渠道向用户进行了推广。Adobe的数据显示，今年黑色星期五，美国电商销售总额同比增长14%，达到27.2亿美元。Adobe追踪了美国4500家零售网站的情况。相对于2014年，电子邮件推广带来的销售额增长了25%。</p>

</div>

</body>

</html>

//JavaScript 代替 data-spy="affix" data-offset-top="125"

$('#myAffix').affix({

offset: {

top: 150

}

})

我们默认使用的是 top，当然也可以默认居底 bottom。这个定位方式是直接通过 CSS定位的。

//设置成 bottom

.nav-pills.affix{

bottom:0px;

}

//设置成 bottom

data-offset-buttom="0"

Affix 包含几个事件，如下：

affix.bs.affix:在定位结束之前立即触发

affixed.bs.affix:在定位结束之后立即触发

affix-top.bs.affix:在定位元素应用 affixed-top 效果之前触发

affixed-top.bs.affix:定位元素应用 affixed-top 效果之后触发

affix-bottom.bs.affix:在定位元素应用 affixed-bottom 效果之前触发

affixed-bottom.bs.affix:在定位元素应用 affixed-bottom 效果之后触发

项目实战地址：\Bootstrap\code\项目实战\企训网

posted @ 2018-07-19 20:05 dongdong1234 阅读(629) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

dongdong

Bootstrap

一、Bootstrap简介

1、Bootstrap是什么？

2、特点

二、起步

下载Bootstrap

准备

基本模板

栅格系统

列偏移、列排序、列嵌套

排版样式

代码样式

表格

表单

按钮

图片

辅助类

响应式工具

图标

下拉菜单

按钮组

按钮式下拉菜单

输入框组

导航

导航条

路径导航

分页

标签

徽章

巨幕

缩略图

警告框

Well组件

进度条组件

媒体对象

列表组

面板

响应式嵌入组件

模态框

滚动监听插件

标签页

工具提示插件

弹出框插件

按钮插件

折叠插件

轮播图插件

附加导航插件

公告