Bulma CSS框架教程

Bulma CSS – 简介

Bulma CSS – 开始

Bulma CSS – CSS类

Bulma CSS – 模块化

Bulma CSS – 响应式

有数种方法可以安装Bulma：

  1. 使用npm安装Bulma包
  2. 使用cdnjs CDN链接到Bulma样式表
  3. 从GitHub项目库获得最新的开发版本

1. 使用npm安装Bulma包

npm install bulma

2. 使用cdnjs CDN

https://cdnjs.com/libraries/bulma

3. 从GitHub项目库下载

https://github.com/jgthms/bulma/tree/master/css

Font Awesome 字体图标

如果想使用图标，可加上Font Awesome 字体图标库：

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

规范要求

Bulma能正常工作需要把网页设置为支持响应式。

1. 使用HTML5 doctype

<!DOCTYPE html>

2. 添加支持响应式的viewport元标记

<meta name="viewport" content="width=device-width, initial-scale=1">

起始模板

可以使用下面的模板作为写网页的起始模板：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Hello Bulma!</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">

    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

  </head>

  <body>

  <section class="section">

    <div class="container">

      <h1 class="title">

        Hello World

      </h1>

      <p class="subtitle">

        My first website with <strong>Bulma</strong>!

      </p>

    </div>

  </section>

  </body>

</html>

Bulma-start

如果习惯使用npm，可以使用Bulma-start。

Bulma-start是一个很小的npm包，包含了使用Bulma开发网站的全部依赖项。

Bulma-start 安装

npm install bulma-start

或者

yarn add bulma-start

详情可参考项目网址

Bulma CSS - 开始的更多相关文章

  1. Bulma CSS - 响应式

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...

  2. Bulma CSS - 模块化

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma框架 ...

  3. Bulma CSS - CSS类

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...

  4. Bulma CSS - 简介

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是什 ...

  5. Bulma CSS框架教程

    Bulma是一个轻量级的现代CSS框架,基于flex,跟bootstrap不一样纯CSS没有JS,与vuejs.reactjs这样JavaScript框架可以很好地集成. 为降低学习难度,让初学者可以 ...

  6. 在单文件组件中，引入安装模块里的css的2种方式：script中引入、style中引入

    在单文件组件中,引入安装模块里的css的2种方式:script中引入.style中引入 1.script中引入 <script> import 'bulma/css/bulma.css' ...

  7. 使用Webpack对Css文件压缩处理的思考

    问题的起因: 使用 bulma.css ,通过webpack打包后样式出错,查看压缩代码,发现代码从css的 long hand 属性被压缩为 short hand(PS: 什么是long hand ...

  8. Bulma 源码结构

    源码基于 Bulma 0.4.0 版本. 一.入口文件 bulma.sass bulma.sass 是 Bulma 使用 SASS 编译的入口文件. sass bulma.sass css/bulma ...

  9. React多页面应用脚手架-v1.3.0

    react-multi-page-app是一个基于react和webpack的多页面应用架构,通过编译生成对应目录结构清晰的静态页面,实现多页面便捷开发维护.1.3.0 版本对项目整体做了一个全面的升 ...

随机推荐

  1. leetcode LRU缓存机制（list+unordered_map）详细解析

    运用你所掌握的数据结构,设计和实现一个  LRU (最近最少使用) 缓存机制.它应该支持以下操作: 获取数据 get 和 写入数据 put . 获取数据 get(key) - 如果密钥 (key) 存 ...

  2. VS2008 error PRJ0002 : 错误的结果 31 (从“C:\Program Files\Microsoft SDKs\Windows\v6.0A\bin\rc.exe”返回)。

    解决方案,选择属性->配置属性->清单工具->输入和输出->嵌入清单,把是改成否

  3. 十三、web应用中路径总结

    1.路径的编写形式:1)<a href="/项目名/资源路径"></a>    <!--超链接--> <form action=" ...

  4. lambda表达式和for_each，find_if

    1 lambda表达式可以允许我传递任意可调用对象,必须要有捕获列表和函数体,标准形式是[捕获列表] (参数列表)->return tpye{函数体} 谓词:一元谓词指的是只能接受一个传入参数, ...

  5. wdcp升级php5.8到php7.1.12后安装gitlab

    .安装依赖包 sudo yum install -y curl policycoreutils-python openssh-server cronie .使用清华大学开源软件镜像源安装 vim /e ...

  6. 前端学习笔记系列一：8 <noscript>…</noscript>，网站路径，vscode跳出右括号

    1.<noscript>…</noscript> 在body中使用此段代码,可识别 <script> 标签但无法支持其中的脚本的浏览器. 此段代码意思为如果浏览器不 ...

  7. array_multisort 对关联数组进行排序的问题 PHP

    我们在php的数组操作中经常用到对数组进行排序的问题,这里说的是对关联数组进行排序需要用到函数 array_multisort . array_multisort(array_column($arr, ...

  8. 留学Essay写作：精准用词很重要

    很多觉得自己英语成绩还行的同学经常在自己的文章里用一些浮夸或者是难度特别大的词语,以显示自己的英语水平.当然了,成功了倒也无可厚非,要是有些词语用错了那可是会被别人笑掉大牙的.因此英语中的精准用词就成 ...

  9. JS实现全选，取消全选，正常选择

    //点击选择方法 onUserIdsChange(selVal) { if (this.form.groupUserIds.includes(-1) && !this.isSelect ...

  10. 将证书添加到受信任的根证书存储失败，出现以下错误：访问控制列表（ACL）结构无效

    问题出现情景: 使用 vs2017 创建一个 ASP.NET Core Web 应用程序 -> Ctrl + F5 运行项目 选择是,但是添加证书失败,是什么原因导致的我不知道,有大佬的知道的话 ...