python_fullstack前端(六)-Bootstrap

前端初识

六、前端初识——Bootstrap

1、Bootstrap 简介

①什么是Bootstrap

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

②为什么使用Bootstrap

• 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
• 浏览器支持：所有的主流浏览器都支持 Bootstrap。
• 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
• 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
• 响应式设计
  
  • 它为开发人员创建接口提供了一个简洁统一的解决方案
  • 它包含了功能强大的内置组件，易于定制
  • 它还提供了基于 Web 的定制
  • 它是开源的

③Bootstrap包的内容

• 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
• CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
• 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件部分详细讲解。
• JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
• 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

④Bootstrap下载

• 官方地址：https://getbootstrap.com
• 中文地址：http://www.bootcss.com/
• 我们使用V3版本的Bootstrap，我们下载的是用于生产环境的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相关组件运行正常。

---

2、Bootstrap CSS 概览

①Bootstrap CSS作用

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

②标题相关

//标题
<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>

//副标题
<h1>一级标题<small>一级标题的副标题</small></h1>

③文本对齐

//文本对齐
<p class="text-left">文本左对齐</p>
<p class="text-right">文本右对齐</p>
<p class="text-center">文本居中对齐</p>

④文本大小写

//文本大小写
<p class="text-lowercase">文本全部小写</p>
<p class="text-uppercase">文本全部大写</p>
<p class="text-capitalize">文本首字母大写</p>

⑤表格

Class	描述
.table-striped	条纹状表格
.table-bordered	带边框的表格
.table-hover	鼠标悬停变色的表格
.table-condensed	紧缩型表格
.table-responsive	响应式表格(可根据浏览器窗口大小显示表格滚动条)

⑥状态类

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

⑦表单

• 内联表单
• 表单状态
• 带图标的表单

⑧按钮

• 按钮种类

<a class="btn btn-default" href="http://www.baidu.com" 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">

• 按钮样式

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

• 按钮大小

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

⑨图片

• 交互式图片
  <img src="..." class="img-responsive" alt="Responsive image">

• 图片形状

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

⑩辅助类

• 文本颜色

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

• 关闭按钮
  <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
• 下拉三角
  <span class="caret"></span>
• 快速浮动

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

• 内容块居中
  <div class="center-block">...</div>
• 清除浮动

<!-- Usage as a class -->
<div class="clearfix">...</div>

• 显示与隐藏

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

---

3、常用Bootstrap组件

• Glyphicons 字体图标、下拉菜单、按钮组、按钮式下拉菜单、输入框组、导航、导航条、路径导航、分页、标签、徽章、巨幕、页头、缩略图、警告框、进度条、媒体对象、列表组、面板、具有响应式特性的嵌入内容

---

4、响应式开发

①为什么要进行响应式开发？

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

②什么是响应式？

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

③CSS3@media查询

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

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

---

5、Bootstrap 栅格系统

①栅格

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

②什么是网格（Grid）

简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。

③什么是 Bootstrap 网格系统（Grid System）

• Bootstrap 官方文档中有关网格系统的描述：Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
• 简单理解一下上面的语句。Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。

④移动设备优先策略

• 内容：决定什么是最重要的。
• 布局：
  
  • 优先设计更小的宽度。
  • 基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
• 渐进增强：随着屏幕大小的增加而添加元素。
• 响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

⑤Bootstrap 网格系统（Grid System）的工作原理

• 网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：
• 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
• 使用行来创建列的水平组。
  
  • 内容应该放置在列内，且唯有列可以是行的直接子元素。
  • 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
  • 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
  • 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

⑥媒体查询

• 媒体查询是非常别致的”有条件的 CSS 规则”。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。
• Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

• 我们有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }  

• 媒体查询有两个部分，先是一个设备规范，然后是一个大小规则。在上面的案例中，设置了下列的规则：
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
  对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。

⑦网格选项

• 下表总结了 Bootstrap 网格系统如何跨多个设备工作：
  

• 基本的网格结构

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

⑧响应式的列重置

⑨偏移列

• 偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

⑩嵌套列

• 为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

⑪列排序

• Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

---

6、JavaScript插件（https://v3.bootcss.com/components/#panels-footer）

①Glyphicons 字体图标（可以用fontawesome代替Bootstrap的字体图标 https://fontawesome.com/）

• 所有可用的图标
• 如何使用
• 实例

②下拉菜单

• 实例
• 对齐
• 标题
• 分割线
• 禁用的菜单项

③按钮组

• 基本实例
• 按钮工具栏
• 尺寸
• 嵌套
• 垂直排列
• 两端对齐排列的按钮组

④按钮式下拉菜单

• 单按钮下拉菜单
• 分裂式按钮下拉菜单
• 尺寸
• 向上弹出式菜单

⑤输入框组

• 基本实例
• 尺寸
• 作为额外元素的多选框和单选框
• 作为额外元素的按钮
• 作为额外元素的按钮式下拉菜单
• 作为额外元素的分裂式按钮下拉菜单
• Multiple buttons

⑥导航

• 标签页
• 胶囊式标签页
• 两端对齐
• 禁用的链接
• 添加下拉菜单

⑦导航条

• 默认样式的导航条
• 品牌图标
• 表单
• 按钮
• 文本
• 非导航的链接
• 组件排列
• 固定在顶部
• 固定在底部
• 静止在顶部
• 反色的导航条

⑧路径导航（面包屑）

⑨分页

• 默认分页

⑩标签、徽章、巨幕

⑪页头

⑫缩略图

• 默认样式的实例
• 自定义内容

⑬警告框

• 实例
• 可关闭的警告框
• 警告框中的链接

⑭进度条

• 基本实例
• 带有提示标签的进度条
• 根据情境变化效果
• 条纹效果
• 动画效果
• 堆叠效果

⑮媒体对象

• 默认样式
• 媒体对象列表

⑯列表组

• 基本实例
• 徽章
• 链接
• Button items
• 被禁用的条目
• 情境类
• 定制内容

⑰面版

• 基本实例
• 带标题的面版
• 带注脚的面板
• 情境效果
• 带表格的面版
• 带列表组的面版

⑱具有响应式特性的嵌入内容

⑲Well

• 默认效果
• 可选类/样式

---

7、前端插件合集

①FontAwesome字体

• https://fontawesome.com/

②SweetAlert系列

• SweetAlert
  https://github.com/t4t5/sweetalert
• SweetAlert2
  https://github.com/sweetalert2/sweetalert2
• SweetAlert 到 SweetAlert2 升级指南
  https://github.com/sweetalert2/sweetalert2/wiki/Migration-from-SweetAlert-to-SweetAlert2

③Toastr

• http://codeseven.github.io/toastr/demo.html

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

⑤后台管理模板

• http://metronic.kp7.cn/

---

8、Bootstrap实例精选

①封面图

②Carousel

③博客页面

④控制台

⑤登录页

⑥Offcanvas