首页 编程语言 css

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

简介

对于对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:
https://cdnjs.com/libraries/bulma

从存储库
https://github.com/jgthms/bulma/tree/master/css下载

  • 代码要求

要使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="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/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>


相关推荐