关于前端:技术分享PPT整理一Bootstrap基础与应用

最近在温习的时候总感觉有些知识点总结过，然而翻了一下博客没有找到，才想起来有一些内容是放在部门的技术分享里的，趁这个时候跳了几篇绝对有价值的梳理一下，因为都是 PPT，所以内容绝对零散，以要点和图片为主。

第一篇是我在工作上刚刚能稳步前行时实现的，Boostrap 在咱们的工作中占有肯定的比重，为此我专门进行了深刻学习，题目比拟宽泛，但内容绝不是复述官网的流水账，Bootstrap 尽管简略，而且也有新的布局模式诸如 Flex、Grid 此类，但其外围的开发思维————挪动设施优先依然对咱们当初的开发有所领导，这篇分享也是着重于这一点。

Bootstrap 原名 Twitter Blueprint，是由 Twitter 推出的一个用于疾速开发 Web 应用程序和网站的前端框架。开发的初衷顾名思义，作为开发的蓝图和范本与咱们当初的需要没有太大的区别，就是因为须要一个通用的框架来省去一些反复的开发内容。其次要特点有：

挪动设施优先
敌对的学习曲线
响应式设计
卓越的兼容性
12 列响应式栅格构造

Twitter 推出的原始版本。

开始反对响应式网页设计(RWD)。页面布局能够依据显示网页的设施（桌面、平板电脑、手机）来进行动静调整。

即第三版的最终版本，是当初应用较为宽泛的版本，顺应时代的潮流，将挪动设施优先作为设计方针，更加强调了响应式设计。放弃了对 IE7 的反对。

至今为止仍在更新，我集体还不太熟悉。放弃了对 IE9 的反对。

大家开发中应该有这样的教训：即便是雷同的款式和标签，在不同的浏览器上也会呈现出不同的样子，对于 Bootstrap 这种通用框架来说，跨浏览器的一致性是十分重要的，所以开发者通过引入重置款式 Normalize.css 来让各个浏览器的 CSS 款式有一个对立的基准，这个基准次要的内容是“清零”：

移除 body 的 margin 申明
设置 body 的背景色为红色
为排版设置了根本的字体、字号和行高
设置全局链接色彩，且当链接处于悬浮:hover 状态时才会显示下划线款式

Bootstrap 的应用非常简略，这里以 3.3.7 为例，官网上曾经有十分清晰的引入阐明了，这里不再赘述，次要阐明是阐明一些要点。

Bootstrap 应用到的某些 HTML 元素和 CSS 属性须要将文档类型 DOCTYPE 设置为 HTML5。在你我的项目中的每个页面都要参照上面的格局进行设置：

<!DOCTYPE html>
<html>
  ....
</html>

不同的文档类型可能会导致页面渲染出不同的后果，应用同样的代码，但显示进去的后果却又些许不同，可能问题就出在这里，Bootstrap 官网指定应用的 HTML5 版本。

挪动设施优先是 Bootstrap 3 的最显著的变动。为了让 Bootstrap 开发的网站对挪动设施敌对，确保适当的绘制和触屏缩放，须要在网页的 head 之中增加 viewport meta 标签。

在之前的 Bootstrap 版本中（直到 2.x），您须要手动援用另一个 CSS，能力让整个我的项目敌对的反对挪动设施。
当初不一样了，Bootstrap 3 默认的 CSS 自身就对挪动设施敌对反对。
Bootstrap 3 的设计指标是挪动设施优先，而后才是桌面设施。这实际上是一个十分及时的转变，因为当初越来越多的用户应用挪动设施。
为了让 Bootstrap 开发的网站对挪动设施敌对，确保适当的绘制和触屏缩放，须要在网页的 head 之中增加 viewport meta 标签，如下所示：

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

width 属性管制设施的宽度。假如您的网站将被带有不同屏幕分辨率的设施浏览，那么将它设置为 device-width 能够确保它能正确出现在不同设施上。initial-scale=1.0 确保网页加载时，以 1:1 的比例出现，不会有任何的缩放。

在挪动设施浏览器上，通过为 viewport meta 标签增加 user-scalable=no 能够禁用其缩放（zooming）性能。通常状况下，maximum-scale=1.0 与 user-scalable=no 一起应用。这样禁用缩放性能后，用户只能滚动屏幕，就能让您的网站看上去更像原生利用的感觉。这种形式并不举荐所有网站应用，视状况而定！

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

Bootstrap 3 应用 body {margin: 0;} 来移除 body 的边距。除此之外还对立设置了一些款式来保障一致性：

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

第一条规定设置 body 的默认字体款式为 “Helvetica Neue”, Helvetica, Arial, sans-serif（这里应用的都是无衬线字体，一个小小的知识点，感兴趣的能够本人查下，印刷在报纸和书刊上的内容通常举荐应用衬线字体如宋体，因为其突出的衬线局部更不便大家辨认文字, 而网页设计大多举荐无衬线字体如大家相熟的微软雅黑，在清晰的电子屏幕上这种字体更加让人舒服）。
第二条规定设置文本的默认字体大小为 14 像素。
第三条规定设置默认的行高度为 1.428571429。这个值的起源是 20px/14px，详情见下图。
第四条规定设置默认的文本色彩为 #333333。
最初一条规定设置默认的背景色彩为红色。

Bootstrap 须要为页面内容和栅格零碎包裹一个 .container 容器。咱们提供了两个作此用途的类。.container（固定宽度）或.container-fluid（100% 宽度）留神，因为 padding 等属性的起因，这两种容器类不能相互嵌套。

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

通过如下的代码，把 container 的左右外边距（margin-right、margin-left）交由浏览器决定。因为内边距（padding）是固定宽度，默认状况下容器是不可嵌套的。

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

container 类也应用伪元素来维持构造。设置 display 为 table，会创立一个匿名的 table-cell 和一个新的块格式化上下文。:before 伪元素避免上边距崩塌，:after 伪元素革除浮动。如果 conteneditable 属性呈现在 HTML 中，因为一些 Opera bug，围绕上述元素创立一个空格。这能够通过应用 content: ” ” 来修复。

.container:before,
.container:after
{
  display: table;
  content: " ";
}

如下代码创立了一个伪元素，并确保了所有的容器蕴含所有的浮动元素。

.container:after
{clear: both;}

也称自适应网页设计。是一种网页设计的技术做法，该设计可使网站在 不同的设施（从桌面电脑显示器到移动电话或其余挪动产品设施）上浏览时对应不同分辨率皆有适宜的出现，缩小用户进行缩放、平移和滚动等操作行为。

采纳 RWD 设计的网站应用 CSS3 Media queries，即一种对 @media 规定的扩大，以及 流式的基于比例的网格 和自适应大小的图像以适应不同大小的设施：

应用 @media，你能够针对不同的媒体类型定义不同的款式，特地是如果你须要设置设计响应式的页面，媒体查问是十分有用的，当你重置浏览器的大小时，页面也会依据浏览器的宽度和高度从新渲染页面。

/**
媒体查问的根本格局
@media mediatype and|not|only (media feature) {CSS-Code;}
媒体查问在 Bootstrap 中的利用，应用了缩写，意为当屏幕可视窗口的宽度大于 768 像素时，container 类的宽度为 750px*/
@media (min-width: 768px) {.container { width: 750px;} }

媒体查问是 Boostrap 的外围栅格零碎的基石，在下文中我会详述栅格零碎，但在这之前咱们要留神媒体查问不反对 IE8 以下的版本，这也是最开始咱们提到 3.3.7 版本放弃对 IE7 反对的起因。然而借助 JS 插件 Respond.js 能够让 IE6- 8 反对媒体查问的宽度条件，从而是栅格零碎能够在低版本 IE 上失常利用，所以该插件也常常和 Bootstrap 一起应用，类似的还有 html5shiv.js，这个插件能够让低版本的 IE 浏览器辨认 H5 标签。

栅格零碎是 Bootstrap 中的外围，正是因为栅格零碎的存在，Bootstrap 能力有着如此弱小的响应式布局计划。上面是官网文档中的讲解：

Bootstrap 提供了一套 响应式、挪动设施优先的流式栅格零碎，随着屏幕或视口（viewport）尺寸的减少，零碎会主动分为最多 12 列。蕴含了用于简略的布局选项的预约义类，也蕴含了用于生成更多语义布局的功能强大的混合类。

/* 超小屏幕（手机，小于 768px）*/
/* 没有任何媒体查问相干的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是挪动设施优先的吗？）*/
/* 小屏幕（平板，大于等于 768px）*/
@media (min-width: @screen-sm-min) {...}
/* 中等屏幕（桌面显示器，大于等于 992px）*/
@media (min-width: @screen-md-min) {...}
/* 大屏幕（大桌面显示器，大于等于 1200px）*/
@media (min-width: @screen-lg-min) {...}

Bootstrap 的根底 CSS 代码 默认从小屏幕设施 （比方挪动设施、平板电脑）开始，而后 应用媒体查问扩大到大屏幕设施（比方笔记本电脑、台式电脑）上的组件和网格。这段阐明正是 Bootstrap 挪动设施优先特点的印证，从挪动设施开始设计，逐渐向上判断并增加内容，这也应该是跨端网页设计应该参考的形式。

行（row）

数据行（.row）必须蕴含在容器.container（固定宽度）或.container-fluid（100% 宽度）中，以便为其赋予适合的排列（aligment）和内填充（padding）。如：

<div class="container"><!-- 程度居中，两边有 margin，最小屏幕时，充斥父元素 -->
    <div class="row"></div>
</div> <!-- 或者 -->
<div class="container-fluid"><!-- 默认始终充斥整个父元素 -->
    <div class="row"></div>
</div>

.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand
{margin-left: -15px;}

.row {margin-right: -15px; margin-left: -15px;}

列（column）

在数据行（.row)中能够增加列（column），但列数之和不能超过平分的总列数（在超过时，多余局部会换行显示），默认 12（应用 Less 或者 Sass 能够进行自定义设置）。

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
{position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;}

所有列的根本款式雷同，宽度 width 不同，别离为不同的比例的百分数，如：

.col-xs-12 {width: 100%;}
.col-xs-11 {width: 91.66666667%;}
.col-xs-10 {width: 83.33333333%;}
.col-xs-9 {width: 75%;}

xs、sm、md、lg 别离对应超小、小、中等、大屏，具体阐明见下图：

Boostrap 官网上有很清晰的演示，应用开发者工具将屏幕调整到手机版大小能够间接看到栅格的变动，随着屏幕的变大和放大，浏览器会自行判断利用 xs 还是 sm 款式：

间接看 Bootstrap 的源码就能够发现媒体查问在外面所起到的作用，后面咱们说过 Bootstrap 是挪动设施优先的，所以 xs 的代码间接写在里面，sm 的代码则放在媒体查问：屏幕宽度大于等于 768px 的代码块中，顺次类推，md 和 lg 也是一样的。

.col-xs-12 {width: 100%;}
.col-xs-11 {width: 91.66666667%;}
.col-xs-10 {width: 83.33333333%;}
/** 省略其余 */

@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {float: left;}
  .col-sm-12 {width: 100%;}
  .col-sm-11 {width: 91.66666667%;}
  /** 省略其余 */
}

页面上的具体内容该当搁置于列（column）内，并且只有列（column）能够作为数据行.row 容器的间接子元素。

这篇博客的内容很简略，根本都是入门级内容，前面也用来给部门新人培训用，过后的背景是大家都会用 Bootstrap，然而用法各式各样，很多官网提到的点都没有留神，所以也借技术分享的机会阐明一下，前面还有一些应用型的内容就没有写进来了，都是简略地利用 API 来实现性能，这里着重的还是这只 挪动设施优先 的思维，开发初期就有这种从少到多，逐级增加的概念后，前面我在第一次遇到挪动开发时也没有过多地返工，心愿也能对大家有用。

关于前端:技术分享PPT整理一Bootstrap基础与应用

简介

起源

四个次要版本

1. 1.0.0

2. 2.3.2

3. 3.3.7

4. 4.x.x

重置款式

如何开始

HTML5 文档类型

挪动设施优先

根本的全局显示

容器（Container）

响应式网页设计（Responsive web design，通常缩写为 RWD）

媒体查问

栅格零碎

实现原理

根本构造

结语