什么是css Bulma框架?

Bulma是一个基于Flexbox的现代化的CSS框架,设计的初衷就是为了移动优先,模块化设计,可以轻松用来实现各种简单或者复制的内容布局。

Bulma是一个基于Flexbox布局模型的免费开源项目。该CSS框架也是轻量级、响应式的,并且具备移动优先的理念。对开发人员而言,Bulma和Bootstrap以及Foundation可以一起并列为三大最受欢迎的CSS框架,目前全球已经有超过15万名开发人员在使用Bulma。

Bulma之所以广受欢迎的原因还有其高度可读的命名规则,这对于新手开发人员来讲,会大大降低学习成本。还有一个比较有意思的点,Bulma在Github上可以说是明星选手般的存在,人气超高。

1.jpg

Bulma 框架最大的特点,就是简单好用。所有样式都基于class,只需为 HTML 元素指定class,样式立刻生效。

<a class="button is-primary is-large">Login</a>

上面代码中,a 元素只需加上几个class,就会出现一个主色调(is-primary)的大(is-large)按钮。

1.png

Bulma 是一个手机优先的框架,提供五个宽度断点,具有良好的自适应特性,可以随心所欲为不同设备设置不同样式。

  • mobile:小于等于768px

  • tablet:大于等于769px

  • desktop:大于等于1024px

  • widescreen:大于等于1216px

  • fullhd:大于等于1408px

2.png

它提供二十多种常用组件,比如表单 、表格、图标、面包屑、菜单、导航、Modal 窗口等等。简单的网站,可以不用写任何 CSS 代码。

基本用法

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

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

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

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

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

3.png

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>

4.png

Bulma 默认提供6种颜色。

  • is-primary

  • is-link

  • is-info

  • is-success

  • is-warning

  • is-danger

按钮状态的修饰类如下。

  • is-hovered

  • is-focused

  • is-active

  • is-loading

完整的修饰类清单请看官方文档(https://bulma.io/documentation/elements/button/)。

更多CSS的相关知识,可访问:web前端自学!!

以上就是什么是css Bulma框架?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

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

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏