关于前端:技术分享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）

媒体查问

栅格零碎

实现原理

根本构造

结语

Just My Socks（注册教程内含优惠码）

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

简介

起源

四个次要版本

1. 1.0.0

2. 2.3.2

3. 3.3.7

4. 4.x.x

重置款式

如何开始

HTML5 文档类型

挪动设施优先

根本的全局显示

容器（Container）

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

媒体查问

栅格零碎

实现原理

根本构造

结语

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）