首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏京程一灯

    CSS 框架 Bulma 教程

    二、基本用法 Bulma 的安装只需一步,把样式表插入网页即可。 Bulma 允许为不同设备指定不同的布局。 五、文字 Bulma 提供7个修饰指定文字大小。 六、定制 最后这个部分是高级内容,讲解如何定制 Bulma,也就是修改默认样式。Bulma 采用 Sass 语法(注意,不是 Scss 语法),所以定制的样式也必须使用 SASS。 "build-sass": "node-sass --output-style expanded --source-map true bulma.sass css/bulma.css", 把里面的bulma.sass

    3K30发布于 2019-03-27
  • 来自专栏阮一峰的网络日志

    CSS 框架 Bulma 教程

    Bulma 允许为不同设备指定不同的布局。 五、文字 Bulma 提供7个修饰指定文字大小。 $ cd bulma $ npm install 接着,在源码的根目录里面,新建一个app.sass文件,定制的代码都写在这个文件。在它里面,先引入 Bulma 基础变量。 接着,在这个文件里面加载 Bulma 的入口脚本。 @import "./bulma" 这一行的下面,你就可以写自己的样式了,比如为所有标题加一个下划线。 "build-sass": "node-sass --output-style expanded --source-map true bulma.sass css/bulma.css", 把里面的bulma.sass

    2.2K40发布于 2018-04-12
  • 来自专栏后端技术

    nuxt vue 引入 bulma jquery

    mounted () { $(function () { $('#test').text('ok') }) } } 2.引入bulma npm install --save bulma // cnpm install --save bulma home.vue <style scoped> @import url('bulma/css/bulma.css'); </style > ---- 引入bulma出错的心路历程 原本以为是 <style scoped> @import url('~assets/css/bulma.css'); </style> 结果报错 Error: /node_modules/_bulma@0.5.3@bulma/css/bulma.css (Emitted value instead of an instance of Error) postcss-custom-properties /node_modules/_bulma@0.5.3@bulma/css/bulma.css 4:14-159 13:3-17:5 14:22-167 @ .

    1.3K40发布于 2019-05-25
  • 来自专栏星流全栈

    Bulma — 基于Flexbox的CSS框架

    今天我们来介绍一款CSS框架,它的名字是Bulma。它是一个现代的,基于Flexbox的CSS框架。下面是它的一系列特点,更多示例可点击「阅读原文」进行查看。

    82960发布于 2018-06-01
  • Bulma 现代CSS框架入门指南

    什么是BulmaBulma是一个基于Flexbox的现代CSS框架,它完全开源且免费使用!与其他流行框架不同,Bulma只包含CSS,没有JavaScript组件,这让它非常轻量级和灵活。 我第一次使用Bulma时,就被它的简洁性所吸引。没有冗余的JavaScript,没有复杂的依赖关系,只有纯粹的CSS魔法!为什么选择Bulma?在前端框架的海洋中,为什么要选择Bulma呢? 开始使用Bulma安装Bulma超级简单! Bulma核心概念容器(Containers)容器是Bulma中最基础的布局元素,用于在各种屏幕尺寸上居中内容:```html```Bulma的容器会根据屏幕宽度自动调整最大宽度,非常智能! 下面是Bulma与其他流行框架的简要比较:Bulma vs Bootstrap:- Bulma更轻量,无JavaScript依赖- Bootstrap拥有更多组件和更广泛的生态系统- Bulma的Flexbox

    37010编辑于 2025-09-25
  • 来自专栏网络安全技术点滴分享

    基于Flexbox的现代化CSS框架:Bulma快速入门指南

    CDN 链接: https://www.jsdelivr.com/package/npm/bulma导入使用安装后,可以通过以下方式将 CSS 文件导入你的项目:@import 'bulma/css /bulma.css';使用说明基础示例使用 Bulma 非常简单,只需将 CSS 文件引入到 HTML 的 <head> 中,然后使用其提供的类名即可。 -- 引入 Bulma CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<em>bulma</em>@1.0.4/css/<em>bulma</em>.min.css </span></div>表单组件使用 <em>Bulma</em> 样式化的表单元素。 : dashed;$input-border-width: 2px;// 然后导入 <em>Bulma</em>@import "~bulma/bulma";核心代码Bulma 的核心是一个模块化的 Sass 项目,其样式通过组合多个独立的组件文件生成

    11410编辑于 2026-01-15
  • 来自专栏用户5305560的专栏

    【Python100天学习笔记】Day30 Bootstrap和Bulma框架

    基于弹性盒子的CSS框架 - Bulma Bulma是一个基于Flexbox的现代化的CSS框架,其初衷就是移动优先(Mobile First),模块化设计,可以轻松用来实现各种简单或者复杂的内容布局, DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bulma</title> <link href="https ://cdn.bootcss.com/<em>bulma</em>/0.7.4/css/<em>bulma</em>.min.css" rel="stylesheet"> <style type="text/css"> div {

    36250编辑于 2022-04-01
  • 来自专栏薛定喵君

    推荐一款轻量化、易用的css框架bulma.css

    # 基本用法 <link rel="stylesheet" href="css/<em>bulma</em>.min.css"/> Button 修饰类都是以is-或has- Normal Medium Large # 响应式布局 前面说过,Bulma 有五个宽度断点,分别是 mobile(手机)、tablet(平板)、desktop(桌面)、widescreen(宽屏)、fullHD(高清) git地址:https://github.com/jgthms/bulma

    89110发布于 2019-11-05
  • 来自专栏前端实验室

    牛逼!一个没有任何JS代码的前端框架!

    Bulma: the modernCSS framework thatjust works. 安装和使用前提 记住:You only need 1 CSS file to use Bulma。 你只需要一个CSS文件就能使用Bulma框架。 你可以通过CDN直接引入bulma.min.css <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<em>bulma</em>@0.9.4/css/<em>bulma</em>.min.css npm install <em>bulma</em> // or yarn add <em>bulma</em> 前提:<em>Bulma</em>是现代网页响应式框架。因此你需要下面这样的HTML声明! <! 官方地址: https://<em>bulma</em>.io 补充 <em>Bulma</em>专为响应式而生!它是一个移动优先的框架,同时也能轻松搭建适配不同屏幕的界面。 开发者只需要在 HTML 代码上调用CSS类即可。

    2.5K21编辑于 2023-08-10
  • 来自专栏前端达人

    2024年最值得尝试的5个CSS框架

    Bulma Bulma 是一个轻量级的 CSS 框架,以其简单性、响应性和定制选项著称。 Bulma 的主要特点 基于 Flexbox 的现代 CSS 框架:利用 Flexbox,Bulma 为开发者提供了一种更灵活、简洁的方式来创建布局,无需复杂的布局计算。 易用且直观的语法:Bulma 的类名清晰直观,使得即使是 CSS 新手也能快速上手。 如何在项目中集成 BulmaBulma 集成到项目中相当简单,只需导入 Bulma 的 CSS 文件即可开始使用它提供的各种样式和组件。 以下是一个使用 Bulma 创建分页导航的示例: import 'bulma/css/bulma.min.css'; export function Bulma() { return (

    4.5K10编辑于 2024-02-21
  • 来自专栏深度学习与python

    6个常用的React组件库

    Bulma ? Bulma 与本文介绍的其他库不太一样,因为 Bulma 是纯 CSS 框架,不需要 JS。 你可以选择直接使用 Bulma 中的类,也可以使用包装库,例如 react-bulma-components。 项目链接:Bulma 项目链接:react-bulma-components 包大小(来自 BundlePhobia):缩小后 179kB,缩小 +gzip 压缩 20.1kB 优点: 不会让你的网站长一副

    2.6K10发布于 2020-09-14
  • 来自专栏达达前端

    开源项目

    image https://github.com/vue-bulma/vue-admin 基于 Vue 和 Bulma 的控制面板。 ? image

    1.6K20发布于 2020-06-19
  • 来自专栏css小迷妹

    译文:9个用于web前端开发的CSS开源框架

    Components for the web 开源框架; by Google MIT Pure 开源框架; by Yahoo BSD Foundation 前端框架; by Zurb Foundation MIT Bulma 添加描述 6 Bulma Bulma是一款基于Flexbox的开源框架,并且拥有了MIT的执行许可。Bluma是一款十分轻量的框架,并且仅仅需要一个CSS文件。 添加描述 Bulma拥有条理清晰的文档,并且可以让你很容易地选择你喜欢的主题进行探索。与此同时,Bulma也拥有许多web组件供你选择,并运用在设计中。 添加描述 在Github上,Bulma页面拥有超过1400条提交以及300名贡献者。

    1.5K10发布于 2021-09-19
  • 来自专栏web秀

    2018年十大轻量级的CSS框架为构建快速网站

    在线演示 2、Bulma 使用21kB缩小和压缩,Bulma并不是这个列表中最轻量级的,但是这个新的框架非常有趣,它完全值得一提。 Bulma是用移动第一的方法构建的,它使每个元素都能对垂直阅读进行优化,并且 它的网格是用Flexbox完全构建的。使用相同大小的列实现灵活的布局就像在HTML元素中添加.column类一样简单。

    1.3K20发布于 2019-09-05
  • 来自专栏前端实验室

    这 8 个超赞的 Vue 开源项目你一定要知道

    有着极其丰富详细的开发文档和免费的视频教程,也得到了Vue.js 作者尤雨溪大神的推荐~ Github Star数:34.6K 官网地址:https://vuetifyjs.com/zh-Hans/ Buefy Buefy 基于 Bulma 特征 轻松保持当前Bulma主题/变量 支持Material Design Icons和FontAwesome 非常轻量级,除了Vue和Bulma之外,没有任何内部依赖。 约88KB min+gzip(包括Bulma) 语义代码输出 遵循Bulma设计和一部分Material Design UX 注重可用性和性能(没有过度动画) Github Star数:9.3K 官网地址

    3.2K30编辑于 2022-12-02
  • 来自专栏用户5359213的专栏

    2021 年使用人数最多的5款主流前端框架点评

    /www.bootstrap.cn 2、Bulmacss Bulmacss样式库,是一个更轻量化、更易用的CSS框架,官方定位是,哪怕你不懂CSS也可以根据api快速构建web UI,这里简单的提一句bulma 的所有样式都是基于class,只要给dom元素标签增加对应所需的class即可快速获得所需要的样式,是个易用性很强的CSS框架;两者最大的区别是,bulma是纯css,没有js,bootstrap有JS 在好几个项目中用了vue + bulma,感觉不错。

    2K00发布于 2021-05-29
  • 来自专栏全栈技术

    2023 年 6 大最佳 CSS 框架

    Bulma Bulma 是一个相对较新的 CSS 框架,专注于简单性和灵活性。它包括响应式网格系统和预先设计的组件,例如表单、按钮和导航。 优点 Bulma 的组件非常可定制,可以轻松修改以满足特定的设计需求。 它的 CSS 类非常易于使用和理解,是初学者的绝佳选择。 与其他 CSS 框架相比,Bulma 的文件非常小,因此页面加载时间更快。 缺点 与其他 CSS 框架相比,它的用户社区较小,因此更难找到资源和支持。 Bulma 的组件有时可能需要比其他 CSS 框架更多的自定义,从而导致更多的编码工作。 与其他 CSS 框架相比,它的设计美学可能不太明显。

    4.9K10编辑于 2023-04-07
  • 来自专栏老九学堂

    Github上10个开源免费的后台控制面板

    八、vue-admin Github Star 数 8676, Github 地址:https://github.com/vue-bulma/vue-admin。 基于 Vue 和 Bulma 的控制面板。 ?

    1.7K10发布于 2020-05-29
  • 来自专栏京程一灯

    13个帮你提高开发效率的现代CSS框架[每日前端夜话0x67]

    官网:https://tailwindcss.com Bulma ? Bulma Bulma是围绕CSS Flexbox构建的,是一个免费的开源框架。你会发现它有许多易于定制的UI元素。 官网:https://bulma.io/ Picnic CSS ? Picnic CSS Picnic CSS 是一个超轻量级的框架,压缩后小于10KB。

    1.9K40发布于 2019-05-16
  • 来自专栏OneMoreThink的专栏

    攻防靶场(48):一个Web扫描大小写的坑 Vegeta1

    目标站点是Linux服务器,对大小写敏感,换一个全小写的字典重新扫描,发现/bulma/目录。 2. 初始访问 2.1 有效账户:本地账户 在/bulma/目录中发现hahahaha.wav文件。

    20500编辑于 2025-02-04
领券