值得享受的最完美Bootstrap飞速人门案例,前端最火的插件

By admin in 4858美高梅 on 2019年3月27日

一、Bootstrap简介

一.Bootstrap  概述

Bootstrap 是由 推特公司(全球最大的新浪)的两名技术工程师研究开发的1个依照HTML、CSS、JavaScript
的开源框架。该框架代码简洁、视觉精彩,可用于急忙、简单地营造基于 PC
及运动端设备的 Web 页面必要。

二〇〇八 年 5月,Facebook内部的工程师为了缓解前端开发职责中的同盟统一难点。经历种种方案后,Bootstrap
最后被分明下来,并于 2013 年 8 月宣布。经过很短日子的迭代升级,由最初的
CSS 驱动项目进步成为内置很多 JavaScript 插件和图标的多效益 Web
前端的开源框架。

Bootstrap 最为重庆大学的有个别就是它的响应式布局,通过那种布局可以合作 PC
端、PAD以及手提式有线电话机活动端的页面访问。

今天,笔者给小白们分享一下比较盛行的Bootstrap框架,它在工作中获得广大店铺的体贴,由此对于升职和加薪很关键。同时,我们得以高速完结开发职分,减弱发开周期,有难堪的地方望大家指正。

Bootstrap 快捷人门案例——前端最火的插件,bootstrap案例

今天,小编给小白们分享一下相比较流行的Bootstrap框架,它在工作中获得众多商家的偏重,因而对此升职和加薪很重庆大学。同时,大家可以快捷到位支付职分,裁减发开周期,有不规则的地方望大家指正。

假诺你想走的更远,那么请勤劳一点,多看看代码,多多演练代码,若是你仔细斟酌代码,自身也得以写出某些的css比较好的插件。

 

1、Bootstrap是什么?

Bootstrap 是由 Twitter 公司(全世界最大的乐乎)的两名技术工程师研究开发的3个开源的前端开发框架

依据HTML、CSS、JavaScript,代码简洁、视觉精粹,用来非常的慢支付基于PC以及活动端的Web页面,更敏捷、不难。

二零零六 年 6 月,脸谱 内部的工程师为了消除前端开发职务中的同盟统一难题。经历

各个方案后,Bootstrap 最后被鲜明下来,并于 二〇一二 年 8 月公布。经过十分长日子的迭代升

级,由最初的 CSS 驱动项目提升成为内置很多 JavaScript 插件和图标的多效益 Web 前端

的开源框架。

Bootstrap 最为重大的一对正是它的响应式布局,通过那种布局能够协作 PC 端、PAD

以及手提式有线电话机活动端的页面访问。

 

Bootstrap官网:)

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

版本:v3.0、v4.0

二.Bootstrap  特点

Bootstrap
相当的红,得益于它尤其实用的意义和特点。首要着力职能特色如下:(1).跨设备、跨浏览器

能够包容全部现代浏览器,包蕴相比较诟病的 IE柒 、8。当然,本课程不再考虑 IE9
以下浏览器。

(2).响应式布局

不仅能够协助 PC 端的各个分辨率的显得,还援助活动端
PAD、手提式有线电话机等显示器的响应式切换显示。

(3).提供的无所不包的机件

Bootstrap
提供了实用性很强的零部件,包蕴:导航、标签、工具条、按钮等一名目繁多组件,方便开发者调用。

(4).内置 jQuery插件

Bootstrap 提供了诸多实用性的 jquery插件,这一个插件方便开发者完成 Web
中各个正规特效。

(5).支持 HTML5、CSS3

HTML5 语义化标签和 CSS3 属性,都收获很好的支持。

(6).帮衬 LESS 动态样式LESS
使用变量、嵌套、操作混合编码,编写更快、更灵敏的 CSS。它和 Bootstrap
能很好的合营开发。

假使您想走的更远,那么请勤劳一点,多看看代码,多多演习代码,借使您精研代码,本人也得以写出部分的css比较好的插件。

 一、Bootstrap简介

值得享受的最完美Bootstrap飞速人门案例,前端最火的插件。详尽官网:

2、特点

l 跨设备、跨浏览器

同盟全部主流浏览器,包罗IE⑦ 、IE8

l 响应式布局

帮助PC、移动端(手提式无线电话机、PAD)等,移动装备优先。

l 丰裕的零件

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

l 内置jQuery插件

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

l 支持动态样式

LESS 、SASS,能够利用变量、嵌套、混合等,编写样式更快、更灵敏

l 支持HTML5/CSS3

三.Bootstrap  结构

率先,想要通晓 Boostrap 的文书档案结构,要求在官网先把它下载到本地。

Bootstrap首要分为三大主导目录:css(样式)、js(脚本)、fonts(字体)。

1.css 目录中有多少个 css后缀的公文,个中饱含 min
字样的,是削减版本,一般采取那个;不带有的属于尚未减掉的,可以学学理解css代码的文本;而 map 后缀的文本则是css
源码映射表,在有个别一定的浏览器工具中选拔。

2.js 索引包罗三个公文,是未压缩和削减的 js 文件。

3.fonts 目录蕴涵了不相同后缀的书体文件。

一、Bootstrap简介

1.演习准备财富准备:

下载bootstrap资源:

http:www.bootstrap.com

新建项目:bootstrap/code

在code下复制下载的dist目录下的有着文件,并且在js文件夹中引入jquery的js文件,如:jquery-1.11.3.min.js最终新建文件bt.html

4858美高梅 1

二、起步

四.开立第三个页面

咱俩创建八个 HTML5 的页面,并且将 Bootstrap
的主干文件引入,然后测试是不是正规显示。

在页面中引入bootstrap的层叠样式表,和javascript文件即可。

五.学习的各个准备

1.开发工具,大家应用Sublime
Text3当作Bootstrap的开发工具,并且安装了Emmet代码生成插件;

2.测试工具,除了健康的现世浏览器,其次正是作为移动端的测试工具,大家那里运用的是
Opera Mobile Emulator,和 Chrome 的活动 Web 测试工具。

3.所需基础,至少有 HTML5 第二季课程的功底,Bootstrap 内置了广大 jQuery
插件,即使应用起来比 jQuery 或 JS 本人要简单的多,但借使有 jQuery 和 JS
课程的底蕴,那学习驾驭力就更是一遍到处思念;

4.课程分辨率:基础学科,大家利用 1024 x 768
来摄像,但有些特殊部分,比如响应式和档次课程,必要大分辨率录像,会动用
1440 x 900来录像。

详尽官网:

2.便捷支付完毕:

专注在支付进度中如若改动css效果自然要在引入bootsrtap中的css文件,再重复添加类,本次开发案例原网站如下:

下载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 目录包括了不相同后缀的字体文件。

贰 、 排版样式

3.连锁概念

准备

开发工具:Hbuild

测试工具:Firfox   chrome (自带响应式设计方式)

一.页面排版

Bootstrap 提供了一部分健康设计好的页面排版的体制供开发者使用。

3.1栅格系统

网页栅格从平面栅格系统中提高而来,它以规则的网格阵列来指引和规范网页中的版面布局以及音信分布。栅格系统使得网页开发尤其灵敏与规范。

Bootstrap选择12栅格系统,把网页的总幅度平分为12份,开发人士能够轻易按份组合。

主干模板

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <!– 让IE浏览器使用最新的引擎渲染页面 –>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!– 移动端适配 –>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>基本模板</title>

 

    <!– Bootstrap核心css文件 –>

    <link href="css/bootstrap.css" rel="stylesheet">

<!–CDN–>

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

 

    <!– 如果IE版本低于IE9,该注释生效,html5shiv.min.js让其支持html5标签,respond.min.js让其支持媒体查询 –>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

  </head>

  <body>

    <h1>你好,世界!</h1>

    <!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

  </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放在七个目录下将报源映射错误

1. 页面主体

Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为
1.428(即20px);

段实现分棉被服装置等于 四分之二 行高(即 10px);颜色被设置为#333。

//成立包涵段落杰出的公文

给当下p标签添加lead类名即可

1.练习准备财富准备:

3.2结构:

金镶玉裹福禄双全栅格,供给依赖固定的构造—布局容器+行+列

栅格系统

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

一.移动设备优先

有一份特别关键的 meta,用于安装显示屏和设备等宽以及是或不是运转用户缩放,及缩放比例的标题。

二.布局容器

Bootstrap 供给为页面内容和栅格系统包裹1个.container 容器。由于 padding 等

质量的来由,那二种容器类没办法相互嵌套。

.container//固定容器

.container-fluid//100%宽度

 

栅格系统中,浏览器会趁着荧屏的大小的增减自动分配最多 12 列。通过一文山会海的行(row)

与列(column)的构成来创设页面布局。工作规律如下:

  1. “行(row)”必须带有在  .container (固定宽度)或  .container-fluid (百分百升幅)中,以便为其予以合适的排列(aligment)和内补(padding)。
  2. 透过“行(row)”在档次方向创设一组“列(column)”。

3.您的情节应当放置于“列(column)”内,并且,唯有“列(column)”能够当作行(row)”的一向子成分。

4.近似  .row  和  .col-xs-4  那种预约义的类,能够用来急速创立栅格布局。

5.栅格系统中的列是通过点名 1 到 12 的值来代表其超越的限量。例如,八个等宽的列能够利用多个  .col-xs-4  来创立。

6.假设一“行(row)”中涵盖了的“列(column)”大于  12,多余的“列(column)”所在的要素将被当作多少个一体化另起一行排列。

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>栅格系统</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

 

<style>

.col1{

background:red;

}

.col2{

background:#666;

}

.col3{

background:blue;

}

.col4{

background:green;

}

 

</style>

 

  </head>

  <body>

  <!–常用设备尺寸<768、[768,992)、[992-1200)、>=1200>–>

<div class="container">

<!–根据尺寸变化,当到达临界值时会自动适应,匹配相应的设置{实现响应式布局}–>

<div class="row">

<div class="col1 col-xs-3 col-sm-2 col-md-1 col-lg-3">col1</div>

<div class="col2 col-xs-3 col-sm-2 col-md-1 col-lg-3">col2</div>

<div class="col3 col-xs-3 col-sm-2 col-md-1 col-lg-3">col3</div>

<div class="col4 col-xs-3 col-sm-2 col-md-1 col-lg-3">col4</div>

</div>

<hr/>

 

<!–较大尺寸没有设置时默认会继承较小尺寸–>

<div class="row">

<div class="col1 col-xs-3">col1</div>

<div class="col2 col-xs-3">col2</div>

<div class="col3 col-xs-3">col3</div>

<div class="col4 col-xs-3">col4</div>

</div>

<hr/>

 

<!–较小尺寸未设置时默认会独占一行–>

<div class="row">

<div class="col1 col-md-3">col1</div>

<div class="col2 col-md-3">col2</div>

<div class="col3 col-md-3">col3</div>

<div class="col4 col-md-3">col4</div>

</div>

<hr/>

 

<!–列网格总数不能超过12,否则多余的列另起一行–>

<div class="row">

<div class="col1 col-sm-4">col1</div>

<div class="col2 col-sm-4">col2</div>

<div class="col3 col-sm-5">col3</div>

<div class="col4 col-sm-2">col4</div>

</div>

<hr/>

 

</div>

  </body>

</html>

 

2. 标题

//从 h1 到 h6

<h1>Bootstrap 框架</h1>

//36px

<h2>Bootstrap 框架<h2/>

//30px

<h3>Bootstrap 框架</h3>

//24px

<h4>Bootstrap 框架</h4>

//18px

<h5>Bootstrap 框架</h5>

//14px

<h6>Bootstrap 框架</h6>

//12px

Bootstrap 分别对 h1 ~ h6 举行了 CSS
样式的重构,并且还协理一般内联成分定义 class=(.h1 ~
h6)来兑现平等的效劳。

//内联成分使用标题字体

<span class=”h1″>Bootstrap</span>

注:通过 Firebug
查看成分还见到,字体颜色、字体样式、行高均被定位了,从而确定保障了统一性,而原生的会依据系统内置的首要选取字体决定,颜色是最法国红。在
h1 ~h6 成分之间,还能放置3个 small 成分作为副标题,//在标题成分内插入
small 成分

咱俩发现 h1 ~ h3 下 small 成分的深浅只占父成分的 65%,那么通过测算(查看
Firebug 总括后的样式),h1 ~ h3 下的 small 为 23.4px、19.5px、15.6px;h4
~ h6 下 small 成分的大大小小只占父成分的 四分三,分别为:13.5px、10.5px、9px。在 h1 ~ h6 下的 small
样式也展开了改观,颜色变成淡灰黄:#777,行高为1,粗度为 400。

下载bootstrap资源:

3.2.1搭架子容器(.container 、.container-fluid)

列偏移、列排序、列嵌套

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>栅格系统</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

 

<style>

.row div{

background:#ccc;

border: 1px solid red;

}

</style>

 

  </head>

  <body>

  <!–常用设备尺寸<768、[768,992)、[992-1200)、>=1200>–>

<div class="container">

<!–列偏移,添加类col-md-offset-*,只能向右偏移,后面的都会向右移动–>

<div class="row">

<div class="col-md-4">col1</div>

<div class="col-md-4 col-md-offset-2">col2</div>

<div class="col-md-2">col3</div>

</div>

<hr/>

 

<!–列排序,添加类,col-md-push-*(向右)和col-md-pull-*(向左),可以实现列的交换–>

<div class="row">

<div class="col-md-4 col-md-push-2">col1</div>

<div class="col-md-2 col-md-pull-4">col2</div>

<div class="col-md-4">col3</div>

</div>

<hr/>

 

<!–列嵌套–>

<div class="row">

<div class="col-md-6">

<div class="col-md-3">col1</div>

<div class="col-md-3">col2</div>

<div class="col-md-3">col3</div>

<div class="col-md-3">col4</div>

</div>

<div class="col-md-6">col2</div>

</div>

</div>

  </body>

</html>

3. 内联文本

成分//添加标志,成分或.mark 类

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

失效的文本<s></s>

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

下划线文本<u></u>

 三 、 栅格系统学习要点:

1.运动装备优先

2.布局容器

3.栅格系统

一.运动装备优先

在 HTML5 的门类中,我们做了运动端的项目。它有一份非凡重大的
meta,用于安装显示屏和装置等宽以及是不是运营用户缩放,及缩放比例的标题。

//分别为:荧屏宽度和装置一致、发轫缩放比例、最大缩放比例和取缔用户缩放

栅格系统中,浏览器会趁着显示屏的尺寸的增减自动分配最多12列。通过一名目繁多的行(row)与列(column)的结合来创建页面布局。工作规律如下:

1.“行(row)”必须含有在 .container (固定宽度)或 .container-fluid
(百分之百增长幅度)中,以便为其给予合适的排列(aligment)和内补(padding)。

2.经过“行(row)”在档次方向创设一组“列(column)”。

3.您的始末应当放置于“列(column)”内,并且,唯有“列(column)”可以看成行(row)”的直白子成分。

4.近乎 .row和 .col-xs-4
这种预订义的类,能够用来极快创立栅格布局。Bootstrap 源码中定义的 mixin
也能够用来创制语义化的布局。

5.经过为“列(column)”设置 padding
属性,从而开创列与列之间的间距(gutter)。通过为 .row 成分设置负值
margin 从而抵消掉为 .container 成分设置的
padding,也就直接为“行(row)”所富含的“列(column)”抵消掉了 padding。

6.负值的 margin
正是上边的以身作则为啥是向外优良的原委。在栅格列中的内容排成一行。

7.栅格系统中的列是通过点名 1 到 12
的值来代表其超越的范围。例如,八个等宽的列能够运用多个 .col-xs-4
来创设。

8.假诺一“行(row)”中带有了的“列(column)”大于
12,多余的“列(column)”所在的成分将被看成三个完全另起一行排列。

9.栅格类适用于与显示屏宽度大于或等于分界点大小的装置 ,
并且针对小显示屏设备覆盖栅格类。 因而,在要素上应用任何 .col-md-*
栅格类适用于与荧屏宽度大于或等于分界点大小的配备
,并且针对小荧屏设备覆盖栅格类。因而,在要素上使用任何
.col-lg-*不存在, 也影响大荧屏设备。

栅格参数表如上海体育场所所示,栅格系统最外层区分了多样宽度的浏览器:超小屏(<768px)、小屏(>=768px)、中屏(>=992px)和大屏(>=1200px)。而内层.container容器的自适应宽度为:自动、750px、970px

1170px。自动的意味为,假设您是手提式有线电话机荧屏,则完美独占一行呈现。//各样屏幕分类全体激活

http:www.bootstrap.com

1)固定布局

.container

一定宽度并帮衬响应式(1170px、970px、750px)那里能够行使媒体询问@media

排版样式

1.页面主体

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

20px);<p>段达成分棉被服装置等于 二分之一 行高(即 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 成分的轻重缓急只占父成分的 四分之三   ,分别为:13.5px、10.5px、9px。在 h1   ~   h6 下的 small 样式也开始展览了改动,颜色变成淡水绿:#777,行高为 1,粗度为 400。

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>排版样式</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

<!–标题–>

<h1>标题1<small>小标题1</small></h1>

<h2>标题2<span class="small">小标题2</span></h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

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

<hr/>

<!–页头组件–>

<div class="page-header">

<h1>标题1<small>页头组件</small></h1>

</div>

<!–class 为lead突出显示–>

<p class="lead">突出(lead)段落</p>

<p>段落</p>

<hr/>

 

<!–内联文本元素–>

<span>普通文本</span><br/>

<mark>标记文本</mark>

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

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

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

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

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

<small>小号文本</small>

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

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

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

<em>斜体文本</em><br/>

<i>用于发言、技术词汇</i>

<hr/>

 

<!–对齐–>

<p class="text-left">左对齐</p>

<p class="text-right">右对齐</p>

<p class="text-center">居中对齐</p>

<p class="text-justify">两端对齐</p>

<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

–>

<abbr title="http://www.baidu.com" class="initialism">百度</abbr>

<div title="阿里">阿里巴巴</div>

 

<!–地址–>

<address>

中国北京天安门

</address>

 

<!–引用    blockquote-reverse或者pull-right:居右引用–>

<blockquote>

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

<footer>百度百科</footer>

</blockquote>

<blockquote class="blockquote-reverse">

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

<footer>百度百科</footer>

</blockquote>

<hr/>

<blockquote class="pull-right">

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

<footer>百度百科</footer>

</blockquote>

<!–列表

list-unstyled:移除默认样式(无序列表不加小圆点)

list-inline:内联(设置为一行)

–>

<!–默认无序列表–>

<ul>

<li>无序列表1</li>

<li>无序列表2</li>

<li>无序列表3</li>

</ul>

<ul class="list-unstyled list-inline">

<li>无序列表1</li>

<li>无序列表2</li>

<li>无序列表3</li>

</ul>

<hr/>

<!–水平排列描述列表

    dl-horizontal:dt和dd水平排列

    –>

<dl class="dl-horizontal">

<dt>LOL</dt>

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

</dl>

 

<!–内联代码–>

<code><section></code>

<hr/>

<!–用户输入–>

press   <kbd>ctrl   +   ,</kbd>

<hr/>

<!–代码块–>

<pre><p>Please   input…</p></pre>

 

  </body>

</html>

 

新建项目:bootstrap/code

2)流式布局

.container-fluid

百分之百大幅,占据全部视口的容器

代码样式

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>代码样式</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

<!–内联样式–>

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

<code>List<Double></code><br/>

<!–用户输入–>

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

<hr/>

<!–代码块 pre-scrollable带滚动条–>

<pre class="pre-scrollable">

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>

在code下复制下载的dist目录下的保有文件,并且在js文件夹中引入jquery的js文件,如:jquery-1.11.3.min.js末段新建文件bt.html

3.2.2行(.row)

有了容器布局我们才足以利用栅格系统,须要再写1个div.row来作为列的父级元素

表格

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>表格</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

<div class="container">

<!–表格

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

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

. table-bordered:带边框的表格

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

        –>

<table class="table table-bordered table-striped table-hover table-condensed">

<thead>

<!–状态类

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

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

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

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

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

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

                –>

<tr class="success">

<th>编号</th>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

<th>地址</th>

</tr>

</thead>

<tbody>

<tr class="warning">

<td class="danger">1</td>

<td>张三</td>

<td>男</td>

<td>20</td>

<td>北京</td>

</tr>

<!– .sr-only:隐藏某一行 –>

<tr class="sr-only">

<td>2</td>

<td>李四</td>

<td>女</td>

<td>19</td>

<td>上海</td>

</tr>

<tr>

<td>3</td>

<td>马云</td>

<td>男</td>

<td>18</td>

<td>杭州</td>

</tr>

</tbody>

</table>

</div>

  </body>

</html>

4858美高梅 2

3.2.3列(.col-md-*)

这里的*能够取值2-12

表单

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>表单</title>

<link href="css/bootstrap.css" rel="stylesheet">

<script src="js/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<style>

</style>

</head>

<body>

<!–基本用法–>

<form>

<div class="form-group">

<label for="email">邮箱</label>

<input type="email" id="email" class="form-control" placeholder="请输入邮箱" disabled>

</div>

<div class="form-group">

<label for="pwd">密码</label>

<input type="password" id="pwd" class="form-control" placeholder="请输入密码">

</div>

</form>

<hr/>

<!–内联表单

(表单元素居于一行)

–>

<form class="form-inline">

<div class="form-group">

<!–sr-only隐藏label–>

<label for="email" class="control-label sr-only">邮箱</label>

<input type="email" id="email" class="form-control" placeholder="请输入邮箱">

</div>

<div class="form-group">

<label for="pwd" class="control-label">密码</label>

<input type="password" id="pwd" class="form-control" placeholder="请输入密码">

</div>

<!–输入框组(组件)–>

<div class="form-group">

<label for="money" class="control-label">金额</label>

<div class="input-group input-group-lg">

<div class="input-group-addon">$</div>

<input type="text" id="money" class="form-control" placeholder="请输入金额"/>

<div class="input-group-addon">.00</div>

</div>

<div class="input-group input-group-lg">

<div class="input-group-addon">

<input type="checkbox" name="" id="">

</div>

<input type="text" id="money" class="form-control" placeholder="请输入性别">

</div>

<div class="input-group input-group-lg">

<div class="input-group-addon">

<input type="radio" name="" id="">

</div>

<input type="text" id="money" class="form-control" placeholder="请输入年龄">

</div>

<div class="input-group input-group-lg">

<div class="input-group-btn">

<button class="btn btn-default">Go!</button>

</div>

<input type="text" id="money" class="form-control" placeholder="请输入关键字">

</div>

</div>

</form>

<hr/>

<!–水平排列的表单–>

<form class="form-horizontal">

<div class="form-group">

<label for="email" class="control-label col-sm-2 col-sm-offset-2">邮箱</label>

<div class="col-sm-6">

<input type="email" id="email" class="form-control" placeholder="请输入邮箱">

</div>

</div>

<div class="form-group">

<label for="pwd" class="control-label col-sm-2 col-sm-offset-2">密码</label>

<div class="col-sm-6">

<input type="password" id="pwd" class="form-control" placeholder="请输入密码">

</div>

</div>

</form>

<hr/>

<!–被支持的控件–>

<form>

<textarea  class="form-control" name="" id="" cols="30" rows="5" readonly>

阅读服务协议

阅读服务协议

阅读服务协议

阅读服务协议

</textarea>

<!–

         复选框

         disabled:设置禁用

        –>

<div class="checkbox disabled">

<label>

<input type="checkbox" disabled>吃饭

</label>

</div>

<div class="checkbox">

<label>

<input type="checkbox">睡觉

</label>

</div>

<div class="checkbox disabled">

<label>

<input type="checkbox">打豆豆

</label>

</div>

 

<!–

         设置内联样式

        –>

<label class="checkbox-inline disabled">

<input type="checkbox"  disabled>睡觉

</label>

<label class="checkbox-inline">

<input type="checkbox">打豆豆

</label>

        <!–

         设置下拉列表

        –>

<select class="form-control">

<option>1</option>

<option>2</option>

<option>3</option>

</select>

</form>

<hr/>

<form class="form-horizontal">

<!–校验状态

Has-success:成功状态

Has-error:失败状态

Has-warning:警告状态

 

添加额外的图标

glyphicon-ok:成功状态

glyphicon-warning-sign:警告状态

glyphicon-remove:错误状态

 

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

–>

<div class="form-group has-success has-feedback">

<label for="email" class="control-label col-sm-2 col-sm-offset-2">邮箱</label>

<div class="col-sm-6">

<input type="email" id="email" class="form-control" placeholder="请输入邮箱" >

<span class="glyphicon glyphicon-ok form-control-feedback"></span>

</div>

</div>

<div class="form-group has-error has-feedback">

<label for="pwd" class="control-label col-sm-2 col-sm-offset-2">密码</label>

<div class="col-sm-6">

<input type="password" id="pwd" class="form-control" placeholder="请输入密码">

<span class="glyphicon glyphicon-remove form-control-feedback"></span>

</div>

</div>

</form>

<hr/>

</body>

</html>   

2.十分的快支付完成:

1)列偏移:

在形似景况下列是暗中同意从到位右对齐的,在实际上支出中,大家不须要左侧对齐

 .col-mod-* .col-md-offset-12-* 能够经过后边的百分之百类来达成。

按钮

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>按钮</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

<!–可作为按钮使用的标签元素–>

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

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

<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-default btn-lg">默认按钮</button>

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

<button class="btn btn-success btn-sm">成功按钮</button>

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

<button class="btn btn-warning">警告按钮</button>

<button class="btn btn-danger">危险按钮</button>

<button class="btn btn-link">链接按钮</button>

<!–块状按钮–>

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

  

<!–激活状态(.active)、禁用状态(.disabled)–>

<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>

留意在支付进度中一经济体改动css效果自然要在引入bootsrtap中的css文件,再重复添加类,此次开发案例原网站如下:

2)列嵌套

和表格比较:在表格中,可以在td中再嵌套table

那边嵌套时,不要求再加.container,只要求加.row 再加.col-md-*即可

图片

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>图片</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

<style>

img{

width:600px;

}

</style>

  </head>

  <body>

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

.img-rounded:圆角

.img-circle:圆

.img-thumbnail:缩略图

–>

<img src="images/jquery.png" class="img-rounded"><br/>

<img src="images/react.png" class="img-circle"><br/>

<img src="images/qq.jpg" class="img-thumbnail"><br/>

<img src="images/react.png" class="img-circle img-responsive"><br/>

  </body>

</html>

 

3)列排序

转移左右转移,col-md-push-* 和 col-md-pull-* 注意push 和pull之和为12;

辅助类

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>辅助类</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

<style>

img{

width:600px;

}

.crd{

width:200px;

}

</style>

  </head>

  <body>

<!–情景文本颜色–>

<p class="text-muted">默认文本(柔和灰)</p>

<p class="text-primary">首选文本(主要蓝)</p>

<p class="text-success">成功文本(成功绿)</p>

<p class="text-info">一般文本(信息蓝)</p>

<p class="text-danger">危险文本(危险红)</p>

<p class="text-warning">警告文本(警告黄)</p>

 

<!–情景背景色–>

<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 type="button" class="close" ari-label="Close">

×

</button>

<!–三角符号–>

<span class="caret"></span>

<hr/>

<!–快速浮动–>

<div class="pull-left">左浮动</div>

<div class="clearfix"></div>

<span>crd</span>

<div class="pull-right">右浮动</div>

<div class="center-block bg-primary crd text-center">居中</div>

<hr/>

<!–显示或隐藏内容–>

<span class="show">显示段落</span>

<span class="hidden">隐藏段落</span>

</body>

</html>

 

3.有关概念

4.删减网格系统

经过下表能够详细查看bootstrap的栅格系统在各大显示屏设备的行事

4858美高梅 3

响应式工具

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

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

–>

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

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

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

<span>abc<span>

  </body>

</html>

3.1栅格系统

二、全局CSS样式

 

图标

263个图标

能够接纳<i>或<span>标签来使用

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>图标</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

<!–图标–>

<span class="glyphicon glyphicon-user"></span>

<i class="glyphicon glyphicon-user"></i><br/>

<!–按钮上放图标–>

<button type="button" class="btn btn-default">

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

</button>

  </body>

</html>

网页栅格从平面栅格系统中升华而来,它以规则的网格阵列来教导和正规网页中的版面布局以及新闻分布。栅格系统使得网页开发特别灵活与正规。

5.列表

稳步列表

冬日,冬辰列表

自定义列表

4858美高梅 4

下拉菜单

 

注明式用法的重庆大学亚湾原子核能发电站心:

1.外面容器使用 class=”dropdown”包裹;

2.里边点击按钮事件绑定 data-toggle=”dropdown”;

3.菜单成分使用  class=”dropdown-menu”。

 

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>下拉菜单</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

<!–下拉菜单  open打开下拉列表–>

<div class="dropdown open">

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">

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

</button>

<ul class="dropdown-menu">

<li><a href="#">首页</a></li>

<li><a href="#">产品</a></li>

<li><a href="#">资讯</a></li>

</ul>

</div>

<br/>

<br/>

<!–下拉菜单  dropup向上弹出列表–>

<div class="dropup">

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">

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

</button>

<ul class="dropdown-menu">

<li><a href="#">首页</a></li>

<li><a href="#">产品</a></li>

<li><a href="#">资讯</a></li>

</ul>

</div>

<hr/>

<!–菜单项右对齐–>

<div class="dropup">

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">

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

</button>

<ul class="dropdown-menu dropdown-menu-right">

<li><a href="#">首页</a></li>

<li><a href="#">产品</a></li>

<li><a href="#">资讯</a></li>

</ul>

</div>

<hr/>

<!–下拉列表设置标题,设置分割线,禁用–>

<div class="dropup">

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">

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

</button>

<ul class="dropdown-menu">

<li class="dropdown-header">网站导航</li>

<li class="divider"></li>

<li><a href="#">首页</a></li>

<li><a href="#">产品</a></li>

<li><a href="#">资讯</a></li>

<li class="disabled"><a href="#">关于</a></li>

</ul>

</div>

  </body>

</html>  

Bootstrap采取12栅格系统,把网页的总宽度平分为12份,开发职员可以无限制按份组合。

6.按钮

按钮组

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>按钮组</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

  <!–按钮工具栏–>

<div class="btn-toolbar">

<!–按钮组–>

<div class="btn-group btn-group-sm">

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-align-left"><span>

</button>

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-align-center"><span>

</button>

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-align-right"><span>

</button>

</div>

<div class="btn-group">

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-zoom-in"><span>

</button>

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-zoom-out"><span>

</button>

</div>

</div>

<hr/>

<!–按钮组中嵌套下拉菜单–>

<!–按钮组–>

<div class="btn-group">

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-align-left"><span>

</button>

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-align-center"><span>

</button>

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-align-right"><span>

</button>

<div class="btn-group">

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

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

</button>

<ul class="dropdown-menu">

<li><a href="#">首页</a></li>

<li><a href="#">资讯</a></li>

<li><a href="#">关于</a></li>

</ul>

</div>

</div>

<hr/>

<!–垂直排列–>

<div class="btn-group btn-group-vertical">

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-align-left"><span>

</button>

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-align-center"><span>

</button>

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-align-right"><span>

</button>

</div>

<hr/>

<!–两端对齐排列的按钮组–>

<div class="btn-group btn-group-justified">

<a href="#" class="btn btn-default">左</a>

<a href="#" class="btn btn-default">中</a>

<a href="#" class="btn btn-default">右</a>

</div>

  </body>

</html>

3.2结构:

1)预订义样式

.btn-default .btn-primary .btn-success .btn-info .btn-warnint
.btn-danger

Button .btn .btn-default

按钮式下拉菜单

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

<!–单按钮式下拉菜单–>

<div class="btn-group">

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

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

</button>

<ul class="dropdown-menu">

<li><a href="#">首页</a></li>

<li><a href="#">资讯</a></li>

<li><a href="#">关于</a></li>

</ul>

</div>

<hr/>

<!–分裂式按钮下拉菜单–>

<div class="btn-group">

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

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

<span class="caret"><span>

</button>

<ul class="dropdown-menu">

<li><a href="#">首页</a></li>

<li><a href="#">资讯</a></li>

<li><a href="#">关于</a></li>

</ul>

</div>

<hr/>

<!–向上弹出菜单–>

<!–分裂式按钮下拉菜单–>

<div class="btn-group dropup">

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

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

<span class="caret"><span>

</button>

<ul class="dropdown-menu">

<li><a href="#">首页</a></li>

<li><a href="#">资讯</a></li>

<li><a href="#">关于</a></li>

</ul>

</div>

  </body>

</html>

兑现栅格,需求借助固定的协会—布局容器+行+列

2)尺寸.btn-lg .btn-sm .btn-xs

输入框组

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>输入框组</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

<!–输入框组,在左侧添加文字–>

<div class="input-group">

<span class="input-group-addon">@</span>

<input type="text" class="form-control">

</div>

<hr/>

<!–输入框组,在右侧添加文字–>

<div class="input-group">

<input type="text" class="form-control">

<span class="input-group-addon">@163.com</span>

</div>

<hr/>

<!–输入框组,在两侧添加文字–>

<div class="input-group">

<span class="input-group-addon">http://</span>

<input type="text" class="form-control">

<span class="input-group-addon">.com</span>

</div>

<hr/>

<!–左侧使用单选按钮–>

<div class="input-group">

<span class="input-group-addon">

<input type="radio" name="" id="">

</span>

<input type="text" class="form-control">

</div>

<hr/>

<!–右侧使用按钮–>

<div class="input-group">

<input type="text" class="form-control">

<span class="input-group-btn">

<button class="btn btn-primary">提交</button>

</span>

</div>

<!–作为额外元素的按钮式下拉菜单–>

<div class="input-group">

<div class="input-group-btn">

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

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

<span class="caret"><span>

</button>

<ul class="dropdown-menu">

<li><a href="#">首页</a></li>

<li><a href="#">资讯</a></li>

<li><a href="#">关于</a></li>

</ul>

</div>

<input type="text" class="form-control">

</div>

  </body>

</html>

3.2.1布局容器(.container 、.container-fluid)1)固定布局

3)块级按钮.btn-block

导航

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>导航</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

<!–基本的导航组件 :标签页–>

<ul class="nav nav-tabs">

<li class="active"><a href="#">首页</a></li>

<li><a href="#">资讯</a></li>

<li><a href="#">关于</a></li>

</ul>

<hr/>

<!–基本的导航组件 :胶囊式的标签页–>

<ul class="nav nav-pills">

<li class="active"><a href="#">首页</a></li>

<li><a href="#">资讯</a></li>

<li><a href="#">关于</a></li>

</ul>

<hr/>

<!–基本的导航组件 :胶囊式的标签页,垂直排列–>

<ul class="nav nav-pills nav-stacked">

<li class="active"><a href="#">首页</a></li>

<li><a href="#">资讯</a></li>

<li><a href="#">关于</a></li>

</ul>

<!–基本的导航组件 :胶囊式的标签页,两端对齐–>

<ul class="nav nav-pills nav-justified">

<li class="active"><a href="#">首页</a></li>

<li><a href="#">资讯</a></li>

<li><a href="#">关于</a></li>

</ul>

  </body>

</html>

.container

7.表单

导航条

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>导航条</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

<!–导航条   

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

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

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

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

 

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

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

 

 

navbar-default:默认的导航条

navbar-inverse:反色的导航条

–>

<div class="navbar navbar-default navbar-fixed-top navbar-inverse">

<div class="container">

<div class="navbar-header">

<a href="#" class="navbar-brand">

<img src="images/qq.jpg" alt="" style="width:20px;">

</a>

</div>

<ul class="nav navbar-nav">

<li class="active"><a href="#">首页</a></li>

<li><a href="#">技术论坛</a></li>

<li><a href="#">积分商城</a></li>

<li><a href="#">广告招商</a></li>

<li><a href="#">关于我们</a></li>

</ul>

<button class="btn btn-default navbar-btn navbar-right">注册</button>

<button class="btn btn-default navbar-btn navbar-right" style="margin-right:10px">登录</button>

<form action="" class="navbar-form navbar-right">

<div class="input-group">

<input type="text" class="form-control" placeholder="请输入关键字">

<span class="input-group-btn">

<button class="btn btn-default">搜索</button>

</span>

</div>

</form>

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

 

</div>

</div>

  </body>

</html>

稳定宽度并补助响应式(1170px、970px、750px)那里可以接纳媒体询问@media

(1).垂直排列表单

在表单中,平常是 提醒消息 和 表单成分 共同组成一组。

在bs中,提供.form-group 用来代表组的。

本着现实的那三个表单成分,能够使用.form-control(包含input、select、textarea)

 4858美高梅 5

 

 

 

效益如下:

 4858美高梅 6

 

Ps:关于那一个父成分,带有.form-group的因素,并不是必须是div。是块状成分就能够,比如li。

途径导航

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>路径导航</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

<!–路径导航,也称为面包屑导航–>

<ul class="breadcrumb">

<li><a href="#">首页</a></li>

<li><a href="#">新闻</a></li>

<li><a href="#">体育</a></li>

<li class="active">马拉松</li>

</ul>

    <ol class="breadcrumb">

<li><a href="#">首页</a></li>

<li><a href="#">新闻</a></li>

<li><a href="#">体育</a></li>

<li class="active">马拉松</li>

</ol>

  </body>

</html>

2)流式布局

(2).水平排列

在form上,添加.form-horizontal,然后结合栅格系统。(此处,不供给使用.row,直接利用栅格列即可)

 4858美高梅 7

分页

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>分页</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

<!–分页–>

<ul class="pagination">

<li class="disabled">

<a href="#">

<span>«</span>

</a>

</li>

<li class="active"><a href="#">1</a></li>

<li><a href="#">2</a></li>

<li><a href="#">3</a></li>

<li><a href="#">4</a></li>

<li><a href="#">5</a></li>

<li><a href="#">6</a></li>

<li><a href="#">7</a></li>

<li><a href="#">8</a></li>

<li>

<a href="#">

<span>»</span>

</a>

</li>

</ul>

<hr/>

<!–翻页–>

<ul class="pager">

<li><a href="#">上一页</a></li>

<li><a href="#">下一页</a></li>

</ul>

<hr/>

<!–翻页,对齐链接–>

<ul class="pager">

<li class="previous"><a href="#">上一页</a></li>

<li class="next"><a href="#">下一页</a></li>

</ul>

  </body>

</html>

.container-fluid

(3).内联表单

表单都位居一行

借助.form-inline

为form成分添加.form-inline

4858美高梅 8

功效如下:

 4858美高梅 9

标签

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>标签</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

<style>

 

</style>

  </head>

  <body>

<!–标签–>

<h4>中国<span class="label label-default">北京</span>朝阳区</h4>

<h4>中国<span class="label label-primary">北京</span>朝阳区</h4>

<h4>中国<span class="label label-success">北京</span>朝阳区</h4>

<h4>中国<span class="label label-info">北京</span>朝阳区</h4>

<h4>中国<span class="label label-warning">北京</span>朝阳区</h4>

<h4>中国<span class="label label-danger">北京</span>朝阳区</h4>

  </body>

</html>

百分百肥瘦,占据全体视口的容器

(4).文本域

Textarea,也是通过.form-control来支配的,宽度就毫无再安装cols了。

不过她的可观 仍然要运用rows来设置

4858美高梅 10

成效如下:

4858美高梅 11

徽章

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>徽章</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

<style>

 

</style>

  </head>

  <body>

<!–徽章–>

<a href="#">未读消息<span class="badge">5</span></a>

<hr/>

<button class="btn btn-default">未读邮件<span class="badge">14</span></button>

<button class="btn btn-success">未读邮件<span class="badge">14</span></button>

<button class="btn btn-danger">未读邮件<span class="badge">14</span></button>

</body>

</html>

3.2.2行(.row)

(5).单选和多选

单选和多选,结构需求做变通,如下:

4858美高梅 12

功用如下:

 4858美高梅 13

 

在默许意况下,它是笔直排列的。

在一大半处境下,必要程度排列的。

内需使用.radio-inline,如下:

 4858美高梅 14

也得以使用手册上的布局:

 4858美高梅 15

 

 

关于checkbox和radio,总是有几许对不齐,全体浏览器都有那般四个毛病。

 

Bs封装的那几个用法,解决那样的题目。

巨幕

巨幕组件首假诺展现网站的关键性区域。

 

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>巨幕</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

<style>

 

</style>

  </head>

  <body>

<!–巨幕–>

    <!–在固定的范围内,有圆角–>

<div class="container">

<div class="jumbotron text-center">

<h1>Hello World</h1>

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

<p><a class="btn btn-success" href="#">Lean More</a></p>

</div>

</div>

<!–全屏巨幕 没有圆角–>

<div class="jumbotron text-center">

<div class="container">

<h1>Hello World</h1>

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

<p><a class="btn btn-success" href="#">Lean More</a></p>

</div>

</div>

  </body>

</html>

有了容器布局大家才方可选用栅格系统,须求再写叁个div.row来作为列的父级成分

(6).扶植文本

在文本框的人间有一对提醒消息,其实正是支援文本。

只必要添加1个span.help-block

4858美高梅 16

 

成效如下:

 4858美高梅 17

缩略图

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>缩略图</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

<style>

 

 

</style>

  </head>

  <body>

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

.img-rounded:圆角

.img-circle:圆

.img-thumbnail:缩略图

–>

<div class="container">

<div class="row">

<div class="col-xs-6 colcol-sm-6 col-md-4 col-lg-3">

<div class="thumbnail">

<img src="images/pic.png" alt=""/>

<div class="caption">

<h3>图片</h3>

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

<p> <a href="#" class="btn btn-success">点击进入</a></p>

</div>

</div>

</div>

<div class="col-xs-6 colcol-sm-6 col-md-4 col-lg-3">

<div class="thumbnail">

<img src="images/pic.png" alt=""/>

<div class="caption">

<h3>图片</h3>

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

<p> <a href="#" class="btn btn-success">点击进入</a></p>

</div>

</div>

</div>

<div class="col-xs-6 colcol-sm-6 col-md-4 col-lg-3">

<div class="thumbnail">

<img src="images/pic.png" alt=""/>

<div class="caption">

<h3>图片</h3>

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

<p> <a href="#" class="btn btn-success">点击进入</a></p>

</div>

</div>

</div>

<div class="col-xs-6 colcol-sm-6 col-md-4 col-lg-3">

<div class="thumbnail">

<img src="images/pic.png" alt=""/>

<div class="caption">

<h3>图片</h3>

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

<p> <a href="#" class="btn btn-success">点击进入</a></p>

</div>

</div>

</div>

</div>

</div>

  </body>

</html>

 

3.2.3列(.col-md-*)

1.表格

着力样式

.table,应用在table标签上

4858美高梅 18

 

条纹状表格

.table-striped

 4858美高梅 19

带边框的表格

.table-bordered

 4858美高梅 20

鼠标悬停

.table-hover

压缩表格

.table-condensed

重点是指 每一行的行高,变得更小一些

 4858美高梅 21

状态类

.active .success .info .warning .danger   应用在tr/td上

 4858美高梅 22

警告框

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>警告框</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

<style>

 

</style>

  </head>

  <body>

<!–警告框

fade in:添加淡入淡出效果

–>

<div class="container">

<div class="row">

<div class="col-sm-3">

<div class="alert alert-danger fade in">

不允许的操作

<span class="close" data-dismiss="alert">×</span>

</div>

</div>

<div class="col-sm-3">

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

</div>

<div class="col-sm-3">

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

</div>

<div class="col-sm-3">

<div class="alert alert-warning">

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

</div>

</div>

</div>

</div>

  </body>

</html>

这里的*能够取值2-12

2.辅助类

l 背景颜色

4858美高梅 23

 

l 三角符号

箭头

向来选择 .caret类,如下:

4858美高梅 24

 

Ps:日常要组成 button 来行使,表示下拉菜单。

l 关闭按钮

X.

4858美高梅 25

职能如下:

4858美高梅 26

l 快速生成

.pull-left和.pull-right

l 清除浮动

.clearfix

l 块状居中

.center-block

 4858美高梅 27

l 突显和隐形

直接运用 .hidden 和 .show即可。

Well组件

能够兑现简单的停放效果。

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>well组件</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

<style>

body{

margin: 10px;

}

 

</style>

  </head>

  <body>

<!–

         well组件

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

        –>

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

  </body>

</html>

1)列偏移:

3.响应式工具

最近用来响应式栅格。

在响应式设计中,还有如下的贰个须求:

在大显示屏下,全数的新闻都会议及展览示。

可是在小荧屏小,有针对性的隐身有些音讯。

本着这一个供给,bs提供了多个响应式的工具,能够安装依据不相同的显示屏,可以隐蔽或显示钦赐的情节。

 4858美高梅 28

 

 4858美高梅 29

上述代码,当页面收缩到 小于 992px以下,都会暗藏侧栏。

 

进程条组件

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

 

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>进度条</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

<style>

body{

margin: 10px;

}

</style>

  </head>

  <body>

<!–

         基本进度条

        –>

        <div class="progress">

         <div class="progress-bar" style="width: 60%">

         60%

         </div>

        </div>

        

        <!–

         最低值进度条

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

        –>

        <div class="progress">

         <div class="progress-bar" style="min-width:1%;width: 0%">

         0%

         </div>

        </div>

        

        <!–

         结合情景的进度条

         progress-bar-success

        –>

        <div class="progress">

         <div class="progress-bar progress-bar-success" style="min-width:1%;width: 60%">

         60%

         </div>

        </div>

        

        <!–

         条纹状进度条,IE10+支持

         progress-bar-striped

        –>

        <div class="progress">

         <div class="progress-bar progress-bar-success progress-bar-striped" style="min-width:1%;width: 60%">

         60%

         </div>

        </div>

        

        <!–

         动画效果

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

        –>

        <div class="progress">

         <div class="progress-bar progress-bar-success progress-bar-striped active" style="min-width:1%;width: 60%">

         60%

         </div>

        </div>

        

        <!–

         堆叠效果

        –>

        <div class="progress">

         <div class="progress-bar progress-bar-danger progress-bar-striped active" style="min-width:1%;width: 20%">

         20%

         </div>

         <div class="progress-bar progress-bar-warning progress-bar-striped active" style="min-width:1%;width: 40%">

         40%

         </div>

         <div class="progress-bar progress-bar-info progress-bar-striped active" style="min-width:1%;width: 40%">

         40%

         </div>

        </div>

  </body>

</html>

 

在一般景观下列是默许从不辱职分右对齐的,在实质上支出中,大家不要求左边对齐

二.组件

媒体对象

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>媒体对象</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

<style>

body{

margin: 50px;

}

 

</style>

  </head>

  <body>

   <!–

   媒体对象在左边

       media-top:上边

       media-middle:中间

       media-bottom:底部

      –>

   <div class="media">

   <div class="media-left media-bottom">

   <img  src="images/small.png" class="media-object"/>

   </div>

   <div class="media-body">

   <h4 class="media-heading">标题</h4>

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

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

   </p>

   </div>

   </div>

   <!–

       媒体对象在右边

      –>

   <div class="media">

   <div class="media-body">

   <h4 class="media-heading">标题</h4>

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

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

   </p>

   </div>

   <div class="media-right media-bottom">

   <img  src="images/small.png" class="media-object"/>

   </div>

   </div>

   <hr />

   <!–

       媒体对象列表

      –>

   <ul class="media-list">

   <li class="media">

   <div class="media-left">

   <img  src="images/small.png" class="media-object"/>

   </div>

   <div class="media-body">

   <h4 class="media-heading">标题</h4>

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

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

   </p>

  

   <div class="media">

   <div class="media-left">

   <img  src="images/small.png"class="media-object"/>

   </div>

<div class="media-body">

   <h4 class="media-heading">标题</h4>

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

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

   </p>

  

   <div class="media">

   <div class="media-left">

   <img  src="images/small.png" class="media-object"/>

   </div>

<div class="media-body">

   <h4 class="media-heading">标题</h4>

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

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

   </p>

   </div>

</div>

</div>

 

<div class="media">

   <div class="media-left">

   <img  src="images/small.png" class="media-object"/>

   </div>

<div class="media-body">

   <h4 class="media-heading">标题</h4>

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

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

   </p>

   </div>

</div>

 

</div>

   </div>

   </li>

  

<li class="media">

<div class="media-body">

   <h4 class="media-heading">标题</h4>

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

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

   </p>

    </div>

    <div class="media-right media-bottom">

   <img  src="images/small.png" class="media-object"/>

    </div>

</li>  

  </ul>

  </body>

</html>

.col-mod-* .col-md-offset-12-* 能够通过前边的漫天类来兑现。

1.well

洼地,

比如说,今日头条和讯的公布框

 4858美高梅 30

4858美高梅 31

列表组

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>列表组</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

<style>

body{

margin:20px;

}

</style>

  </head>

  <body>

   <!–

       基本的列表组组件

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

      –>

   <ul class="list-group">

   <li class="list-group-item list-group-item-success">1.第一页</li>

   <li class="list-group-item list-group-item-info">2.第二页</li>

   <li class="list-group-item list-group-item-warning">3.第三页</li>

   <li class="list-group-item list-group-item-danger">4.第四页</li>

   </ul>

   <!–

       列表组组件带徽章

      –>

   <ul class="list-group">

   <li class="list-group-item">1.第一页</li>

   <li class="list-group-item">2.第二页<span class="badge">10</span></li>

   <li class="list-group-item">3.第三页</li>

   <li class="list-group-item">4.第四页</li>

   </ul>

  

   <!–

       div a 链接

       active:激活

       disabled:禁用

      –>

   <div class="list-group">

   <a href="#" class="list-group-item">1.第一页</a>

   <a href="#" class="list-group-item active">2.第二页<span class="badge">10</span></a>

   <a href="#" class="list-group-item disabled">3.第三页</a>

   <a href="#" class="list-group-item">4.第四页</a>

   </div>

   <!–

       按钮式列表

      –>

    <div class="list-group">

   <button  class="list-group-item">1.第一页</button>

   <button class="list-group-item">2.第二页<span class="badge">10</span></button>

   <button  class="list-group-item">3.第三页</button>

   <button  class="list-group-item">4.第四页</button>

   </div>  

  

   <!–

       列表组定制内容

      –>

   <div class="list-group">

   <a href="#" class="list-group-item">

   <h4>列表标题</h4>

   <p>详细内容</p>

   </a>

   <a href="#" class="list-group-item">2.第二页<span class="badge">10</span></a>

   <a href="#" class="list-group-item">3.第三页</a>

   <a href="#" class="list-group-item">4.第四页</a>

   </div>

  

  </body>

</html>

 

 

2)列嵌套

2.页头

.page-header来显示,如bootstrap的官网:

4858美高梅 32

 

 4858美高梅 33

面板

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>面板</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

<style>

 

</style>

  </head>

  <body>

<!–表格类面板–>

    <div class="container">

<div class="row">

<div class="col-sm-6">

<div class="panel panel-info">

<div class="panel-heading">

<h3 class="panel-title text-center">学生信息</h3>

</div>

 

<table class="table table-bordered">

<thead>

<tr>

<th>编号</th>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

<th>出生地</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

<td>张三</td>

<td>男</td>

<td>20</td>

<td>中国北京</td>

</tr>

</tbody>

</table>

 

<div class="panel-footer">

底部

</div>

</div>

</div>

</div>

</div>

<!–

         列表类面板

        –>

    <div class="panel panel-info">

<div class="panel-heading">

<h3 class="panel-title text-center">头部信息</h3>

</div>

<div class="panel-body">

内容区

</div>

<ul class="list-group">

<li class="list-group-item">第一个</li>

<li class="list-group-item">第二个</li>

<li class="list-group-item">第三个</li>

<li class="list-group-item">第四个</li>

</ul>

<div class="panel-footer">

底部

</div>

  </body>

</html>

和表格比较:在表格中,能够在td中再嵌套table

3.巨幕

许多网站,都有一个近乎baner的地方,展现一些比较重要的新闻。越发是国外的网站,分外的宽广,各样课程的网站。

比如bootstrap的官网:

 4858美高梅 34

应用如下:

4858美高梅 35

结果如下:

 4858美高梅 36

响应式嵌入组件

遗闻被放到内容的表面容器的上涨幅度,自动成立二个稳定的比例,从而让浏览器自动明确内容的尺寸,能够在各类设备上缩放。

那几个规则能够平素用来<iframe>、<embed>、<video>和<object>成分。

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

  </head>

  <body>

   <!–

       响应式嵌入组件

       embed-responsive-16by9:16比9

       embed-responsive-4by3:4:3

      –>

   <div class="embed-responsive embed-responsive-16by9">

   <embed width="100%" height="100%"  src="images/1.swf" type="application/x-shockwave-flash"

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

   </div>

  </body>

</html>

那里嵌套时,不需求再加.container,只需求加.row 再加.col-md-*即可

4.label和badge

label,正是标签

独占鳌头的运用场景:

 4858美高梅 37

 

 

采用如下:

 4858美高梅 38

 

 

 

badge,正是徽章

优良场景,近日日头条的未读消息,邮箱、微信、qq等音信

 4858美高梅 39

平凡须求整合别的因向来行使

 4858美高梅 40

成效如下:

 4858美高梅 41

 

模态框

是一款交互式网站非凡普遍的弹窗效能插件。

 

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>模态框</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

<script>

$(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>

<!–modal模态框插件是一个以弹出对话框的形式出现的插件,Web开发使用较多–>

<!–模态声明

       Fade:模态框淡入淡出

–>

<div class="modal" id="myModal">

<!–窗口声明–>

<div class="modal-dialog">

<!–内容声明–>

<div class="modal-content">

<!–头部–>

<div class="modal-header">

<span class="close" data-dismiss="modal">×</span>

<h4 class="modal-title">用户登录</h4>

</div>

<!–主体–>

<div class="modal-body">

<form action="" class="form-horizontal">

<div class="form-group">

<label for="username" class="col-sm-3 control-label">用户名:</label>

<div class="col-sm-6">

<input type="text" id="username" class="form-control" placeholder="请输入用户名"/>

</div>

<label  class="col-sm-3 control-label text-danger" style="text-align:left;">*不可为空</label>

</div>

<div class="form-group">

<label for="password" class="col-sm-3 control-label">密码:</label>

<div class="col-sm-6">

<input type="password" id="password" class="form-control" placeholder="请输入密码"/>

</div>

<label  class="col-sm-3 control-label text-danger" style="text-align:left;">*不可为空</label>

</div>

</form>

</div>

<!–底部–>

<div class="modal-footer">

<button class="btn btn-primary" data-dismiss="modal">关闭</button>

<button class="btn btn-primary">登录</button>

</div>

</div>

</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>

3)列排序

5.警告框

万般是在后台操作的时候,会用到。

主假如在有些操作达成以后,举办的一种提示,删除成功,更新战败等。

基类

.alert

修饰类

.alert-success  .alert-info  .alert-warning  .alert-danger

可关闭的警告框

添加.alert-dismissible

在当中添加三个关门按钮 button,并且使用data-dismisss=“alert”运营关闭成效

警戒框中的超链接

使用.alert-link

4858美高梅 42

 

来得效果如下:

 4858美高梅 43

滚动监听插件

滚动监听插件是用来依照滚动条所处在的职分自动更新导航项目,呈现导航项目高亮呈现。

当使用滚动监听插件的还要在 DOM
中添加或删除成分后,你需求像上面那样调用此刷新( refresh) 方法:

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

 

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

<style>

 

</style>

  </head>

  <body>

<!–scrollspy滚动监听插件是用来根据滚动条所处位置自动更新导航项目–>

<nav class="navbar navbar-default" id="nav">

<div class="navbar-header">

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

</div>

<ul class="nav navbar-nav">

<li><a href="#html5">HTML5</a></li>

<li><a href="#css3">CSS3</a></li>

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

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">

BootStrap

<span class="caret"></span>

</a>

<ul class="dropdown-menu">

<li><a href="#bootcss">栅格系统</a></li>

<li><a href="#offset">列偏移</a></li>

<li><a href="#pl">列排列</a></li>

</ul>

</li>

</ul>

</nav>

<!–

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

     position:relative;  相对定位

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

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

–>

<div data-target="#nav" data-spy="scroll" style="height:200px;overflow:auto;position:relative;padding:0 30px;">

<h4 id="html5">HTML5</h4>

<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>

<h4 id="css3">CSS3</h4>

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

flexbox

flexbox

复杂的网页需求而设计。

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

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

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

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

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

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

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

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

<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>

<h4 id="bootcss">栅格系统</h4>

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

flexbox

flexbox

复杂的网页需求而设计。

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

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

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

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

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

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

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

<h4 id="offset">列偏移</h4>

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

flexbox

flexbox

复杂的网页需求而设计。

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

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

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

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

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

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

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

<h4 id="pl">列排列</h4>

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

flexbox

flexbox

复杂的网页需求而设计。

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

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

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

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

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

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

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

</div>

  </body>

</html>

变更左右变化,col-md-push-* 和 col-md-pull-* 注意push 和pull之和为12;

6.分页

用到的是列表,ul

宗旨选取,只需求给ul添加.pagination

当前页,可以加.active

假若要禁用某一页,须求添加 .disabled

采用如下:

 4858美高梅 44

公开暗许的是中档大小,还是能变动分页的深浅。

尺寸

.pagination-lg .pagination-sm

 4858美高梅 45

标签页

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>标签页</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

<style>

body{

margin:10px;

}

</style>

  </head>

  <body>

<!–tab 标签页插件,就是通常所说的选项卡功能–>

<!–通过data-toggle–>

<ul class="nav nav-tabs">

<li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li>

<li><a href="#css" data-toggle="tab">CSS</a></li>

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

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

</ul>

 

<div class="tab-content">

<div class="tab-pane active" id="html5">HTML5…..</div>

<div class="tab-pane" id="css">CSS…..</div>

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

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

</div>

 

<ul class="nav nav-tabs">

<li class="active"><a href="#html5s">HTML5</a></li>

<li><a href="#csss">CSS</a></li>

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

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

</ul>

<!–

        fade:淡出淡出

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

        –>

<div class="tab-content">

<div class="tab-pane fade active" id="html5s">HTML5…..</div>

<div class="tab-pane fade" id="csss">CSS…..</div>

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

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

</div>

<script>

$(‘.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>

4.剔除网格系统

7.路线导航

路线导航,又称之为面包屑导航。

在超过一半网站中,都会有些贰个布局。给用户四个分明的指令,还知道本人在哪儿,不至于迷路了。

优异的选拔:

 4858美高梅 46

 

 4858美高梅 47

列表结构,在ol或许ul上添加 .breadcrumb

 4858美高梅 48

工具提醒插件

data-container:默许值 false,将 tooltip 附加到特定的要素上。比如结合按钮组提醒,容器不够,能够增大 body 上。container   :   ‘body’。当前容器不足以制止tooltip,将tooltip放置到更大的容器上。

data-selector:当三个父容器里有三个零部件供给加tooltip,当供给钦定有些组件的tooltip显示时使用。

$(‘#selection’).tooltip({

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

});

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

<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"/>

<script>

//必须使用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>

透过下表能够详细查看bootstrap的栅格系统在各大荧屏设备的行事

8.进度条

相对来说,出现的少一些。

独立应用场景 —- 文本上传(图片)

主题采取

进度条,平时是由父成分和子成分共同整合的,

.progress(父) + .progress-bar(子)

进度条的颜色

.progress-bar-success .progress-bar-info .progress-bar-warning
.progress-bar-danger

条纹效果

.progress-bar-striped 

动画片效果

.active

 4858美高梅 49

功能如下:

 4858美高梅 50

 

弹出框插件

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

<style>

body{

margin:30px;

}

</style>

  </head>

  <body>

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

基于工具提示插件

–>

<button class="btn btn-primary" data-toggle="popover" title="标题" data-content="内容">点我</button>

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

<hr/>

 

<div style="width:100px;height:100px;" id="div" class="bg-success" data-toggle="popover"></div>

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

//将popover和父容器对齐

<div id="view">

<button class="btn btn-primary" data-toggle="popover" title="HTML5" data-content="标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4" id="viewbtn">

HTML5

</button>

</div>

<script>

 $(‘[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>

4858美高梅 51

9.按钮组

前面,大家早就会单个的按钮,在web开发中,平常须求将按钮使用组的方式来显现。

只要求将button放在 八个器皿(如div)中,给容器加三个 .btn-group

也得以变动按钮组的尺寸,

.btn-group-lg  .btn-group-sm .btn-group-xs

 4858美高梅 52

 

按钮插件

能够透过按钮插件成立分歧情状的按钮。

//单个切换。

 

<button   class="btn   btn-primary"   data-toggle="button" autocomplete="off">单个切换</button>

 

 

注:在 Firefox 数十次页面加载时,按钮可能维持表单的剥夺或选拔意况。

杀鸡取蛋方案是:添加 autocomplete=”off”。

 

//单选按钮

<div   class="btn-group"   data-toggle="buttons">

<label   for=""   class="btn   btn-primary   active">

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

</label>

<label   for=""   class="btn   btn-primary">

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

</label>

</div>

//复选按钮

<div   class="btn-group"   data-toggle="buttons">

<label   for=""   class="btn   btn-primary   active">

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

</label>

<label   for=""   class="btn   btn-primary">

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

</label>

<label   for=""   class="btn   btn-primary">

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

</label>

<label   for=""   class="btn   btn-primary">

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

</label>

</div>

//加载状态

<button   id="myButton"   type="button"   data-loading-text="Loading…" class="btn   btn-primary"   autocomplete="off">

加载状态

</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’);

})

二、全局CSS样式

叁 、重回顶部的按钮效果落成:

1 <a href="#top" id="scrollUp"><i class="fa fa-angle-up"></i></a>

专注引入字体文件css

<link
href=””
rel=”stylesheet”>

折叠插件

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>折叠插件</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

<style>

body{

margin:50px;

}

</style>

  </head>

  <body>

<!–折叠插件 collapse,通过点击按钮可以折叠内容,data属性实现–>

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

<div class="collapse" id="content">

<div class="well">

Bootstrap是一个开源的前端框架

</div>

</div>

 

<!–折叠插件 collapse,通过点击按钮可以折叠内容,JS实现–>

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

<hr/>

<!–

手风琴式的折叠插件

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

–>

<div class="panel-group" id="accordion">

 

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">

<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">

Collapsible Group Item #1

</a>

</h4>

</div>

<!–

             .collapse:默认影藏

             .in:隐藏后可以显示

            –>

<div id="collapseOne" class="panel-collapse collapse in">

<div class="panel-body">

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>

</div>

</div>

 

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">

<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">

Collapsible Group Item #2

</a>

</h4>

</div>

<div id="collapseTwo" class="panel-collapse collapse">

<div class="panel-body">

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>

</div>

</div>

 

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">

<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">

Collapsible Group Item #3

</a>

</h4>

</div>

<div id="collapseThree" class="panel-collapse collapse">

<div class="panel-body">

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>

</div>

</div>

</div>

 

<script>

$(‘#btn’).click(function(){

$(‘#content’).collapse(‘toggle’);

});

</script>

 </body>

</html>

5.列表

 肆 、代码分享

bt.html

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale = 1">
  6     <title>Bootstrap中文网</title>
  7     <link rel="stylesheet" href="css/bootstrap.min.css">
  8     <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  9     <style>
 10         .jumbotron{
 11             position: relative;
 12             padding: 40px 0;
 13             color: #fff;
 14             text-align: center;
 15             text-shadow: 0 1px 3px rgba(0,0,0,.4),0 0 30px rgba(0,0,0,.075);
 16             background: #020031; 
 17             background: -moz-linear-gradient(45deg,#020031 0,#6d3353 100%);
 18              background: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#020031),color-stop(100%,#6d3353)); 
 19             background: -webkit-linear-gradient(45deg,#020031 0,#6d3353 100%); 
 20             background: -o-linear-gradient(45deg,#020031 0,#6d3353 100%);
 21             background: -ms-linear-gradient(45deg,#020031 0,#6d3353 100%);
 22             background: linear-gradient(45deg,#020031 0,#6d3353 100%); 
 23             filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#020031', endColorstr='#6d3353', GradientType=1);
 24             -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2); 
 25             -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);
 26              box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);
 27         }
 28         .jumbotron a{
 29             color:rgba(255,255,255,.5)
 30             -webkit-transition:all .2s ease-in-out;
 31             -moz-transition:all .2s ease-in-out;
 32             -o-transition:all .2s ease-in-out;
 33             -ms-transition:all .2s ease-in-out;
 34             transition:all .2s ease-in-out;
 35         }
 36         .jumbotron a:hover{
 37             color:#fff;
 38         }
 39         .jumbotron a.btn{
 40             color:#fff;
 41         }
 42         .thumbnail{height:330px;}
 43         .footer{
 44             padding:30px 0;
 45             border-top:1px solid #e5e5e5;
 46             margin-top: 70px;
 47         }
 48         .footer a{color:#777;}
 49         .footer .about>div h4{
 50             color:#563d7c;
 51             font-size: 16px;
 52         }
 53         #scrollUp{
 54             background-color:#777;
 55             font-size: 40px;
 56             line-height: 1;
 57             text-align:center;
 58             text-decoration:none;
 59             position:fixed;
 60             right:20px;
 61             bottom:20px;
 62             overflow:hidden;
 63             width: 46px;
 64             height: 46px;
 65             border:none;
 66             opacity:.8;
 67             display:none;
 68         }
 69         .fa-angle-up:before{
 70             content:"\f106";
 71         }
 72     </style>
 73     <script src="js/jquery-1.11.3.min.js"></script>
 74     <script src= "js/bootstrap.min.js"></script>
 75 </head>
 76 <body>
 77     <nav class="navbar navbar-default navbar-fixed-top navbar-inverse ">
 78         <div class="container">
 79             <div class=" navbar-header">
 80                 <a href=""class="navbar-brand">Bootstrap中文网</a></div>
 81             <ul class="nav navbar-nav">
 82                 <li>
 83                     <a href="">Bootstrap2中文文档</a>
 84                 </li>
 85                 <li>            
 86                     <a href="">Bootstrap3中文文档</a>
 87                 </li>
 88                 <li>
 89                     <a href="">less教程</a>
 90                 </li>
 91                 <li>
 92                     <a href="">网站实例</a>
 93                 </li>
 94             </ul>
 95         </div>
 96     </nav>
 97     <div class="jumbotron masthead">
 98         <h1>Bootstrap</h1>
 99         <p>简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。</p>
100         <a href="" class="btn btn-primary btn-lg">Bootstrap2中文文档(v2.3.2)</a>
101 
102         <br>
103         <br>
104         <p><a href=""><small>Bootstrap2中文文档(v2.3.2)</small></a></p>
105     </div>
106     <div class="container">
107         <div class="page-header text-center">
108             <h1>Bootstrap相关优质项目推荐</h1>
109             <p>这些项目或者是对Bootstrap进行了有益的补充,或者是基于Bootstrap开发的</p>
110         </div>
111         <div class="row">
112             <div class="col-md-3">
113                     <div class="thumbnail">
114                         <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
115                         <div class="caption text-center">
116                             <h4>Bootstrap编码规范<br>
117                                 <small>by @mdo</small>
118                             </h4>
119                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
120                         </div>
121                     </div>
122             </div>
123             <div class="col-md-3">
124                 <div class="thumbnail">
125                     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
126                     <div class="caption text-center">
127                         <h4>jQuery API<br>
128                             <small>中文手册</small> 
129                         </h4>
130                         <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
131                     </div>
132                 </div>
133             </div>
134             <div class="col-md-3">
135                     <div class="thumbnail">
136                         <a href=""><img src="image/bs3.png" alt="4858美高梅 53"></a>
137                         <div class="caption text-center">
138                             <h4>Bootstrap编码规范<br>
139                                 <small>by @mdo</small>
140                             </h4>
141                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
142                         </div>
143                     </div>
144             </div>
145             <div class="col-md-3">
146                     <div class="thumbnail">
147                         <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
148                         <div class="caption text-center">
149                             <h4>w3schools<br>
150                                 <small>原版国内镜像</small>
151                             </h4>
152                             <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
153                         </div>
154                     </div>
155             </div>
156         </div>
157         <div class="row">
158             <div class="col-md-3">
159                     <div class="thumbnail">
160                         <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
161                         <div class="caption text-center">
162                             <h4>Bootstrap编码规范<br>
163                                 <small>by @mdo</small>
164                             </h4>
165                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
166                         </div>
167                     </div>
168             </div>
169             <div class="col-md-3">
170                 <div class="thumbnail">
171                     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
172                     <div class="caption text-center">
173                         <h4>jQuery API<br>
174                             <small>中文手册</small> 
175                         </h4>
176                         <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
177                     </div>
178                 </div>
179             </div>
180             <div class="col-md-3">
181                     <div class="thumbnail">
182                         <a href=""><img src="image/bs3.png" alt="4858美高梅 54"></a>
183                         <div class="caption text-center">
184                             <h4>Bootstrap编码规范<br>
185                                 <small>by @mdo</small>
186                             </h4>
187                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
188                         </div>
189                     </div>
190             </div>
191             <div class="col-md-3">
192                     <div class="thumbnail">
193                         <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
194                         <div class="caption text-center">
195                             <h4>w3schools<br>
196                                 <small>原版国内镜像</small>
197                             </h4>
198                             <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
199                         </div>
200                     </div>
201             </div>
202         </div>
203         <div class="row">
204             <div class="col-md-3">
205                     <div class="thumbnail">
206                         <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
207                         <div class="caption text-center">
208                             <h4>Bootstrap编码规范<br>
209                                 <small>by @mdo</small>
210                             </h4>
211                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
212                         </div>
213                     </div>
214             </div>
215             <div class="col-md-3">
216                 <div class="thumbnail">
217                     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
218                     <div class="caption text-center">
219                         <h4>jQuery API<br>
220                             <small>中文手册</small> 
221                         </h4>
222                         <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
223                     </div>
224                 </div>
225             </div>
226             <div class="col-md-3">
227                     <div class="thumbnail">
228                         <a href=""><img src="image/bs3.png" alt="4858美高梅 55"></a>
229                         <div class="caption text-center">
230                             <h4>Bootstrap编码规范<br>
231                                 <small>by @mdo</small>
232                             </h4>
233                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
234                         </div>
235                     </div>
236             </div>
237             <div class="col-md-3">
238                     <div class="thumbnail">
239                         <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
240                         <div class="caption text-center">
241                             <h4>w3schools<br>
242                                 <small>原版国内镜像</small>
243                             </h4>
244                             <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
245                         </div>
246                     </div>
247             </div>
248         </div>
249         <div class="row">
250             <div class="col-md-3">
251                     <div class="thumbnail">
252                         <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
253                         <div class="caption text-center">
254                             <h4>Bootstrap编码规范<br>
255                                 <small>by @mdo</small>
256                             </h4>
257                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
258                         </div>
259                     </div>
260             </div>
261             <div class="col-md-3">
262                 <div class="thumbnail">
263                     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
264                     <div class="caption text-center">
265                         <h4>jQuery API<br>
266                             <small>中文手册</small> 
267                         </h4>
268                         <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
269                     </div>
270                 </div>
271             </div>
272             <div class="col-md-3">
273                     <div class="thumbnail">
274                         <a href=""><img src="image/bs3.png" alt="4858美高梅 56"></a>
275                         <div class="caption text-center">
276                             <h4>Bootstrap编码规范<br>
277                                 <small>by @mdo</small>
278                             </h4>
279                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
280                         </div>
281                     </div>
282             </div>
283             <div class="col-md-3">
284                     <div class="thumbnail">
285                         <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
286                         <div class="caption text-center">
287                             <h4>w3schools<br>
288                                 <small>原版国内镜像</small>
289                             </h4>
290                             <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
291                         </div>
292                     </div>
293             </div>
294         </div>
295         <div class="row">
296             <div class="col-md-3">
297                     <div class="thumbnail">
298                         <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
299                         <div class="caption text-center">
300                             <h4>Bootstrap编码规范<br>
301                                 <small>by @mdo</small>
302                             </h4>
303                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
304                         </div>
305                     </div>
306             </div>
307             <div class="col-md-3">
308                 <div class="thumbnail">
309                     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
310                     <div class="caption text-center">
311                         <h4>jQuery API<br>
312                             <small>中文手册</small> 
313                         </h4>
314                         <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
315                     </div>
316                 </div>
317             </div>
318             <div class="col-md-3">
319                     <div class="thumbnail">
320                         <a href=""><img src="image/bs3.png" alt="4858美高梅 57"></a>
321                         <div class="caption text-center">
322                             <h4>Bootstrap编码规范<br>
323                                 <small>by @mdo</small>
324                             </h4>
325                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
326                         </div>
327                     </div>
328             </div>
329             <div class="col-md-3">
330                     <div class="thumbnail">
331                         <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
332                         <div class="caption text-center">
333                             <h4>w3schools<br>
334                                 <small>原版国内镜像</small>
335                             </h4>
336                             <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
337                         </div>
338                     </div>
339             </div>
340         </div>
341         <div class="row">
342             <div class="col-md-3">
343                     <div class="thumbnail">
344                         <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
345                         <div class="caption text-center">
346                             <h4>Bootstrap编码规范<br>
347                                 <small>by @mdo</small>
348                             </h4>
349                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
350                         </div>
351                     </div>
352             </div>
353             <div class="col-md-3">
354                 <div class="thumbnail">
355                     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
356                     <div class="caption text-center">
357                         <h4>jQuery API<br>
358                             <small>中文手册</small> 
359                         </h4>
360                         <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
361                     </div>
362                 </div>
363             </div>
364             <div class="col-md-3">
365                     <div class="thumbnail">
366                         <a href=""><img src="image/bs3.png" alt="4858美高梅 58"></a>
367                         <div class="caption text-center">
368                             <h4>Bootstrap编码规范<br>
369                                 <small>by @mdo</small>
370                             </h4>
371                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
372                         </div>
373                     </div>
374             </div>
375             <div class="col-md-3">
376                     <div class="thumbnail">
377                         <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
378                         <div class="caption text-center">
379                             <h4>w3schools<br>
380                                 <small>原版国内镜像</small>
381                             </h4>
382                             <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
383                         </div>
384                     </div>
385             </div>
386         </div>
387         <div class="row">
388             <div class="col-md-3">
389                     <div class="thumbnail">
390                         <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
391                         <div class="caption text-center">
392                             <h4>Bootstrap编码规范<br>
393                                 <small>by @mdo</small>
394                             </h4>
395                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
396                         </div>
397                     </div>
398             </div>
399             <div class="col-md-3">
400                 <div class="thumbnail">
401                     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
402                     <div class="caption text-center">
403                         <h4>jQuery API<br>
404                             <small>中文手册</small> 
405                         </h4>
406                         <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
407                     </div>
408                 </div>
409             </div>
410             <div class="col-md-3">
411                     <div class="thumbnail">
412                         <a href=""><img src="image/bs3.png" alt="4858美高梅 59"></a>
413                         <div class="caption text-center">
414                             <h4>Bootstrap编码规范<br>
415                                 <small>by @mdo</small>
416                             </h4>
417                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
418                         </div>
419                     </div>
420             </div>
421             <div class="col-md-3">
422                     <div class="thumbnail">
423                         <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
424                         <div class="caption text-center">
425                             <h4>w3schools<br>
426                                 <small>原版国内镜像</small>
427                             </h4>
428                             <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
429                         </div>
430                     </div>
431             </div>
432         </div>
433         <div class="row">
434             <div class="col-md-3">
435                     <div class="thumbnail">
436                         <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
437                         <div class="caption text-center">
438                             <h4>Bootstrap编码规范<br>
439                                 <small>by @mdo</small>
440                             </h4>
441                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
442                         </div>
443                     </div>
444             </div>
445             <div class="col-md-3">
446                 <div class="thumbnail">
447                     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
448                     <div class="caption text-center">
449                         <h4>jQuery API<br>
450                             <small>中文手册</small> 
451                         </h4>
452                         <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
453                     </div>
454                 </div>
455             </div>
456             <div class="col-md-3">
457                     <div class="thumbnail">
458                         <a href=""><img src="image/bs3.png" alt="4858美高梅 60"></a>
459                         <div class="caption text-center">
460                             <h4>Bootstrap编码规范<br>
461                                 <small>by @mdo</small>
462                             </h4>
463                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
464                         </div>
465                     </div>
466             </div>
467             <div class="col-md-3">
468                     <div class="thumbnail">
469                         <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
470                         <div class="caption text-center">
471                             <h4>w3schools<br>
472                                 <small>原版国内镜像</small>
473                             </h4>
474                             <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
475                         </div>
476                     </div>
477             </div>
478         </div>
479         <div class="row">
480             <div class="col-md-3">
481                     <div class="thumbnail">
482                         <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
483                         <div class="caption text-center">
484                             <h4>Bootstrap编码规范<br>
485                                 <small>by @mdo</small>
486                             </h4>
487                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
488                         </div>
489                     </div>
490             </div>
491             <div class="col-md-3">
492                 <div class="thumbnail">
493                     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
494                     <div class="caption text-center">
495                         <h4>jQuery API<br>
496                             <small>中文手册</small> 
497                         </h4>
498                         <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
499                     </div>
500                 </div>
501             </div>
502             <div class="col-md-3">
503                     <div class="thumbnail">
504                         <a href=""><img src="image/bs3.png" alt="4858美高梅 61"></a>
505                         <div class="caption text-center">
506                             <h4>Bootstrap编码规范<br>
507                                 <small>by @mdo</small>
508                             </h4>
509                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
510                         </div>
511                     </div>
512             </div>
513             <div class="col-md-3">
514                     <div class="thumbnail">
515                         <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
516                         <div class="caption text-center">
517                             <h4>w3schools<br>
518                                 <small>原版国内镜像</small>
519                             </h4>
520                             <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
521                         </div>
522                     </div>
523             </div>
524         </div>
525         <div class="row">
526             <div class="col-md-3">
527                     <div class="thumbnail">
528                         <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
529                         <div class="caption text-center">
530                             <h4>Bootstrap编码规范<br>
531                                 <small>by @mdo</small>
532                             </h4>
533                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
534                         </div>
535                     </div>
536             </div>
537             <div class="col-md-3">
538                 <div class="thumbnail">
539                     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
540                     <div class="caption text-center">
541                         <h4>jQuery API<br>
542                             <small>中文手册</small> 
543                         </h4>
544                         <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
545                     </div>
546                 </div>
547             </div>
548             <div class="col-md-3">
549                     <div class="thumbnail">
550                         <a href=""><img src="image/bs3.png" alt="4858美高梅 62"></a>
551                         <div class="caption text-center">
552                             <h4>Bootstrap编码规范<br>
553                                 <small>by @mdo</small>
554                             </h4>
555                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
556                         </div>
557                     </div>
558             </div>
559             <div class="col-md-3">
560                     <div class="thumbnail">
561                         <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
562                         <div class="caption text-center">
563                             <h4>w3schools<br>
564                                 <small>原版国内镜像</small>
565                             </h4>
566                             <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
567                         </div>
568                     </div>
569             </div>
570         </div>
571         <div class="row">
572             <div class="col-md-3">
573                     <div class="thumbnail">
574                         <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
575                         <div class="caption text-center">
576                             <h4>Bootstrap编码规范<br>
577                                 <small>by @mdo</small>
578                             </h4>
579                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
580                         </div>
581                     </div>
582             </div>
583             <div class="col-md-3">
584                 <div class="thumbnail">
585                     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
586                     <div class="caption text-center">
587                         <h4>jQuery API<br>
588                             <small>中文手册</small> 
589                         </h4>
590                         <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
591                     </div>
592                 </div>
593             </div>
594             <div class="col-md-3">
595                     <div class="thumbnail">
596                         <a href=""><img src="image/bs3.png" alt="4858美高梅 63"></a>
597                         <div class="caption text-center">
598                             <h4>Bootstrap编码规范<br>
599                                 <small>by @mdo</small>
600                             </h4>
601                             <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
602                         </div>
603                     </div>
604             </div>
605             <div class="col-md-3">
606                     <div class="thumbnail">
607                         <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
608                         <div class="caption text-center">
609                             <h4>w3schools<br>
610                                 <small>原版国内镜像</small>
611                             </h4>
612                             <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
613                         </div>
614                     </div>
615             </div>
616         </div>
617     </div>
618     <footer class="footer">
619         <div class="container">
620             <div class="row foorer-top">
621                 <div class="col-sm-6 col-lg-6">
622                     <h4>
623                         <img src="image/logo .png" alt="4858美高梅 64">
624                     </h4>
625                     <p>本网站所列开源项目的中文版文档全部由<a href="http://www.bootcss.com">Bootstrap中文网</a>成员翻译整理,并全部遵循<a href="http://creativecommons.org/licenses/by/3.0/"target="_blank">CC BY3.0</a>协议发布。</p>
626                 </div>
627                 <div class="col-sm-6 col-lg-5 col-lg-offset-1">
628                     <div class="row about">
629                         <div class="col-xs-3">
630                             <h4>关于</h4>
631                             <ul class="list-unstyled">
632                                 <li><a href="">关于我们</a></li>
633                                 <li><a href="">广告合作</a></li>
634                                 <li><a href="">友情链接</a></li>
635                                 <li><a href="">招聘</a></li>
636                             </ul>
637                         </div>
638                         <div class="col-xs-3">
639                             <h4>联系方式</h4>
640                             <ul class="list-unstyled">
641                                 <li><a href="">新浪微博</a></li>
642                                 <li><a href="">电子邮件</a></li>
643                             </ul>
644                         </div>
645                         <div class="col-xs-3">
646                             <h4>旗下网站</h4>
647                             <ul class="list-unstyled">
648                                 <li><a href="">Laravel中文网</a></li>
649                                 <li><a href="">Ghost中国</a></li>
650                             </ul>
651                         </div>
652                         <div class="col-xs-3">
653                             <h4>赞助商</h4>
654                             <ul class="list-unstyled">
655                                 <li><a href="">UCloud</a></li>
656                                 <li><a href="">又拍云</a></li>
657                             </ul>
658                         </div>
659                     </div>
660                 </div>
661             </div>
662             <hr>
663             <div class="row foot-bottom">
664                 <ul class="list-inline text-center">
665                     <li><a href="">京ICP备11008151号</a></li>|
666                     <li><a href="">京公网安备11010802014853</a></li>
667                 </ul>
668             </div>
669         </div>
670     </footer>
671     <a href="#top" id="scrollUp"><i class="fa fa-angle-up"></i></a>
672     <script>
673         $(function(){
674         var $nav = $('#scrollUp');
675         var win_height = $(window).height();
676 
677         //当窗口滚动的时候,如果 窗口上面隐藏的高度>=一屏高度 ,返回顶部图标应该显示;否则,隐藏
678         $(window).scroll(function(){
679             if($(window).scrollTop()>=win_height){
680                 $nav.fadeIn(500);
681             }else{
682                 $nav.fadeOut(500);
683             }
684         });
685 
686         $nav.click(function(){
687             // $(window).scrollTop(0);   //没有动画
688             $('html,body').animate({scrollTop:0}, 1000);
689         });
690     })
691     </script>
692 </body>
693 </html>

 

急迅人门案例——前端最火的插件,bootstrap案例
明日,作者给小白们分享一下相比较流行的Bootstrap框架,它在工作中得到不少商厦的青…

轮播图插件

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

<style>

body{

margin:50px;

}

#myCarousel{

width:524px;

}

</style>

  </head>

  <body>

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

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

–>

<div class="carousel" id="myCarousel" data-ride="carousel">

<!–指示器–>

<ul class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>

<li data-target="#myCarousel" data-slide-to="1"></li>

<li data-target="#myCarousel" data-slide-to="2"></li>

<li data-target="#myCarousel" data-slide-to="3"></li>

</ul>

<!–滑块–>

<div class="carousel-inner">

<div class="item active">

<image src="images/ad-01.jpg" alt="">

<!–图片上加文本–>

    <div class="carousel-caption">

<h3>Bootstrap</h3>

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

</div>

</div>

<div class="item">

<image src="images/ad-02.jpg" alt="">

</div>

<div class="item ">

<image src="images/ad-03.jpg" alt="">

</div>

<div class="item">

<image src="images/ad-04.jpg" alt="">

</div>

</div>

<!–控制器–>

<a href="#myCarousel" class="carousel-control left" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left"></span>

</a>

<a href="#myCarousel" class="carousel-control right" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span>

</a>

</div>

 

<script>

//设置自动播放

$(‘#myCarousel’).carousel({

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

});

</script>

  </body>

</html>

有系列表

外加导航插件

外加导航即粘贴在显示器某处完结锚点功用

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>well组件</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

    <script src="js/jquery.min.js"></script>

    <!– Include all compiled plugins (below), or include individual files as needed –>

    <script src="js/bootstrap.min.js"></script>

<style>

.nav-pills{

width: 200px;

}

.nav-pills.affix{

top:30px;

}

</style>

  </head>

  <body data-spy="scroll" data-target="#myScollspy">

<div class="container">

<div class="jumbotron" style="height: 150px;">

<h2>Bootstrap</h2>

</div>

<div class="row">

<div class="col-xs-3" id="myScollspy">

<ul class="nav nav-pills nav-stacked"  data-spy="affix" data-offset-top="150">

<li class="active"><a href="#section-1">第一部分</a></li>

<li><a href="#section-2">第二部分</a></li>

<li><a href="#section-3">第三部分</a></li>

<li><a href="#section-4">第四部分</a></li>

<li><a href="#section-5">第五部分</a></li>

</ul>

</div>

<div class="col-xs-9">

<h2 id="section-1">第一部分</h2>

<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>

<h2 id="section-2">第二部分</h2>

<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>

<h2 id="section-3">第三部分</h2>

<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>

<h2 id="section-4">第四部分</h2>

<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>

<h2 id="section-5">第五部分</h2>

<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>

</div>

</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\品种实战\企训网

严节列表

自定义列表

4858美高梅 65

6.按钮

1)预约义样式

.btn-default .btn-primary .btn-success .btn-info .btn-warnint
.btn-danger

Button .btn .btn-default

2)尺寸.btn-lg .btn-sm
.btn-xs3)块级按钮.btn-block7.表单(1).垂直排列表单

在表单中,常常是 提醒音讯 和 表单成分 共同组成一组。

在bs中,提供.form-group 用来表示组的。

针对现实的那么些表单成分,能够使用.form-control(包含input、select、textarea)

4858美高梅 66

功用如下:

4858美高梅 67

PS:关于那些父成分,带有.form-group的因素,并不是必须是div。是块状成分就足以,比如li。

(2).水平排列

在form上,添加.form-horizontal,然后结合栅格系统。(此处,不需求使用.row,直接利用栅格列即可)

4858美高梅 68

(3).内联表单

表单都位居一行

借助.form-inline

为form成分添加.form-inline

4858美高梅 69

功效如下:

4858美高梅 70

(4).文本域

Textarea,也是通过.form-control来决定的,宽度就不用再设置cols了。

唯独他的莫斯科大学 照旧要采取rows来安装

4858美高梅 71

功能如下:

4858美高梅 72

(5).单选和多选

单选和多选,结构需求做变通,如下:

4858美高梅 73

效果如下:

4858美高梅 74

在默许情状下,它是笔直排列的。

在多数光景下,需求程度排列的。

急需使用.radio-inline,如下:

4858美高梅 75

也能够使用手册上的构造:

4858美高梅 76

关于checkbox和radio,总是有好几对不齐,全部浏览器都有诸如此类三个疾病。

Bs封装的那么些用法,消除那样的题目。

(6).援救文本

在文本框的江湖有部分提醒新闻,其实正是赞助文本。

只供给添加一个span.help-block

4858美高梅 77

意义如下:

4858美高梅 78

1.表格

骨干样式

.table,应用在table标签上

4858美高梅 79

条纹状表格

.table-striped

4858美高梅 80

带边框的表格

.table-bordered

4858美高梅 81

鼠标悬停

.table-hover

缩短表格

.table-condensed

要害是指 每一行的行高,变得更小一些

4858美高梅 82

状态类

.active .success .info .warning .danger 应用在tr/td上

4858美高梅 83

2.辅助类

l背景颜色

4858美高梅 84

l三角标志

箭头

直白动用 .caret类,如下:

4858美高梅 85

Ps:平常要结合 button 来利用,表示下拉菜单。

l关闭按钮

X.

4858美高梅 86

功能如下:

4858美高梅 87

l火速浮动

.pull-left和.pull-right

l清除浮动

.clearfix

l块状居中

.center-block

4858美高梅 88

l突显和隐藏

一向利用 .hidden 和 .show即可。

3.响应式工具

如今用来响应式栅格。

在响应式设计中,还有如下的三个须求:

在大显示器下,全数的音信都会议及展览示。

唯独在小显示器小,有针对的躲藏某个音讯。

本着这几个要求,bs提供了3个响应式的工具,能够安装遵照差别的荧屏,能够隐蔽或出示
内定的内容。

4858美高梅 89

4858美高梅 90

上述代码,当页面减少到 小于 992px以下,都会隐藏侧栏。

二.组件

1.well

譬如说,搜狐天涯论坛的发表框

4858美高梅 91

4858美高梅 92

2.页头

.page-header来显示,如bootstrap的官网:

4858美高梅 93

4858美高梅 94

4858美高梅 ,3.巨幕

多如牛毛网站,都有一个近似baner的地点,显示一些相比较关键的音信。尤其是国外的网站,万分的广泛,各个课程的网站。

比如bootstrap的官网:

4858美高梅 95

利用如下:

4858美高梅 96

结果如下:

4858美高梅 97

4.label和badge

label,正是标签

杰出的行使场景:

4858美高梅 98

使用如下:

4858美高梅 99

badge,就是徽章

卓绝气象,如知乎的未读音讯,邮箱、微信、qq等消息

4858美高梅 100

常备供给结合其余因一直使用

4858美高梅 101

职能如下:

4858美高梅 102

5.警告框

常见是在后台操作的时候,会用到。

要害是在有些操作达成今后,进行的一种提醒,删除成功,更新失利等。

基类

.alert

修饰类

.alert-success .alert-info .alert-warning .alert-danger

可关闭的警告框

添加.alert-dismissible

在其间添加1个关闭按钮 button,并且动用data-dismisss=“alert”运维关闭效用

警戒框中的超链接

使用.alert-link

4858美高梅 103

浮现效果如下:

4858美高梅 104

6.分页

用到的是列表,ul

大旨使用,只需求给ul添加.pagination

当前页,可以加.active

要是要禁止使用某一页,供给添加 .disabled

使用如下:

4858美高梅 105

当众默许的是个中山大学小,还足以更改分页的轻重。

尺寸

.pagination-lg .pagination-sm

4858美高梅 106

7.路径导航

途径导航,又称之为面包屑导航。

在大多数网站中,都会某些二个协会。给用户三个明了的提醒,还领悟本人在哪个地方,不至于迷路了。

非凡的行使:

4858美高梅 107

4858美高梅 108

列表结构,在ol大概ul上添加 .breadcrumb

4858美高梅 109

8.进度条

相对来说,出现的少一些。

非凡应用场景 —- 文件上传(图片)

主干选择

进程条,常常是由父成分和子成分共同整合的,

.progress(父) + .progress-bar(子)

进度条的颜料

.progress-bar-success .progress-bar-info .progress-bar-warning
.progress-bar-danger

条纹效果

.progress-bar-striped

动画片效果

.active

4858美高梅 110

效果如下:

4858美高梅 111

9.按钮组

前方,我们曾经会单个的按钮,在web开发中,平日供给将按钮使用组的情势来呈现。

只须要将button放在 一个器皿(如div)中,给容器加贰个 .btn-group

也足以变动按钮组的尺寸,

.btn-group-lg .btn-group-sm .btn-group-xs

4858美高梅 112

叁 、重返顶部的按钮效果落到实处

<a href=”#top” id=”scrollUp”><i
class=”fa fa-angle-up”></i></a>

瞩目引入字体文件css

复制代码 代码如下:

<link
href=””
rel=”stylesheet”>

 肆 、代码分享

bt.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale = 1">
 <title>Bootstrap中文网</title>
 <link rel="stylesheet" href="css/bootstrap.min.css">
 <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
 <style>
  .jumbotron{
   position: relative;
   padding: 40px 0;
   color: #fff;
   text-align: center;
   text-shadow: 0 1px 3px rgba(0,0,0,.4),0 0 30px rgba(0,0,0,.075);
   background: #020031; 
   background: -moz-linear-gradient(45deg,#020031 0,#6d3353 100%);
    background: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#020031),color-stop(100%,#6d3353)); 
   background: -webkit-linear-gradient(45deg,#020031 0,#6d3353 100%); 
   background: -o-linear-gradient(45deg,#020031 0,#6d3353 100%);
   background: -ms-linear-gradient(45deg,#020031 0,#6d3353 100%);
   background: linear-gradient(45deg,#020031 0,#6d3353 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#020031', endColorstr='#6d3353', GradientType=1);
   -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2); 
   -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);
    box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);
  }
  .jumbotron a{
   color:rgba(255,255,255,.5)
   -webkit-transition:all .2s ease-in-out;
   -moz-transition:all .2s ease-in-out;
   -o-transition:all .2s ease-in-out;
   -ms-transition:all .2s ease-in-out;
   transition:all .2s ease-in-out;
  }
  .jumbotron a:hover{
   color:#fff;
  }
  .jumbotron a.btn{
   color:#fff;
  }
  .thumbnail{height:330px;}
  .footer{
   padding:30px 0;
   border-top:1px solid #e5e5e5;
   margin-top: 70px;
  }
  .footer a{color:#777;}
  .footer .about>div h4{
   color:#563d7c;
   font-size: 16px;
  }
  #scrollUp{
   background-color:#777;
   font-size: 40px;
   line-height: 1;
   text-align:center;
   text-decoration:none;
   position:fixed;
   right:20px;
   bottom:20px;
   overflow:hidden;
   width: 46px;
   height: 46px;
   border:none;
   opacity:.8;
   display:none;
  }
  .fa-angle-up:before{
   content:"\f106";
  }
 </style>
 <script src="js/jquery-1.11.3.min.js"></script>
 <script src= "js/bootstrap.min.js"></script>
</head>
<body>
 <nav class="navbar navbar-default navbar-fixed-top navbar-inverse ">
  <div class="container">
   <div class=" navbar-header">
    <a href=""class="navbar-brand">Bootstrap中文网</a></div>
   <ul class="nav navbar-nav">
    <li>
     <a href="">Bootstrap2中文文档</a>
    </li>
    <li>   
     <a href="">Bootstrap3中文文档</a>
    </li>
    <li>
     <a href="">less教程</a>
    </li>
    <li>
     <a href="">网站实例</a>
    </li>
   </ul>
  </div>
 </nav>
 <div class="jumbotron masthead">
  <h1>Bootstrap</h1>
  <p>简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。</p>
  <a href="" class="btn btn-primary btn-lg">Bootstrap2中文文档(v2.3.2)</a>

  <br>
  <br>
  <p><a href=""><small>Bootstrap2中文文档(v2.3.2)</small></a></p>
 </div>
 <div class="container">
  <div class="page-header text-center">
   <h1>Bootstrap相关优质项目推荐</h1>
   <p>这些项目或者是对Bootstrap进行了有益的补充,或者是基于Bootstrap开发的</p>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small> 
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt="4858美高梅 113"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small> 
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt="4858美高梅 114"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small> 
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt="4858美高梅 115"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small> 
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt="4858美高梅 116"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small> 
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt="4858美高梅 117"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small> 
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt="4858美高梅 118"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small> 
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt="4858美高梅 119"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small> 
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt="4858美高梅 120"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small> 
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt="4858美高梅 121"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small> 
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt="4858美高梅 122"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small> 
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt="4858美高梅 123"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范:编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧。因此做了个镜像,希望英文好的同学直接去看原版教程吧!</p>
      </div>
     </div>
   </div>
  </div>
 </div>
 <footer class="footer">
  <div class="container">
   <div class="row foorer-top">
    <div class="col-sm-6 col-lg-6">
     <h4>
      <img src="image/logo .png" alt="4858美高梅 124">
     </h4>
     <p>本网站所列开源项目的中文版文档全部由<a href="http://www.bootcss.com">Bootstrap中文网</a>成员翻译整理,并全部遵循<a href="http://creativecommons.org/licenses/by/3.0/"target="_blank">CC BY3.0</a>协议发布。</p>
    </div>
    <div class="col-sm-6 col-lg-5 col-lg-offset-1">
     <div class="row about">
      <div class="col-xs-3">
       <h4>关于</h4>
       <ul class="list-unstyled">
        <li><a href="">关于我们</a></li>
        <li><a href="">广告合作</a></li>
        <li><a href="">友情链接</a></li>
        <li><a href="">招聘</a></li>
       </ul>
      </div>
      <div class="col-xs-3">
       <h4>联系方式</h4>
       <ul class="list-unstyled">
        <li><a href="">新浪微博</a></li>
        <li><a href="">电子邮件</a></li>
       </ul>
      </div>
      <div class="col-xs-3">
       <h4>旗下网站</h4>
       <ul class="list-unstyled">
        <li><a href="">Laravel中文网</a></li>
        <li><a href="">Ghost中国</a></li>
       </ul>
      </div>
      <div class="col-xs-3">
       <h4>赞助商</h4>
       <ul class="list-unstyled">
        <li><a href="">UCloud</a></li>
        <li><a href="">又拍云</a></li>
       </ul>
      </div>
     </div>
    </div>
   </div>
   <hr>
   <div class="row foot-bottom">
    <ul class="list-inline text-center">
     <li><a href="">京ICP备11008151号</a></li>|
     <li><a href="">京公网安备11010802014853</a></li>
    </ul>
   </div>
  </div>
 </footer>
 <a href="#top" id="scrollUp"><i class="fa fa-angle-up"></i></a>
 <script>
  $(function(){
  var $nav = $('#scrollUp');
  var win_height = $(window).height();

  //当窗口滚动的时候,如果 窗口上面隐藏的高度>=一屏高度 ,返回顶部图标应该显示;否则,隐藏
  $(window).scroll(function(){
   if($(window).scrollTop()>=win_height){
    $nav.fadeIn(500);
   }else{
    $nav.fadeOut(500);
   }
  });

  $nav.click(function(){
   // $(window).scrollTop(0); //没有动画
   $('html,body').animate({scrollTop:0}, 1000);
  });
 })
 </script>
</body>
</html>

如上正是本文的全体内容,希望对大家的就学抱有补助,也期望大家多多接济脚本之家。

您或然感兴趣的小说:

  • Bootstrap安装环境计划教程分享
  • 搭建Bootstrap离线文档的办法
  • Bootstrap
    CDN和本地化环境搭建
  • Bootstrap每一天必学之模态框(Modal)插件
  • Bootstrap每日必学之工具提醒(Tooltip)插件
  • Bootstrap天天必学之标签页(Tab)插件
  • Bootstrap每一天必学之折叠(Collapse)插件
  • Bootstrap天天必学之附加导航(Affix)插件
  • 值得享受和收藏的Bootstrap学习课程
  • Bootstrap框架安装使用详解

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有