前端学习—Bootstrap

一、bootstrap简介

1.bootstrap是什么？

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
它是为实现快速开发Web应用程序而设计的一套前端工具包。
它支持响应式布局，并且在V3版本之后坚持移动设备优先。

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

2.为什么要使用bootstrap

在bootstrap出现之前，前端页面的开发问题。

标签命名：重复、复杂、无意义
标签样式：重复冗余、不规范、不和谐
页面：错乱、不规范、不和谐

使用bootstrap的有点：各种命名都统一并且规范化。页面风格统一，画面和谐。

3.bootstrap下载

官方地址：https://getbootstrap.com
中文地址：http://www.bootcss.com/
我们使用V3版本的Bootstrap，我们下载的是用于生产环境的Bootstrap。

4.bootstrap环境搭建

bootstrap目录结构

bootstrap-3.3.7-dist/

├── css  // CSS文件
│   ├── bootstrap-theme.css  // Bootstrap主题样式文件
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css  // 主题相关样式压缩文件
│   ├── bootstrap-theme.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css  // 核心CSS样式压缩文件
│   └── bootstrap.min.css.map
├── fonts  // 字体文件
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js  // JS文件
    ├── bootstrap.js
    ├── bootstrap.min.js  // 核心JS压缩文件
    └── npm.js

注意：
由于Bootstrap的某些组件依赖于jQuery，所以请确保下载对应版本的jQuery文件，来保证Bootstrap相关组件运行正常。

二、bootstrap全局样式

排版、按钮、表格、表单、图片等我们常用的HTML元素，Bootstrap中都提供了全局样式。

我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式，从而使我们的页面更美观和谐。

1.基本模板

使用以下给出的这份超级简单的 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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap 放bootstrap的css本地文件或者网络文件-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery本地或者网络路径 (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

    <!-- 加载 Bootstrap(本地或者网络路径) 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

2.布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器。bootstrap提供了两个作此用处的类。
注意，由于padding等属性的原因，这两种容器类不能互相嵌套。

container类

用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

container-fluid类

用于100%宽度，占据全部视口viewport的容器。

<div class="container-fluid">
  ...
</div>

3.栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
当一行（row）中包含的列（column）大于12，多余的列将作为一个整体换行。

媒体查询

在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

媒体查询可以捕捉显示屏幕大小，来显示不同页面的定制效果。

//根据屏幕小于700px时，将背景颜色变呈绿色
	<style>
        body {
            margin: 0;
        }
        .c1 {
            background-color: red;
            height: 200px;
        }
        /*媒体查询，捕捉显示屏幕的宽度，来显示不同的定制效果*/
        @media screen and (max-width: 700px) {
            .c1 {
                background-color: green;
            }
        }
    </style>

栅格参数

超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">列偏移4列</div>
</div>

列嵌套

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。

被嵌套的行（row）所包含的列（column）的个数不能超过12。

<div class="row">
  <div class="col-sm-9">
    一级表格
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        二级表格，占8列
      </div>
      <div class="col-xs-4 col-sm-6">
        二级表格，占4列
      </div>
    </div>
  </div>
</div>

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

4.页面排版

标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。

<p>...</p>

中心内容

通过添加 .lead 类可以让段落突出显示。

<p class="lead">...</p>

5.内容文本元素

marked text 标记本文

You can use the mark tag to <mark>highlight</mark> text.

被删除的文本

对于被删除的文本使用 <del> 标签。

<del>This line of text is meant to be treated as deleted text.</del>

着重

通过增加 font-weight 值强调一段文本。

<strong>rendered as bold text</strong>

6.对齐

通过文本对齐类，可以简单方便的将文字重新对齐。

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

7.略缩语

当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。

基本略缩语

<abbr title="attribute">attr</abbr>

首字母略缩语

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

8.引用

在你的文档中引用其他来源的内容。

默认样式引用

将任何 HTML 元素包裹在 <blockquote> 中即可表现为引用样式。对于直接引用，我们建议用 <p> 标签。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

多种引用样式

添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

9.列表

无序列表

排列顺序无关紧要的一列元素。

<ul>
  <li>第一个列表元素内容</li>
</ul>

有序列表

排序至关重要的一组列表

<ol>
  <li>第一个列表元素内容</li>
</ol>

无样式列表

移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）

<ul class="list-unstyled">
  <li>第一个列表元素内容</li>
</ul>

内联列表

通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。

<ul class="list-inline">
  <li>第一个列表元素内容</li>
</ul>

10.描述

普通描述

<dl>
  <dt>描述的标题</dt>
  <dd>描述的内容</dd>
</dl>

水平排列描述

<dl class="dl-horizontal">
  <dt>描述的标题</dt>
  <dd>描述的内容</dd>
</dl>

11.代码块

内联代码

给section加上特殊样式

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

用户输入

给组合键“Ctrl+L“加上特殊的效果展示

To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>L</kbd></kbd>

变量

用<var> 标签标记变量。

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

12.表格***

基本实例

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。

<table class="table">
  里面写正常表格内部元素，thead和tbody及内容
</table>

条纹状表格

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

<table class="table table-striped">
  里面写正常表格内部元素，thead和tbody及内容
</table>

带边框表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

<table class="table table-bordered">
  里面写正常表格内部元素，thead和tbody及内容
</table>

鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

<table class="table table-hover">
  里面写正常表格内部元素，thead和tbody及内容
</table>

状态类

通过这些状态类可以为行或单元格设置颜色。

Class	描述
`.active`	鼠标悬停在行或单元格上时所设置的颜色
`.success`	标识成功或积极的动作
`.info`	标识普通的提示信息或动作
`.warning`	标识警告或需要用户注意
`.danger`	标识危险或潜在的带来负面影响的动作

<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<div class="table-responsive">
  <table class="table">
    里面写正常表格内部元素，thead和tbody及内容
  </table>
</div>

13.表单

基本实例

input、textarea、select元素设置form_control类值，将这些元素和label元素空间包裹在设置了form-group类的div中设置排列，然后包裹在from表单中

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</form>
  </div>

内联表单

为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

<form class="form-inline">
	写表单中的标签内容
</form>

表单状态

焦点状态：我们将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性。

禁用状态：为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed鼠标状态。

只读状态：为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。

带图标的表单

还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。

反馈图标（feedback icon）只能使用在文本输入框元素上。

<div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess2">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess2Status" class="sr-only">(success)		</span>
</div>

14.图片

响应式图片

在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。

如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。

<img src="..." class="img-responsive" alt="Responsive image">

图片形状

通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。

<img src="..." alt="..." class="img-rounded">  //圆角正方形
<img src="..." alt="..." class="img-circle">  //圆形
<img src="..." alt="..." class="img-thumbnail">  //正方形

15.辅助

情景文本颜色

通过颜色来展示意图，Bootstrap 提供了一组工具类。

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</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>

快速浮动

通过添加一个类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。

<div class="pull-left">...</div>
<div class="pull-right">...</div>

内容块居中

为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。

<div class="center-block">...</div>

清除浮动

通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。

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

显示或隐藏内容

.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免 CSS 样式优先级问题。

<div class="show">...</div>
<div class="hidden">...</div>

三、常用组件

常用组件链接：https://v3.bootcss.com/components/

1.Glyphicons 字体图标

使用

出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<!--glyphicon基类，glyphicon-search图标对应类-->

实例

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

2.下拉菜单

用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。

下拉和上拉菜单实例

使用dropdown和dropup给标签设置下拉和上拉内容

实例

<!--上拉菜单-->
<div class="dropup">
    <!--设置上拉菜单图标-->
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>  <!--上拉菜单的尖角符号-->
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>  <!--井号是为了点击不提交，用于测试-->
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li> <!--设置分割符-->
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

3.按钮组

通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。

基本实例

Wrap a series of buttons with .btn in .btn-group.

用btn和btn-group类包裹一些列的按钮

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

按钮工具栏

把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

尺寸

只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

4.输入框俎

5.导航

6.分页

7.标签和徽章

8.页头

9.缩率图

10.进度条

模拟滚动进度条

var $d1 = $("#d1");
var width = 0;
var theID = setInterval(setValue, 200);

function setValue() {
  if (width === 100) {
    clearInterval(theID);
  } else {
    width++;
    $d1.css("width", width+"%").text(width+"%");
  }
}
//注意这个语句需要先引用jquery文件，写在jquery后面。

四、响应式开发

为什么要进行响应式开发

随着移动设备的流行，网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示，就需要进行响应式开发。

什么是响应式

利用媒体查询，让同一个网站兼容不同的终端（PC端、移动端）呈现不同的页面布局。

媒体查询

用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。

常见属性

device-width, device-height 屏幕宽、高
width,height 渲染窗口宽、高
orientation 设备方向
resolution 设备分辨率

语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

不同媒体使用不同的stylesheet

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

viewport

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

设置viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

五、JavaScript插件

1.常用的Bootstrap自带插件

模态框

模态框的HTML代码放置的位置

务必将模态框的HTML代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

注意

通过为模态框设置 .bs-example-modal-lg和 .bs-example-modal-sm来控制模态框的大小。
通过 .fade类来控制模态框弹出时的动画效果（淡入淡出效果）。
通过在 .modal-bodydiv中设置 .row可以使用Bootstrap的栅格系统。

调用方式

通过data属性

通过在一个触发弹出模态框的元素（例如：按钮）上添加 data-toggle="modal"属性，然后设置 data-target="#foo"属性或 href="#foo"属性，用来指向被控制的模态框。

<button type="button" data-toggle="modal" data-target="#myModal">显示模态框</button>

通过JS代码调用

$('#myModal').modal("show");  // 显示
$('#myModal').modal("hide")   // 隐藏

常用参数

名称	可选值	默认值	描述
backdrop	true/false/'static'	true	false表示有没有遮罩层，'static'表示点击遮罩层不关闭模态框
keyboard	true/false	true	键盘上的 esc 键被按下时关闭模态框。
show	true/false	true	模态框初始化之后就立即显示出来。

方法

$('#myModal').modal({
  keyboard: false
})

2.轮播图

html代码

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

图片中添加介绍信息

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

设置切换时间

$('.carousel').carousel({
  interval: 2000
})

posted @ 2019-05-14 18:00 ryxiong728 阅读(411) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

何处繁花笙歌落

路漫漫其修远兮，吾将上下而求索

前端学习—Bootstrap

一、bootstrap简介

1.bootstrap是什么？

2.为什么要使用bootstrap

3.bootstrap下载

4.bootstrap环境搭建

二、bootstrap全局样式

1.基本模板

2.布局容器

container类

container-fluid类

3.栅格系统

简介

媒体查询

栅格参数

列偏移

列嵌套

列排序

4.页面排版

标题

页面主体

中心内容

5.内容文本元素

marked text 标记本文

被删除的文本

着重

6.对齐

7.略缩语

基本略缩语

首字母略缩语

8.引用

默认样式引用

多种引用样式

9.列表

无序列表

有序列表

无样式列表

内联列表

10.描述

普通描述

水平排列描述

11.代码块

内联代码

用户输入

变量

12.表格***

基本实例

条纹状表格

带边框表格

鼠标悬停

状态类

响应式表格

13.表单

基本实例

内联表单

表单状态

带图标的表单

14.图片

响应式图片

图片形状

15.辅助

情景文本颜色

情境背景色

快速浮动

内容块居中

清除浮动

显示或隐藏内容

三、常用组件

1.Glyphicons 字体图标

使用

实例

2.下拉菜单

下拉和上拉菜单实例

3.按钮组

基本实例

按钮工具栏

尺寸

4.输入框俎