文档章节

Bulma 概览

lemos
 lemos
发布于 2017/07/14 11:58
字数 350
阅读 82
收藏 0

bulma 官网

css文件

npm install bulma

图标使用 font-awesome

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

 

Modular (模块化)

columns

@import "bulma/sass/utilities/_all"
@import "bulma/sass/grid/columns"

可以使用

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>

buttons 

@import "bulma/sass/utilities/_all"
@import "bulma/sass/elements/button.sass"

可以使用 

<a class="button">
  Button
</a>

<a class="button is-primary">
  Primary button
</a>

<a class="button is-large">
  Large button
</a>

<a class="button is-loading">
  Loading button
</a>

 

Responsiveness (响应式)

原文

可以使用 =mobile 到 768px、=tablet 从 769px;或者 =touch 到 999px、=desktop 从 1000px

 

Functions (函数)

颜色取反函数,findColorInvert($color)。

 

Variables (变量)

原文

 

Mixins (工具)

自定义元素或者响应式的 css工具

=arrow($color) Creates a CSS-only down arrow. Used for the dropdown select.
=block Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.
=clearfix Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.
=center($size) Positions an element in the exact center of its parent. Used for the spinner in a loading button.
=delete Creates a CSS-only cross. Used for the delete element in modals, messages, tags...
=fa($size, $dimensions) Sets the style of a Font Awesome icon container.
=hamburger($dimensions) Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".
=loader Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.
=overflow-touch Sets the style of a container so that it keeps momentum when scrolling on iOS devices.
=overlay($offset: 0) Makes the element overlay its parent container, like the transparent modal background.
=placeholder Sets the styles of an input placeholder.
=unselectable Turns the element unselectable. Used for buttons to prevent selection when clicking.

© 著作权归作者所有

下一篇: goland 快捷键
lemos
粉丝 10
博文 208
码字总数 99924
作品 0
芜湖
后端工程师
私信 提问
Bulma-基于 Flexbox 的现代化的 CSS 框架

我的个人网站是基于 PHP 框架 Laravel 和 CSS 框架 Bulma 开发的,从认识 Bulma 以后我就非常喜欢它了,一直使用,现在推荐出来给大家,希望能为您开发网页样式节省一些时间 我为什么选择 Bu...

sevdot
2018/08/21
0
0
基于 Bulma 和 Vue.js 的轻量级 UI 组件 - Buefy

Buefy 基于 Bulma 和 Vue.js 的轻量级UI组件,它提供了即装即用的轻量级组件。 特征 使得你目前的 Bulma 主题/变量很简单 支持材质设计图标和 FontAwesome 除了 Vue&Bulma 以外,没有任何内...

匿名
2017/12/15
1K
0
Bulma 0.5.3 发布,基于 Flexbox 的现代 CSS 框架

Bulma 0.5.3 已发布,Bulma 是一款基于 Flexbox 的现代 CSS 框架。有以下特性: 响应式,Bulma 是一个优先考虑移动版的框架 模块化,只需导入你需要的 现代化,基于 Flexbox 更新内容: 新特...

王练
2017/09/20
927
4
CSS 框架 Bulma 教程

网页样式需要大量时间开发,最省事的方法就是使用 CSS 框架。 Bootstrap 是最著名的 CSS 框架,但是今天我想推荐另一个更轻量化、更易用的框架----Bulma。有了它,即使完全不懂 CSS,也可以轻...

阮一峰
2017/10/24
0
0
Bulma 0.6.1 发布,基于 Flexbox 的现代 CSS 框架

Bulma 0.6.1 已发布,Bulma 是一款基于 Flexbox 的现代 CSS 框架。有以下特性: 响应式,Bulma 是一个移动优先的框架 模块化,只需导入你需要的 现代化,基于 Flexbox 该版本带来以下新特性:...

王练
2017/11/12
596
0

没有更多内容

加载失败,请刷新页面

加载更多

Mybatis Plus删除

/** @author beth @data 2019-10-17 00:30 */ @RunWith(SpringRunner.class) @SpringBootTest public class DeleteTest { @Autowired private UserInfoMapper userInfoMapper; /** 根据id删除......

一个yuanbeth
39分钟前
4
0
总结

一、设计模式 简单工厂:一个简单而且比较杂的工厂,可以创建任何对象给你 复杂工厂:先创建一种基础类型的工厂接口,然后各自集成实现这个接口,但是每个工厂都是这个基础类的扩展分类,spr...

BobwithB
今天
4
0
java内存模型

前言 Java作为一种面向对象的,跨平台语言,其对象、内存等一直是比较难的知识点。而且很多概念的名称看起来又那么相似,很多人会傻傻分不清楚。比如本文我们要讨论的JVM内存结构、Java内存模...

ls_cherish
今天
4
0
友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
5
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部