龙空技术网

纯CSS响应式框架Bulma,前端同学必须了解

码码与共 4919

前言:

而今我们对“fontawesome cdn”都比较讲究,大家都需要剖析一些“fontawesome cdn”的相关文章。那么小编同时在网上汇集了一些关于“fontawesome cdn””的相关内容,希望同学们能喜欢,咱们快快来学习一下吧!

简介

对于对JavaScript头疼的前端同学来说,这款纯CSS框架Bulma对你来说就是爽歪歪。Bulma来自大名鼎鼎的Bootstrap但是没有Bootstrap那样绑定JQuery,可以说的Bootstrap的替代品。通过单纯关注CSS,因此它可以集成在任何JS环境中。Bulma提供了一种轻量级解决方案,可以在任何开发环境中轻松实现,可以说构建Web界面必备良药。

Bulma是一个基于Flexbox的免费开源CSS框架,超过150,000名开发人员使用它。目前版本v0.7.5。github star 数 35K+,MIT协议, 免费,移动优先(100%响应式), 组件模块化,现代浏览器(css3)(由flexbox构建)可以说非常热门,前端同学必须了解。

浏览器兼容性

Bulma使用autoprefixer使(大多数)Flexbox功能与早期的浏览器版本兼容。只要对Flexbox 支持友好,就可以使用。

如上图总结:Bulma支持现代浏览器

Chrome/Edge/Firefox/Opera/Safari

仅部分支持Internet Explorer(10+)。

文档

文档里详细说明了如何模块化bulma css, 定制bulma css, 如何响应式布局,如何使用bulma列,如何使用bulma表单,如何使用bulma元素,及如何使用bulma组件,这里只是简要介绍,具体可以去bulma 官网查阅。官网截图如下:

快速开发安装

npm 安装(推荐)

npm install bulma

使用cdnjs CDN:

从存储库 下载

代码要求

要使Bulma正常工作,您需要使网页响应。

使用HTML5 doctype

<!DOCTYPE html>

添加响应式视口meta标记

<meta name="viewport" content="width=device-width, initial-scale=1">
hello world
<!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=""> <script defer src=""></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>

喜欢小编的可以关注(码农爱code)哦。

标签: #fontawesome cdn