051_Bootstrap 框架

一，Bootstrap介绍

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。

它是为实现快速开发Web应用程序而设计的一套前端工具包。

它支持响应式布局，并且在V3版本之后坚持移动设备优先。

二，为什么要使用Bootstrap？

在Bootstrap出现之前：

命名：重复、复杂、无意义（想个名字费劲）

样式：重复、冗余、不规范、不和谐

页面：错乱、不规范、不和谐

在使用Bootstrap之后：各种命名都统一并且规范化。页面风格统一，画面和谐。

三，Bootstrap下载

官方地址：https://getbootstrap.com

中文地址：https://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相关组件运行正常。

五，Bootstrap 概览

概览：https://v3.bootcss.com/css/

1，HTML5 文档类型

　　使用 Bootstrap 需要将页面设置为 HTML5 文档类型。

　　在项目中的每一页都要参照下面的格式进行设置。

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

2，移动设备优先

　　Bootstrap 将对移动的设备样式融合进了框架，而不是增加一个文件。所以，Bootstrap是移动设备优先

　　2.1，自动适当的适应移动设备

　　　　自动适当的绘制和触屏缩放需要在 <head> 中添加 viewport 元数据标签

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

　　2.2，在移动设备上禁用其缩放(zooming)功能

　　　　通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能

　　　　更具自己的情况而定！！禁用缩放功能后，用户只能滚动屏幕，让网页看上去更像原生应用的感觉。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

3，网页样式重置（normalize.css）

　　各种不同的浏览器的有些默认样式不同，对网页产生影响

　　3.1，以前手写重置

　　　　在 <head> 中加入

<style>
	*{
		margin:0;
	}
</style

　　3.2，这里用 normalize.css

　　　　介绍：为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。

　　　　使用：在 BootCDN 网，搜索 normalize 复制 link 标签放入<head> 中；搜索：https://www.bootcdn.cn/normalize/

4，布局容器

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

　　4.1，.container 类用于固定宽度并支持响应式布局的容器(效果：网页两边留一定空间)

<div class="container">
     需要此效果的标签都放入这里
</div>

4.2，.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。(效果：网页两边不留空间，有盒子内边距)

<div class="container-fluid">
    需要此效果的标签
</div>

5，栅格系统

介绍：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

　　即：将一行最多分为12列的布局

使用：“行(row)” 必须是包含在.container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

　　5.1，简单的划分列

<div class="container">
    <div class="row">
        <div class="col-md-1">占1列</div>
        <div class="col-md-10">占10列</div>
        <div class="col-md-1">占1列</div>
    </div>
</div>

　　5.2，移动端与pc端分开设置不同排列

<div class="container">
    <div class="row">
        <div class="col-md-1 col-xs-4">PC占1列,移动4列</div>
        <div class="col-md-10 col-xs-4">PC占10列,移动4列</div>
        <div class="col-md-1 col-xs-4">PC占1列,移动4列</div>
    </div>
</div>

6，媒体查询

　　同过 @media 查询所在媒体的屏幕大小

　　6.1，设定在指定大小的屏幕内的显示效果

<!DOCTYPE html>
<html lang="en">
<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>
    <style>
        .c {
            height: 100px;
            width: 100px;
        }
        .c1 {
            background-color: red;
        }

/*当打开网页的设备是一个显示器设备，
并且显示器的宽度小于400px时，
使用下面的样式覆盖*/
        @media screen and (max- 400px) {
            .c1 {
                background-color: green;
            }
        }
    </style>

</head>
<body>
<div class="c c1"></div>
</body>
<html>

View Code

　　6.2，栅格系统的分割列的分界点

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

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

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

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

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

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

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

　　min ：最小屏幕大小 max ：最大屏幕大小

　　6.3，通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

	超小屏幕手机 (<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）	是
列排序	是