2019年3月29日13:12:06 发表评论 742 views

第1章 Bootstrap介绍

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

1.1 Bootstrap下载

官方地址：https://getbootstrap.com
中文地址：http://www.bootcss.com/

1.2 Bootstrap环境搭建

1.2.1 目录结构

bootstrap-3.3.7-dist
├── css                                          // CSS文件
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css                        // 核心CSS样式压缩文件
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css                      // Bootstrap主题样式文件
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css                  // 主题相关样式压缩文件
│   └── bootstrap-theme.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

1.2.2 处理依赖

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

第2章 Bootstrap全局样式

排版、按钮、表格、表单、图片等我们常用的HTML元素，Bootstrap中都提供了全局样式，我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式，从而使我们的页面更美观和谐。

2.1 格栅系统

2.1.1 什么是格栅系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

2.1.2 格栅系统特点

“行（row）”必须包含在.container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
每一行（row）均分成12列（col-xx-**），每列必须放在row中。
只有列能作为行的直接子元素（列和行搭配着用）
每一个标签可以自定义占的列数（col-xx-**）。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

2.1.3 格栅参数

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列
.container 最大宽度	None（自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12

【示例】：

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

【效果】：

2.1.4 列偏移

.col-md-offset-*    // 将列向右侧偏移*列，如.col-md-offset-4类将.col-md-4元素向右偏移4列的宽度

【示例】：

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

【效果】：

2.1.5 列排序

.col-md-push-*      // 将列放到右侧
.col-md-pull-*      // 将列放到左侧

【示例】：

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

【效果】：

更多：https://v3.bootcss.com/css/#grid

2.2 排版

2.2.1 标题相关

2.2.1.1 标题

<!--使用h标签-->
<h1>一级标题36px</h1>
<h2>二级标题30px</h2>
<h3>三级标题24px</h3>
<h4>四级标题18px</h4>
<h5>五级标题14px</h5>
<h6>六级标题12px</h6>
除了使用h标签，Bootstrap内置了相应的全局样式：
<!--内联标签应用标题样式-->
<span class="h1">一级标题36px</span>
<span class="h2">二级标题30px</span>
<span class="h3">三级标题24px</span>
<span class="h4">四级标题18px</span>
<span class="h5">五级标题14px</span>
<span class="h6">六级标题12px</span>

2.2.1.2 副标题

在标题内可以包含 <small> 标签或赋予 .small 类的元素用来标记副标题（小号文本）：

<h1>一级标题<small>小标题</small></h1>
<h1>一级标题<span class="small">小标题</span></h1>

2.2.2 页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

2.2.2.1 中心内容

.lead类             // 让段落突出显示

2.2.2.2 内联文本元素

<mark>              // 高亮文本
<del> / <s>         // 删除文本，<span style="text-decoration: line-through;">文本中间有一条横线</span>
<ins> / <u>         // 插入文本，<u>文本下面有一条横线</u>
<strong>            // 着重，<strong>加粗文本</strong>
<em>                // 强调，<em>斜体</em>

Tips：可以使用 <b> 和 <i> 标签，<b> 用于高亮单词或短语，不带有任何着重的意味；而 <i> 标签主要用于发言、技术词汇等。

2.2.2.3 文本对齐

text-left       // 左对齐
text-right      // 右对齐
text-center     // 居中对齐

【示例】：

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

【效果】：

2.2.2.4 文本大小写

text-lowercase      // 全部变小写
text-uppercase      // 全部变大写
text-capitalize     // 首字母大写

【示例】：

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

【效果】：

2.2.3 缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容。

2.2.3.1 基本缩略语

【示例】：

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

【效果】：

2.2.3.2 首字母缩略语

【示例】：缩略语后面的字会稍微小一点

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

【效果】：

2.2.4 地址

在每行结尾添加 <br> 可以保留需要的样式。

【示例】：

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

【效果】：

2.2.5 引用

2.2.5.1 默认样式的引用

【示例】：

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

【效果】：

2.2.5.2 带命名来源的引用

添加 <footer> 用于标明引用来源，来源的名称可以包裹进 <cite>标签中，通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。

【示例】：

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

【效果】：

【示例】：

<blockquote class="blockquote-reverse">
  <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>

【效果】：

2.2.6 列表

2.2.6.1 内联列表

【示例】：

<ul class="list-inline">
  <li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>

【效果】：

参考：https://v3.bootcss.com/css/#type-lists

2.2.7 描述

【示例】：普通描述

<dl>
      <dt>Description lists</dt>
      <dd>A description list is perfect for defining terms.</dd>
      <dt>Euismod</dt>
      <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
      <dd>Donec id elit non mi porta gravida at eget metus.</dd>
      <dt>Malesuada porta</dt>
      <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

【效果】：

【示例】：水平描述

<dl class="dl-horizontal">
      <dt>Description lists</dt>
      <dd>A description list is perfect for defining terms.</dd>
      <dt>Euismod</dt>
      <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
      <dd>Donec id elit non mi porta gravida at eget metus.</dd>
      <dt>Malesuada porta</dt>
      <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

【效果】：

2.3 代码

<code>              //内联代码
<kbd>               // 用户输入
<pre>               // 代码块
<var>               // 变量
<samp>              // 程序输出

2.3.1 内联代码

【示例】：

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

【效果】：

2.3.2 用户输入

【示例】：

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

【效果】：

2.3.3 代码块

【示例】：

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

【效果】：

2.3.4 变量

【示例】：

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

【效果】：

参考：https://v3.bootcss.com/css/#code

2.4 表格

Class	描述
.table-striped	条纹状表格
.table-bordered	带边框的表格
.table-hover	鼠标悬停变色的表格
.table-condensed	紧缩型表格
.table-responsive	响应式表格

2.4.1 条纹表格

【示例】：

<table class="table table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>

【效果】：

2.4.2 带边框表格

【示例】：

<table class="table table-bordered">
  ...
</table>

【效果】：

2.4.3 鼠标悬停变色表格

【示例】：

<table class="table table-hover">
  ...
</table>

【效果】：

2.4.4 紧缩表格

【示例】：

<table class="table table-condensed">
  ...
</table>

【效果】：

2.4.5 响应式表格

【示例】：

<div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
        </tbody>
      </table>
    </div>

【效果】：宽度变小后出现控制条

2.4.6 状态类

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

【示例】：

<table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>Column heading</th>
          <th>Column heading</th>
          <th>Column heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr class="active">
          <th scope="row">2</th>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr class="success">
          <th scope="row">3</th>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr class="info">
          <th scope="row">4</th>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr class="warning">
          <th scope="row">5</th>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr class="danger">
          <th scope="row">6</th>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
      </tbody>
    </table>

【效果】：

参考：https://v3.bootcss.com/css/#tables

2.5 表单

单独的表单控件会被自动赋予一些全局样式，所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%，将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

2.5.1 内联表单

【示例】：

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

【效果】：

Tips：注意事项：

1. 只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

2. 不要将表单组直接和输入框组混合使用，建议将输入框组嵌套到表单组中使用。

3. 一定要添加 label 标签。

2.5.2 水平表单

【示例】：

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

【效果】：

2.5.3 带图标的表单

【示例】：

<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>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

【效果】：

参考：https://v3.bootcss.com/css/#forms

2.6 按钮

2.6.1 标签元素按钮

【示例】：

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

【效果】：

2.6.2 预定义样式

【示例】：

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

【效果】：

2.6.3 按钮尺寸

【示例】：

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

【效果】：

2.6.4 状态类

Class	描述
active	激活状态
disabled	禁用状态

参考：https://v3.bootcss.com/css/#buttons

2.7 图片

2.7.1 响应式图片

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

2.7.2 图片形状

img-rounded     // 圆角矩形
img-circle      // 圆形
img-thumbnail   // 矩形

【示例】：

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

【效果】：

2.8 辅助类

2.8.1 文本颜色

【示例】：

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

【效果】：

2.8.2 背景颜色

【示例】：

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

【效果】：

2.8.3 关闭按钮

【示例】：

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

【效果】：

2.8.4 下拉三角

【示例】：

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

【效果】：

2.8.5 快速浮动

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

【示例】：

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

2.8.6 内容块居中

【示例】：

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

2.8.7 清除浮动

【示例】：

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

2.8.8 显示与隐藏

【示例】：

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

参考：https://v3.bootcss.com/css/#helper-classes

第3章常用Bootstrap组件

3.1 字体图标

【示例】：

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

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

【效果】：

参考：https://v3.bootcss.com/components/#glyphicons-glyphs

3.2 下拉菜单

【示例】：

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

【效果】：

Tips：使用上拉菜单必须要jQurey配合，否则不生效。

参考：https://v3.bootcss.com/components/#dropdowns

3.3 按钮组

【示例】：

<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
      <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" role="group" aria-label="Default button group">
      <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 btn-group-sm" role="group" aria-label="Small button group">
      <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 btn-group-xs" role="group" aria-label="Extra-small button group">
      <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>

【效果】：

参考：https://v3.bootcss.com/components/#btn-groups

3.4 按钮式下拉菜单

【示例】：

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

【效果】：

参考：https://v3.bootcss.com/components/#btn-dropdowns

3.5 输入框组

【示例】：

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

【效果】：

参考：https://v3.bootcss.com/components/#input-groups

3.6 导航

【示例】：

<ul class="nav nav-tabs">
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation"><a href="#">Help</a></li>
      <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
</ul>

【效果】：

参考：https://v3.bootcss.com/components/#nav

3.7 导航条

【示例】：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

【效果】：

参考：https://v3.bootcss.com/components/#navbar

3.8 分页

【示例】：

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

【效果】：

【示例】：

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

【效果】：

参考：https://v3.bootcss.com/components/#pagination

3.9 标签

【示例】：

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

【效果】：

参考：https://v3.bootcss.com/components/#labels

3.10 徽章

【示例】：

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

【效果】：

参考：https://v3.bootcss.com/components/#badges

3.11 巨幕

【示例】：

<div class="jumbotron">
      <h1>Hello, world!</h1>
      <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

【效果】：

参考：https://v3.bootcss.com/components/#jumbotron

3.12 页头

页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）。

【示例】：

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

【效果】：

3.13 缩略图

【示例】：

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

【效果】：

参考：https://v3.bootcss.com/components/#thumbnails

3.14 警告框

【示例】：

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

【效果】：

参考：https://v3.bootcss.com/components/#alerts

3.15 进度条

【示例】：

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

【效果】：

参考：https://v3.bootcss.com/components/#progress

【示例】：模拟滚动的进度条

3.16 其他

参考：https://v3.bootcss.com/components/#media

第4章响应式开发

4.1 响应式开发原因

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

4.2 响应式作用

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

4.3 涉及的技术

4.3.1 CSS3@media查询

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

4.3.1.1 常见属性

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

4.3.1.2 语法

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

不同的媒体使用不同的stylesheet：

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

4.3.2 viewport

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

4.3.2.1 设置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：用户是否可以手动缩放。

4.3.3 Bootstrap的栅格系统

container
row
column

Tips：使用Bootstrap的时候不要让自己的名字与Bootstrap的类名冲突。

第5章 JavaScript插件

5.1 模态框

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

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

5.1.2 HTML代码

<!-- 触发模态框的按钮 -->
<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>

5.1.2.1 注意事项

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

5.1.3 调用方式

5.1.3.1 通过data属性

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

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

5.1.3.2 通过JS代码调用

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

5.1.4 常用参数

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

5.1.4.1 方法

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

5.2 轮播图

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

5.2.1.1 方法

设置切换间隔为2秒，默认是5秒：

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

5.3 FontAwesome字体

详细用法参见Font Awesome

5.4 SweetAlert系列

详细用法参见：

SweetAlert

SweetAlert2

SweetAlert 到 SweetAlert2 升级指南

5.4.1 基本使用

swal("标题","内容","success);

使用SweetAlert在Ajax提交成功（done）或失败（error）时分别提示不用的内容。

【示例】：更新之前

function deleteRecord(recordID) {
    swal({
        title: "确定要删除这个产品吗？",
        text: "删除后可就无法恢复了。",
        type: "warning",
        showCancelButton: true,
        closeOnConfirm: false,
        confirmButtonText: "是的，我要删除！",
        confirmButtonColor: "#ec6c62",
        cancelButtonText: "容我三思"
    }, function (isConfirm) {
        if (!isConfirm) return;
        $.ajax({
            type: "post",
            url: "/delete/",
            data: {"id": recordID},
            success: function (data) {
                var dataObj = $.parseJSON(data);
                if (dataObj.status === 0) { //后端删除成功
                    swal("删除成功", dataObj.info, "success");
                    $("#p-" + recordID).remove()  //删除页面中那一行数据
                } else {
                    swal("出错啦。。。", dataObj.msg, "error");  //后端删除失败
                }
            },
            error: function () {  // ajax请求失败
                swal("啊哦。。。", "服务器走丢了。。。", "error");
            }
        })
    });
}

【示例】：更新之后

swal({
  title: "这里写标题",
  text: "这里放内容",
  icon: "warning",  // 这里放图标的类型（success,warning,info,error）
  buttons: {
    cancel: {
      text: "容我三思",
      visible: true,
      value: false
    },
    confirm: {
      text: "我就是要删除"
    }
  }
}).then(function (isConfirm) {
    if (isConfirm){
      swal("你死定了", {button: "确认"});
    }

5.5 Toastr通知

详细用法参见：Toastr

【示例】

toastr["success"]("你已经成功被绿!")

5.6 jQueryLazyload懒加载

【示例】

<!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>
</head>
<body>
<div>
  <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  ...
  <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>

</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script>
  $("img.lazy").lazyload({
    effect: "fadeIn",
    event: "click"
  })
</script>
</body>
</html>

5.7 模板

管理后台模板Metronic

第6章参考资料

https://www.cnblogs.com/liwenzhou/p/8214637.html

https://getbootstrap.com

http://www.bootcss.com/

我的微信

如果有技术上的问题可以扫一扫我的微信

1. 本网站名称：Leon的博客
2. 本站永久网址：https://blog.leonshadow.cn
3. 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ632113590进行删除处理。
4. 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5. 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6. 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

2023年 9月
一	二	三	四	五	六	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

第1章 Bootstrap介绍

1.1 Bootstrap下载

1.2 Bootstrap环境搭建

1.2.1 目录结构

1.2.2 处理依赖

第2章 Bootstrap全局样式

2.1 格栅系统

2.1.1 什么是格栅系统

2.1.2 格栅系统特点

2.1.3 格栅参数

2.1.4 列偏移

2.1.5 列排序

2.2 排版

2.2.1 标题相关

2.2.1.1 标题

2.2.1.2 副标题

2.2.2 页面主体

2.2.2.1 中心内容

2.2.2.2 内联文本元素

Tips：可以使用 <b> 和 <i> 标签，<b> 用于高亮单词或短语，不带有任何着重的意味；而 <i> 标签主要用于发言、技术词汇等。

2.2.2.3 文本对齐

2.2.2.4 文本大小写

2.2.3 缩略语

2.2.3.1 基本缩略语

2.2.3.2 首字母缩略语

2.2.4 地址

2.2.5 引用

2.2.5.1 默认样式的引用

2.2.5.2 带命名来源的引用

2.2.6 列表

2.2.6.1 内联列表

2.2.7 描述

2.3 代码

2.3.1 内联代码

2.3.2 用户输入

2.3.3 代码块

2.3.4 变量

2.4 表格

2.4.1 条纹表格

2.4.2 带边框表格

2.4.3 鼠标悬停变色表格

2.4.4 紧缩表格

2.4.5 响应式表格

2.4.6 状态类

2.5 表单

2.5.1 内联表单

Tips：注意事项：

1. 只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

2. 不要将表单组直接和输入框组混合使用，建议将输入框组嵌套到表单组中使用。

3. 一定要添加 label 标签。

2.5.2 水平表单

2.5.3 带图标的表单

2.6 按钮

2.6.1 标签元素按钮

2.6.2 预定义样式

2.6.3 按钮尺寸

2.6.4 状态类

2.7 图片

2.7.1 响应式图片

2.7.2 图片形状

2.8 辅助类

2.8.1 文本颜色

2.8.2 背景颜色

2.8.3 关闭按钮

2.8.4 下拉三角

2.8.5 快速浮动

2.8.6 内容块居中

2.8.7 清除浮动

2.8.8 显示与隐藏

第3章 常用Bootstrap组件

3.1 字体图标

3.2 下拉菜单

Tips：使用上拉菜单必须要jQurey配合，否则不生效。

3.3 按钮组

3.4 按钮式下拉菜单

3.5 输入框组

3.6 导航

3.7 导航条

3.8 分页

3.9 标签

第3章常用Bootstrap组件

第4章响应式开发

第6章参考资料