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. c# 事件3

    1.什么是事件,使对象或者类具有通知功能的成员.//为了解决字段在外部被滥用,推出了事件 事件的功能能=通知+可选的事件参数(具体的详细信息,包括谁发送了消息,发送的什么消息) 使用:用于对象或者类件 ...

  2. python deepcopy的替代方案

    from copy import deepcopy import marshal import timeit from multidict import CIMultiDict def test_de ...

  3. Linux用户和用户组管理命令

    一.用户管理命令 1.useradd   创建用户或更新默认新用户的信息 使用方法  useradd [options] 用户名 选项: useradd -u           指定UID具体数值, ...

  4. 库克承认iPhone销售不佳是因定价太高，但降价能救苹果吗？

    iPhone定价愈来愈高,已经是不争的事实.但iPhone价格的飙升,其实并不是"正常"的.早在乔布斯时代,iPhone的价格维持在5000元左右.虽然看起来价格略高,但也在很多人 ...

  5. LeetCode 297.序列化二叉树 - JavaScript

    题目描述 序列化是将一个数据结构或者对象转换为连续的比特位的操作,进而可以将转换后的数据存储在一个文件或者内存中,同时也可以通过网络传输到另一个计算机环境,采取相反方式重构得到原数据. 请设计一个算法 ...

  6. Cookie跨域setDomain和setPath

    CSDN日报20170226--<你离心想事成只差一个计划> 程序员2月书讯 [招募]Python学习班招生啦 Cookie跨域setDomain和setPath 标签: cookiesp ...

  7. SSH框架系列：Spring配置多个数据源

    分类: [java]2013-12-09 16:59 1247人阅读 评论(0) 收藏 举报 1.问题的引入 对于普通的SSH框架而言,一般配置一个数据源,一个SessionFactory,一个事务管 ...

  8. C++面试常见问题——10派生类的构造与析构

    派生类的构造与析构 派生类的构造 派生时构造函数与析构函数不会被继承,需要重新定义派生类的构造函数与析构函数.派生类对象包含了基类对象的值,创建派生类时首先会调用基类的构造函数,若派生类中含有其它类对 ...

  9. jmeter里面Dug Sampler 和json提取器的用法

    1.编写用户详情请求 2.查看结果树 一级一级往上查找父集 3.添加json提取器 步骤:点击[用户详情]请求->添加->后置处理器->json提取器 把查看结果树里面的JSON P ...

  10. 官方关于Dialog的介绍

    将Activity显示成Dialog的形式: Tip: If you want a custom dialog, you can instead display an Activity as a di ...