Bootstrap CSS Layout (1) - Breakpoint

笔者是在做项目的过程中接触到bootstrap，关于css 的框架有很多，之前接触过的还有element ui 和vuetify。 Bootstrap 好处是有自带的icon库，包含很多icon，还有css的样式。Bootstrap缺点是 引用起来比较麻烦，而且需要对它的基本设置有一定的了解才能运用自如。

Element UI感觉用起来比较方便，拿到即可上手，非常快。但是很多icon需要再引入。【Element UI 笔者还不太熟悉，后面也会加深理解。】

Bootstrap 是以mobile 为优先的，也可以运用于电脑桌面端，所以如果做手机端app 和网页也很方便。

运用bootstrap 首先还是要了解它的基本设定，才能准确达到自己想要的样式。

第一点需要注意的就是Breakpoint

举个例子，就是bootstrap 设定的class里面的内容：下面.col-lg-2 中的lg.

    <div class="col col-lg-2">
      1 of 3
    </div>

Breakpoint 是指获取的不同时候的浏览器（or 手机端）的media的分辨率，从而处理app的layout。处于某个临界点的时候，layout会自动改变自己的render样式。

是以表格为主的页面中，非常重要的部分。

默认值是：

 也可以自己设定min-width 和max-width （Sass）【这里待后续研究】

在使用breakpoint的时候，手机端也需要考虑手机的分辨率状态。