1.3 下载与安装及定制

Bulma css框架下载安装使用及按需定制

一、文件下载

如果是下载的是源码版本,

根目录文件为配置文件

sass目录下为定制源码

css目录下为官方生成文件。

其中bulma.min.css与bulma.css文件内容一样,前者为压缩版本,可以直接使用,后者未压缩,适合查看一下代码,看看里面的每个元素是如何定义的。

Bulma源码下载

https://545c.com/f/930370-489515403-74426b 

(访问密码:3153)

bulma.css: https://545c.com/f/930370-489515400-47373e   (访问密码:3153)

bulma.min.css: https://545c.com/f/930370-489515401-442ea8   (访问密码:3153)

你可以根据需要下载。

二、关于定制

Bulma css框架提供源码下载,支持定制

不过对大多数朋友来说,直接用css文件更方便,css的完全版本只有一个文件

而且官方升级后直接替换。

如果默认的官方生成版本不满足你的需要建议你直接通过自己的css文件进行重定义,而不是定制bulma源码。

三、使用

1、文件引用

直接把bulma.min.css文件放在你的网站目录,例如css目录下,在网页中引用即可

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

在css中直接引用

 @import "bulma.min.css"

也可以直接引用网络版的

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
@import "https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css"

2、网页中使用

网页中使用很简单,直接在html中添加一个css类属性即可

如按钮

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


彩色的按钮组如下



<div class="buttons"> 
<button class="button is-info">Info</button>     
<button class="button is-success">Success</button>     
<button class="button is-warning">Warning</button>     
<button class="button is-danger">Danger</button>   
</div>

你看,是不是非常简单?


返回头部

问题反馈
返回顶部