纯CSS响应式框架Bulma，前端同学必须了解
yuyutoo 2024-10-12 01:17 7 浏览 0 评论
简介
对于对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>
喜欢小编的可以关注（码农爱code）哦。
相关推荐
- Java的经典垃圾收集器G1，如何设置参数，什么场景下适用?
-
G1(Garbage-First)是一款面向服务器的垃圾收集器,主要针对配备多颗处理器及大容量内存的机器.以极高概率满足GC停顿时间要求的同时,还具备高吞吐量性能特征。G1将Java堆划分为多个大...
- 这份Java面试八股文让329人成功进入大厂，堪称2021最强
-
前言2021秋招即将来临，很多同学会问Java面试八股文有必要背吗？我的回答是：很有必要。你可以讨厌这种模式，但你一定要去背，因为不背你就进不了大厂。国内的互联网面试，恐怕是现存的、最接近科举考试的制...
- 网络安全之对文件上传的思考（文件上传功能中出现安全问题）
-
在web渗透中，最简单直接的方式就是文件上传。但是不做任何检测,直接getshell的现在已经很少了.我在平时的授权测试中，遇到的大多数都是对上传的文件内容，格式等检测的比较多的按前端到后端绕过顺序分...
- JVM常用参数自查笔记（jvm参数怎么看）
-
配置堆区:-Xms、-Xmx、-XX:newSize、-XX:MaxnewSize、-Xmn;-Xms：表示java虚拟机堆区内存初始内存分配的大小，通常为操作系统可用内存的1/64大小即可，但仍...
- JAVA集合（java集合类有哪些分别有什么特点）
-
JAVA集合1.接口集成关系和实现集合类存放于Java.util包中，主要有3种：set(集）、list(列表包含Queue）和map(映射)。1.Collection：Collection...
- 体育老师教你学Java语言(中篇)（教java的老师）
-
一、控制结构训练营1.条件语句if-else→赛前资格审查...
- 十年之重修ConcurrentHashMap原理
-
弱小和无知并不是生存的障碍，傲慢才是。...
- 安装JDK（安装jdk的详细步骤）
-
JDK下载地址：JDK组成：javac：编译器，将源程序转成字节码。jar：打包工具，将相关的类文件打包成一个文件。javadoc：文档生成器，从源码注释中提取文档。jdb：debugger，查错...
- CentOS 7 上安装 JDK 8 的步骤:（centos7下载jdk）
-
CentOS7上安装JDK8的步骤：一、下载JDK...
- JDK为什么废弃永久代，而引入元空间
-
今天我们来说说这个JVM的相关知识，因为面试简直是问到麻木的问题，那就是关于JVM的相关知识，今天了不起再次来和大家聊一下这个知识，我们从一些比较奇怪的问题说起，也不说那些经常会问到的内容了，...
- JDK 1.8中对象被访问的具体过程及步骤
-
JDK1.8中对象被访问的过程和步骤对象的创建与初始化当使用new关键字创建一个Java对象时，JVM需要执行以下步骤：...
- JDK21有没有什么稳定、简单又强势的特性?
-
佳未阿里云开发者...
欢迎 你 发表评论:
- 一周热门
-
-
前端面试:iframe 的优缺点? iframe有那些缺点
-
带斜线的表头制作好了，如何填充内容?这几种方法你更喜欢哪个?
-
漫学笔记之PHP.ini常用的配置信息
-
[干货] JAVA - JVM - 2 内存两分 [干货]+java+-+jvm+-+2+内存两分吗
-
正在学习使用python搭建自动化测试框架?这个系统包你可能会用到
-
织梦(Dedecms)建站教程 织梦建站详细步骤
-
2024PHP在线客服系统源码+完全开源 带详细搭建教程
-
【开源分享】2024在线客服系统PHP源码(安装教程+全新UI)
-
【开源分享】2024PHP在线客服系统源码(搭建教程+终身使用)
-
2024php在线客服系统实时聊天系统源码
-
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)