开始bootstrap的学习

终于过完双十一，服务器顶住了压力，不知道为啥，突然的轻松，反而感觉有点无所适从，好久没写博客了，竟然发现还有人回我，很是开心，问题都是关于阿里云的，阿里云的吭确实多，其实关键在于，官方文档还是少，出了问题，很多都要靠自己去尝试，自己去找方法。

 

好了，今天开始学习bootstrap，自己本身是后端出身，java,php,nodejs都做过几个网站，目前负责白菜哦的全部技术，android和ios的app有时也需要自己去修改一些bug，瞬间感觉自己全能，有木有，不过直到现在，才发现之前一直鄙视的在mobile上的html5技术还是有某些方面的优势的，简单说下，目前我们的网站分成了 web, wap, ios,android， 后端甚至都是分开的，ios和android 会共享 api的调用逻辑，其他的都是分开的，相当于，要维护大量的重复的东西，这样带来的好处是，当你遇到某个具体bug时，你比较容易找到地方，去debug，去修正，坏处是当你修改了一个bug，你可能要分别去其他几个地方去看看，是否有bug，是否要去修改其他地方的问题，所以，要是再给我一次机会，这些是一定要复用的，及时判断逻辑变得更复杂，那也是必须要做的事情。这点，希望大家在以后写程序的时候去体会。

 

越来越觉得响应式布局这个概念是多么的前卫，为什么一定要这样去设计，因为，这样可能就能让你少维护一个平台，比如wap和web，你打开的是同一个页面，但是看到的是个性化的东西，很酷，很炫，对不对？  哈哈，当然需要功力。

首先说下 最基本的布局：

meta：

移动设备优先，且禁止缩放

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

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

布局容器

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

.container 类用于固定宽度并支持响应式布局的容器。

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

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

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

栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
• 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
• 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
• 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。（没看懂）

最后一条没看明白，但是在做了个试验，下面用个例子来说明这个问题：

<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
在一个div class里面有两个类 col-xs-6 和 col-sm-4，

col-sm-4在屏幕超过768px的地方才会生效。col-xs-6会在屏幕小的地方生效，这种思路可以得到扩展，自己在做设计的时候，要解决一些兼容问题，可以往这个思路去考虑。

随便粘几个例子，在例子里面去体会：

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>


响应式的大家根据自己的需求去尝试，下面是经常需要用的，当我们有嵌套时，且不想把所有格子占满时，怎么写

这种效果,

<div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row show-grid">
        <div class="col-xs-8 col-sm-5 col-sm-offset-1">
          Level 2: .col-xs-8 .col-sm-6
        </div>
        <div class="col-xs-4 col-sm-5">
          Level 2: .col-xs-4 .col-sm-6
        </div>
      </div>
    </div>

 

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序

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

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

 

另外，推荐下firefox的全新浏览器，优化好像确实有进步。

https://ftp.mozilla.org/pub/firefox/releases/57.0/

Firefox Quantum（火狐量子）浏览器还对内存数据使用优先顺序进行优化，使其内存占用率比谷歌浏览器低30%。Firefox Quantum（火狐量子）浏览器采用名为Photon的用户界面，提供更简约的外观，在高DPI显示器上看起来不错