BootStrap4 提取并编译 Flexbox Grid 系统

举报
崔庆才丨静觅 发表于 2021/05/22 01:18:17 2021/05/22
【摘要】 前言 首先 Flexbox 是什么？它是 Bootstrap4 新出的一个布局格式，对移动端开发非常方便。 说一下我为什么要提取 Flexbox。有需求才有动力，首先是需求，最近在开发一个移动端适配的网站，使用了 materi-ui 框架，基于 React。使用 materi-ui 时，已经内置了许多样式，但是 bootstrap 的一些多余样式会影响一些现有样式，而那些样...

前言

首先 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) {
 .flex-items-#{$breakpoint}-left { justify-content: flex-start; }
 .flex-items-#{$breakpoint}-center { justify-content: center; }
 .flex-items-#{$breakpoint}-right { justify-content: flex-end; }
 .flex-items-#{$breakpoint}-around { justify-content: space-around; }
 .flex-items-#{$breakpoint}-between { justify-content: space-between; }
 }
  }
}

这才多点啊？看官方实例明明用到了 row，col 这些样式好不好。再看看。 于是乎发现这些实际上也是依赖于原始的 grid 样式的。我们必须也要把它引入进来。 找找，发现了三个相关文件，拷贝过来，引入。

1
2
3
 
@import "mixins/grid";
@import "mixins/grid-framework";
@import "grid";

嗯，这下应该全了。 结构如下所示 QQ20161029-1@2x

编译代码

官方用的是 grunt 自动化工具，然而我用着并不习惯。在这里我们用到 gulp 来编译。 首先 npm init 初始化一个 package.json 引入一些包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
"devDependencies": {
  "babel-core": "^6.3.26",
  "babel-preset-es2015": "^6.16.0",
  "babel-register": "^6.18.0",
  "del": "^2.2.2",
  "gulp": "^3.9.1",
  "gulp-autoprefixer": "^3.1.1",
  "gulp-babel": "^6.1.2",
  "gulp-plumber": "^1.1.0",
  "gulp-postcss": "^6.2.0",
  "gulp-sass": "^2.3.2",
  "gulp-sourcemaps": "^2.2.0",
  "postcss-scss": "^0.3.1"
}

整体的结构如下

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
 
{
  "name": "bootstrap-flex",
  "version": "1.0.0",
  "description": "BootStrap Flex",
  "main": "gulpfile.babel.js",
  "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Germey",
  "license": "MIT",
  "devDependencies": {
 "babel-core": "^6.3.26",
 "babel-preset-es2015": "^6.16.0",
 "babel-register": "^6.18.0",
 "del": "^2.2.2",
 "gulp": "^3.9.1",
 "gulp-autoprefixer": "^3.1.1",
 "gulp-babel": "^6.1.2",
 "gulp-plumber": "^1.1.0",
 "gulp-postcss": "^6.2.0",
 "gulp-sass": "^2.3.2",
 "gulp-sourcemaps": "^2.2.0",
 "postcss-scss": "^0.3.1"
  }
}

执行

1
 
npm install

安装一下 node_modules。 然后生成一个.babelrc 文件，因为我们要用 es2015 的语法，内容。

1
2
3
4
5
 
{
  "presets": [
 "es2015"
  ]
}

然后写一下 gulpfile.babel.js

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
 
import gulp from 'gulp';
import plumber from 'gulp-plumber';
import sass from 'gulp-sass';
import sourcemaps from 'gulp-sourcemaps';
import del from 'del';
import autoprefixer from 'gulp-autoprefixer';
const source = ['sass/**/*.scss'];
const dest = 'dist/css/';

gulp.task('sass', () => {
 return gulp.src(source)
 .pipe(plumber())
 .pipe(sourcemaps.init())
 .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
 .pipe(sourcemaps.write())
 .pipe(autoprefixer({
 browsers: ['last 2 versions'],
 cascade: true,
 remove: true
 }))
 .pipe(gulp.dest(dest));
});

gulp.task('clean', del.bind(null, ['dist']));

gulp.task('build', ['sass', 'watch'])

gulp.task('watch', () => {
 gulp.watch(source, ['sass']);
});

gulp.task('default', ['clean'], () => {
 gulp.start('build');
});

比较简单，用到的有 sass, sourcemaps, autoprefixer 这几个比较常用的包。 执行

1
 
gulp

观察下结果。

1
2
3
4
5
6
7
8
9
10
11
12
 
[18:46:38] Requiring external module babel-register
[18:46:38] Using gulpfile /private/var/www/flex/gulpfile.babel.js
[18:46:38] Starting 'clean'...
[18:46:38] Finished 'clean' after 8.12 ms
[18:46:38] Starting 'default'...
[18:46:38] Starting 'sass'...
[18:46:38] Starting 'watch'...
[18:46:38] Finished 'watch' after 9.63 ms
[18:46:38] Finished 'default' after 25 ms
[18:46:39] Finished 'sass' after 312 ms
[18:46:39] Starting 'build'...
[18:46:39] Finished 'build' after 2.41 μs

恩，没什么问题。可以看到 dist 文件夹下生成了一个文件叫做 bootstrap-flex.css。

测试用例

恩接下来我们来测试一下官方实例是否正常。 新建一个 index.html 内容如下

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
 
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" href="dist/css/bootstrap-flex.css">
</head>
<body>
<div class="container">
 <div class="row">
 <div class="col-xs">
 1 of 2
 </div>
 <div class="col-xs">
 1 of 2
 </div>
 </div>
 <div class="row">
 <div class="col-xs">
 1 of 3
 </div>
 <div class="col-xs">
 1 of 3
 </div>
 <div class="col-xs">
 1 of 3
 </div>
 </div>

</div>
<div class="container">
 <div class="row">
 <div class="col-xs">
 1 of 3
 </div>
 <div class="col-xs-6">
 2 of 3 (wider)
 </div>
 <div class="col-xs">
 3 of 3
 </div>
 </div>
 <div class="row">
 <div class="col-xs">
 1 of 3
 </div>
 <div class="col-xs-5">
 2 of 3 (wider)
 </div>
 <div class="col-xs">
 3 of 3
 </div>
 </div>
</div>
<div class="container">
 <div class="row">
 <div class="col-xs">
 1 of 3
 </div>
 <div class="col-xs-6">
 2 of 3 (wider)
 </div>
 <div class="col-xs">
 3 of 3
 </div>
 </div>
 <div class="row">
 <div class="col-xs">
 1 of 3
 </div>
 <div class="col-xs-5">
 2 of 3 (wider)
 </div>
 <div class="col-xs">
 3 of 3
 </div>
 </div>
</div>
<div class="container">
 <div class="row flex-items-xs-top">
 <div class="col-xs">
 One of three columns
 </div>
 <div class="col-xs">
 One of three columns
 </div>
 <div class="col-xs">
 One of three columns
 </div>
 </div>
 <div class="row flex-items-xs-middle">
 <div class="col-xs">
 One of three columns
 </div>
 <div class="col-xs">
 One of three columns
 </div>
 <div class="col-xs">
 One of three columns
 </div>
 </div>
 <div class="row flex-items-xs-bottom">
 <div class="col-xs">
 One of three columns
 </div>
 <div class="col-xs">
 One of three columns
 </div>
 <div class="col-xs">
 One of three columns
 </div>
 </div>
</div>
<div class="container">
 <div class="row flex-items-xs-left">
 <div class="col-xs-4">
 One of two columns
 </div>
 <div class="col-xs-4">
 One of two columns
 </div>
 </div>
 <div class="row flex-items-xs-center">
 <div class="col-xs-4">
 One of two columns
 </div>
 <div class="col-xs-4">
 One of two columns
 </div>
 </div>
 <div class="row flex-items-xs-right">
 <div class="col-xs-4">
 One of two columns
 </div>
 <div class="col-xs-4">
 One of two columns
 </div>
 </div>
 <div class="row flex-items-xs-around">
 <div class="col-xs-4">
 One of two columns
 </div>
 <div class="col-xs-4">
 One of two columns
 </div>
 </div>
 <div class="row flex-items-xs-between">
 <div class="col-xs-4">
 One of two columns
 </div>
 <div class="col-xs-4">
 One of two columns
 </div>
 </div>
</div>
<div class="container">
 <div class="row">
 <div class="col-xs flex-xs-unordered">
 First, but unordered
 </div>
 <div class="col-xs flex-xs-last">
 Second, but last
 </div>
 <div class="col-xs flex-xs-first">
 Third, but first
 </div>
 </div>
</div>
<style>
 .row {
 margin-top: 1rem;
 }
 .row > [class^="col-"] {
 padding-top: .75rem;
 padding-bottom: .75rem;
 background-color: rgba(86, 61, 124, 0.15);
 border: 1px solid rgba(86, 61, 124, 0.2);
 }
 .flex-items-xs-top, .flex-items-xs-middle,.flex-items-xs-bottom {
 min-height: 6rem;
 background-color: rgba(255, 0, 0, 0.1);
 }
</style>

</body>
</html>

我把官方实例拿过来测试一下。 结果如下所示 QQ20161029-0 恩，完美！ 至于这个布局的用法，那就去官方文档领悟吧，和之前的 bootstrap 栅格化布局有比较大的不同。 不过如果你看了实例之后，就会豁然开朗了。

代码

本用例代码已上传到 GitHub。 代码实例 有兴趣的小伙伴可以下载测试。

结语

本文讲解了利用抽取 Bootstrap V4 中的 Flex 布局方式以及用 gulp 重新编译 Bootstrap 的过程，希望对大家有帮助。

文章来源: cuiqingcai.com，作者：崔庆才，版权归原作者所有，如需转载，请联系作者。

原文链接：cuiqingcai.com/3253.html

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Bootstrap
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入