• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

Bulma 框架教程

CSS3 web前端中文站 2年前 (2017-10-24) 3098次浏览 已收录 0个评论

今天主要将介绍它 Bulma 的基本用法。前面介绍BULMA 框架网格体系(原理),相信大家对Bulma有一定了解了。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

网页样式需要大量时间开发,最省事的方法就是使用 CSS 框架。而 Bulma 就是一款这样的框架

Bulma 框架教程

Bulma 的安装只需一步,把样式表插入网页即可。

 <link rel="stylesheet" href="css/bulma.min.css"/>

使用更简单,就是为 HTML 元素加上 class。

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

上面的代码为 a 元素加上 button 类,这个链接就会被渲染成按钮。

Bulma 提供大量的修饰类,用来改变基类的样式。它们都是以 is-或 has-开头。比如,要改变 Button 的大小,就可以使用下面的修饰类。

 <a class="button is-small">Small</a> 
 <a class="button">Normal</a> 
 <a class="button is-medium">Medium</a> 
 <a class="button is-large">Large</a>

Bulma 框架教程

Bulma 默认提供 6 种颜色。

  • is-primary
  • is-link
  • is-info
  • is-success
  • is-warning
  • is-danger

 

按钮状态的修饰类如下。

  • is-hovered
  • is-focused
  • is-active
  • is-loading

完整的修饰类清单请看官方文档。

在接下来的文章,我们将会继续学习Bulma,主要包括BULMA 文字、颜色、字体,以及Bulma 响应式布局,直至运用Bulma进行定制开发

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Bulma 框架教程
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址