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. 如何发布composer包

    1. 首先要有github仓库(其中必须要有 composer.json 配置文件) 2.关联 github 项目 提交成功 3.设置钩子以便同步更新 https://packagist.org/ab ...

  2. 5G风口之下，NFV为何发展迅速

    导读 5G高带宽.低时延.大容量的接入方式,注定它一定要依赖于跟以往完全不同的专业设备模式来实现,因此也创造了更多的方向和机会.NFV就是其中之一. 5G最大的变化在网络层面,需要底层网络架构形成一种 ...

  3. luogu P3358 最长k可重区间集问题

    网络流建图好难,这题居然是网络流(雾,一般分析来说,有限制的情况最大流情况可以拆点通过capacity来限制,比如只使用一次,把一个点拆成入点出点,capacity为1即可,这题是限制最大k重复,可以 ...

  4. 「USACO5.4」奶牛的电信Telecowmunication

    传送门 Luogu 解题思路 题目要求的是最小割点集,考虑用最小割来做. 所有边容量为1,直接求最小割? 这样肯定会出错,比如这种情况: 从最左边的点到最右边的点的最小割为2,但是答案是1,只要破坏中 ...

  5. 校园服务APP使用体验

    校园服务APP软件使用体验 一．概况: 校园服务这款软件是针对大学生这一群体量身打造,具有简洁的界面,能让使用者快速上手,不存在第一次使用发懵,发怵等情况,是一款非常实用的功能软件. 二．功能特性: ...

  6. Java读取压缩文件信息

    不解压压缩文件,获取其中包含的文件,通过文件名检查是否包含非法文件.(后续再根据文件头或内容吧) zip: import java.util.zip.ZipEntry;import java.util ...

  7. 六 Hibernate多表操作&级联&外键维护

    Hibernate的一对多关联映射 Hibernate的多对多关联映射 数据库表与表之间的关系:一对多,多对多,一对一 一对多:一个部门对应多个员工,一个员工只能属于一个部门.一个客户对应多个联系人, ...

  8. 使用six库将Python2的项目完全转移到python3

    SIX是用于python2与python3兼容的库. 它存在的目的是为了拥有无需修改即可在Python 2和Python 3上同时工作的代码.话虽这么说,但是这并不代表在Python 3中引用该库就可 ...

  9. Readiness 探测【转】

    除了 Liveness 探测,Kubernetes Health Check 机制还包括 Readiness 探测. 用户通过 Liveness 探测可以告诉 Kubernetes 什么时候通过重启容 ...

  10. 冰蝎动态二进制加密WebShell基于流量侧检测方案

    概述 冰蝎是一款新型动态二进制加密网站工具.目前已经有6个版本.对于webshell的网络流量侧检测,主要有三个思路.一:webshell上传过程中文件还原进行样本分析,检测静态文件是否报毒.二:we ...