腾讯云主机上测试BootStrap4编译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

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

准备工作

首先下载BootStrap V4。

Bootstrap V4

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

BootStrap

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

gulp

开始抽取

下载之后打开Bootstrap源代码文件夹,找到scss目录,可以看到如下的结构,在这里我用IDE打开更直观。

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.
Open the _variables.scss file and find the $enable-flex variable.
Change it from false to true.
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

$enable-flex: true;

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

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

@import "variables";
@import "breakpoints";

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

@import "flex";

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

// 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样式的。我们必须也要把它引入进来。

找找,发现了三个相关文件,拷贝过来,引入。

@import "mixins/grid";
@import "mixins/grid-framework";
@import "grid";

嗯,这下应该全了。

编译代码

官方用的是grunt自动化工具,然而我用着并不习惯。在这里我们用到gulp来编译。

首先npm init 初始化一个 package.json

引入一些包

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

整体如下:

{
  "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"
  }
}

执行

npm install

安装一下 node_modules。

然后生成一个.babelrc文件,因为我们要用es2015的语法,内容。

{
  "presets": [
    "es2015"
  ]
}

gulpfile:

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');
});

最后执行下gulp

[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

这样就编译好了

测试

恩接下来我们来测试一下官方实例是否正常。

新建一个index.html内容如下

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

结果如下:

恩,完美!

至于这个布局的用法,那就去官方文档领悟吧,和之前的bootstrap栅格化布局有比较大的不同。

不过如果你看了实例之后,就会豁然开朗了。

代码

本用例代码已上传到 GitHub。

BootStrapFlex

有兴趣的小伙伴可以下载测试。

相关推荐 如何在腾讯云上搭建一个人力资源Saas 腾讯云主机Python3环境安装PySpider爬虫框架过程

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏卡少编程之旅

新主题博客诞生之路

3369
来自专栏Windows Community

About Windows 10 SDK Preview Build 17110

在 Windows Developer Day 活动同时,微软正式 Release 了 Windows 10 SDK Preview Build 17110。 ...

3294
来自专栏小巫技术博客

React Native 音频录制例子来解惑入门

1133
来自专栏Jackson0714

用MVVM做了一个保存网页的工具-上篇

34610
来自专栏用户2442861的专栏

Chrome开发者工具不完全指南(二、进阶篇)

上篇向大家介绍完了基础功能篇,这次分享的是Chrome开发工具中最有用的面板Sources。  Sources面板几乎是我最常用到的Chrome功能面板,也是...

591
来自专栏hotqin888的专栏

HydromCMS增加封面、完善自定义目录功能、目录结构的修改功能

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

862
来自专栏张戈的专栏

SEO分享:让百度删除不想收录的域名或快照的最快方法

个别网站可能会出现以下类似困扰: ①、百度收录了自己不想收录的域名,造成内容重复,比如张戈博客,百度近一半的收录是 www 的域名,而且收录的内容还是重复的!实...

4787
来自专栏ytkah

微信也有修复功能 只是你不知道而已【微信高级教程1】

  如果你用的是苹果版微信,那么恭喜你,当微信使用久后出现故障或者异常,比如聊天记录混乱、通讯录丢失等,可以一键修复了。怎么操作呢?输入一个指令就可以实现。  ...

2768
来自专栏前端人人

React多页面应用5(webpack4 多页面自动化生成多入口文件)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建...

6573
来自专栏IT技术精选文摘

Java虚拟机知识思维导图总览

整个知识框架分内存模型,内存管理,类文件结构和高效并发四部分,若手机阅读效果不佳,可点击文中图片放大或本存到手机本地查看,也可点击手机右上角的菜单选择“复制链接...

1967

扫码关注云+社区