网页样式需要大量时间开发，最省事的方法就是使用 CSS 框架。 Bootstrap 是最著名的 CSS 框架，但是今天我想推荐另一个更轻量化、更易用的框架——Bulma 。有了它，即使完全不懂 CSS，也可以轻而易举做出美观的网页。 我要感谢 100offer 对我提供赞助。100offer 是国内第一流的人力资源网站，本文结尾有他们的简介 ...

六、定制 六、定制 最后这个部分是高级内容，讲解如何定制 Bulma，也就是修改默认样式。Bulma 采用 Sass 语法（注意，不是 Scss 语法），所以定制的样式也必须使用 SASS 。 首先，克隆或下载 源码。 $ git clone https : //github.com/jgthms/bulma.git 然后，安装依...

CSS 框架的使用 使用案例 例子 CSS 框架的使用 虽然这可能看起来并不明智，但我建议你使用 style-loader 将第三方 CSS 库导入 webpack，其实这一点我们已经为你做了。 使用案例 假设你要为你的程序使用 bootstrap 、bulma 或者 materialize 。你可以仍旧像通常情况下一样，从 npm ...

二、基本用法 二、基本用法 Bulma 的安装只需一步，把样式表 插入网页即可。 <link rel = "stylesheet" href = "css/bulma.min.css" /> 使用更简单，就是为 HTML 元素加上class 。 <a class = "button" > Button </a> ...

一、简介 一、简介 Bulma 框架最大的特点，就是简单好用。所有样式都基于class ，只需为 HTML 元素指定class ，样式立刻生效。 <a class = "button is-primary is-large" > Login </a> 上面代码中，a 元素只需加上几个class ，就会出现一个主色调（is-pri...

前端框架 渐进式框架 - Vue.js 快速上手 使用脚手架 - vue-cli UI框架 - Element 报表框架 - ECharts 基于弹性盒子的CSS框架 - Bulma 响应式布局框架 - Bootstrap 前端框架 渐进式框架 - Vue.js 前后端分离开发（前端渲染）必选框架。 快速上手 ...

三、网格体系 三、网格体系 Bulma 的网格体系基于 Flex 布局 ，写起来非常容易。最简单的用法就是使用columns 指定容器，使用column 指定项目。 <div class = "columns" > <div class = "column" > First column </div> <div...

The css Property The css Property Nuxt.js lets you define the CSS files/modules/libraries you want to set globally (included in every page). In case you want to use sass m...

四、响应式布局 四、响应式布局 前面说过，Bulma 有五个宽度断点，分别是 mobile（手机）、tablet（平板）、desktop（桌面）、widescreen（宽屏）、fullHD（高清）。 columns 布局默认是在手机上垂直堆叠，其他宽度都是平铺。如果希望手机也保持平铺，可以加上is-mobile 修饰类。 <div cl...