Flexbox能干什么,Bootstrap的网格系统

研究起前端技术来发现无边无际,页面布局、css样式、动画,各式各样,浏览器兼容不统一,代码又需要统一考虑,简直费心又非脑。

作为从IE6/7/8过来的人,根本不知道Flexbox是个啥,那时候根本也不区分前端开发,后端开发,全部一个人来。使用jquery操作dom,也很开心。现在由于工作需要研究起了前端技术,发现和之前完全是两码事了,html5、css3、ES6等新标准,vue,react等新的js库,还有babel,js需要转译才能运行了,webpack还可以打包应用,我的天!这都是些啥?而且用jquery似乎还会被鄙视。

村里刚通网,见笑。经过研究发现,现在的前端使用新的标准,新的语言,新的架构,有一整套规范。并且有一个完整的生态圈,这使得当前开发更加的规范,简单,页面(或者说应用更加准确)更加健壮,完全不是之前的html画页面了。

Flexbox

对于我的理解来说,这就是一个布局神器,它可以灵活的分配页面空间。提供了行/列的概念。使我们的页面元素可以像填空一样填到指定的列里面就行了。
并且其还提供了丰富的对齐功能,尤其是垂直居中,这个我记得在之前是很难实现的,甚至还要辅助js来实现。

Bootstrap

Bootstrap的网格系统基于flex,使用.container.row.col基本就可满足大部分网页或系统的布局了,同时它还提供了移动端优先的响应式布局,使应用在不同屏幕大小的设备上面都有一个较好的体验。

查看bootstrap.css发现其代码并不复杂,使用display:flex实现flex布局,使用@media实现响应式。
.container

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  width: 100%;
  padding-right: 15px;//右填充
  padding-left: 15px;//左填充
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container, .container-sm {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container, .container-sm, .container-md {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container, .container-sm, .container-md, .container-lg {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px;
  }
}

.row

.row {
  display: -ms-flexbox;//兼容IE
  display: flex;
  -ms-flex-wrap: wrap;//兼容IE
  flex-wrap: wrap;
  margin-right: -15px;//抵消container的填充
  margin-left: -15px;//
}

.row-cols-*指定每行列数

.row-cols-1 > * {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;//1列全部宽度
}

.row-cols-2 > * {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;//2列每项50%
}

.row-cols-3 > * {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;//3列每项33%
}

.row-cols-4 > * {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;//4列每项25%
}

.row-cols-5 > * {
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}

.row-cols-6 > * {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

col-*由于bootstrap是一个12列的格栅系统,所以每一列的宽度是除12得来的

.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

你可能感兴趣的:(Flexbox能干什么,Bootstrap的网格系统)