工作日记

BootStrap4提取并编译Flexbox Grid系统

admin2019-12-23 16:02 2342人已围观

简介前言 首先Flexbox是什么？它是Bootstrap4新出的一个布局格式，对移动端开发非常方便。 说一下我为什么要提取Flexbox。有需求才有动力，首先是需

前言

首先Flexbox是什么？它是Bootstrap4新出的一个布局格式，对移动端开发非常方便。

说一下我为什么要提取Flexbox。有需求才有动力，首先是需求，最近在开发一个移动端适配的网站，使用了materi-ui框架，基于React。使用materi-ui时，已经内置了许多样式，但是bootstrap的一些多余样式会影响一些现有样式，而那些样式对我又没啥用。另外Flex对于移动端布局开发非常适合，这次正好也拿来练练手。

移动端开发是趋势，随着移动端的发展，BootStrap也出了新版本4，不过现在还是alpha版本，还没正式推出。

其中一个比较大的改进便是Flexbox Grid系统。

BootStrap原本最常用的布局栅格化系统在做响应式开发的时候比较方便，但是只针对于移动端开发的时候并没有多大用处了，流行的Flex布局应用越来越广泛。

在Founation中，看到过有了这种Flex布局，它就是适应手机开发的框架。后来Bootstrap4也增加了这块。

那么Flexbox Grid系统相比之前什么改进呢？请看官方文档实例。

Flexbox Grid

P.S 别去上什么中文网，全是错误，实例结果有问题。不想吐槽，一开始我还以为是Flexbox Grid设计不科学。

准备工作

首先下载BootStrap V4。

Bootstrap V4

目前最新版还是alpha版本，如链接失效，请移步官网。

BootStrap

然后你需要安装了node，gulp，自行下载即可。

gulp

开始抽取

下载之后打开Bootstrap源代码文件夹，找到scss目录，可以看到如下的结构。

QQ20161029-0@2x

mixins是一些可调用的组件，本身编译不会产生任何结果。utilities是一些公用的包，比如我们要抽取的Flex就在这里面。

外面的这么多是一些公用的基本组件。

通过官方文档可以发现：

If you’re familiar with modifying variables in Sass—or any other CSS preprocessor—you’ll be right at home to move into flexbox mode.

  1. Open the _variables.scss file and find the $enable-flex variable.

  2. Change it from false to true.

  3. Recompile, and done!

Alternatively, if you don’t need the source Sass files, you may swap the default Bootstrap compiled CSS with the compiled flexbox variation. Head to the download page for more information.

如果我们想要添加Flex组件，还需要将这个变量更改，即将$enable-flex改成true才可以，默认是false。

在源代码中我们可以发现已经有了一个bootstrap-flex.scss的文件，然而这里面发现直接引入了bootstrap的所有代码，这并不是我们想要的，它可能会复写一些基本样式，会影响我们的工程。我们想要的是单独把Flex部分抽离出来。

所以我们自己新建一个 bootstrap-flex.scss的空文件。

首先将变量改为true

1

$enable-flex: true;

然后阅读源码可以发现有两个公用的scss文件是必须引入的。

variables和breakpoints，我们先将他们引入。

1

2

@import "variables";

@import "breakpoints";

然后观察带有flex的代码，只发现了在utilities文件夹中有相关内容，跑不了了，那就是它，复制到同一路径，引入一下。

1

@import "flex";

不过发现这个文件里的样式颇少，内容如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

// Flex variation

//

// Custom styles for additional flex alignment options.

 

@if $enable-flex {

  @each $breakpoint in map-keys($grid-breakpoints) {

    // Flex column reordering

    @include media-breakpoint-up($breakpoint) {

      .flex-#{$breakpoint}-first { order: -1; }

      .flex-#{$breakpoint}-last { order: 1; }

      .flex-#{$breakpoint}-unordered { order: 0; }

    }

 

    // Alignment for every item

    @include media-breakpoint-up($breakpoint) {

      .flex-items-#{$breakpoint}-top { align-items: flex-start; }

      .flex-items-#{$breakpoint}-middle { align-items: center; }

      .flex-items-#{$breakpoint}-bottom { align-items: flex-end; }

    }

 

    // Alignment per item

    @include media-breakpoint-up($breakpoint) {

      .flex-#{$breakpoint}-top   { align-self: flex-start; }

      .flex-#{$breakpoint}-middle { align-self: center; }

      .flex-#{$breakpoint}-bottom { align-self: flex-end; }

    }

 

    // Horizontal alignment of item

    @include media-breakpoint-up($breakpoint) {

      
  • 微信公众号

很赞哦！(0)

上一篇：利用Sass自动生成padding和margin边距样式

下一篇：人生数10载，你已度过几个10年？

相关文章

文章评论


评论0

    站点信息

    • 微信公众号：扫描二维码，关注我们

    点击排行

    三种 PS 的套索工具使用小技巧

    本栏推荐

    信达证券：化工行业周报：三氯蔗糖、安赛蜜等价格上扬

    标签云

    猜你喜欢