Bulma的简单使用

于 2022-12-08 16:43:44 发布
阅读量1.6k 收藏 4
点赞数 4
分类专栏： Bulma 文章标签： 前端 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45605541/article/details/128239548
版权

文章目录

1. 引入Bulma

通过 CDN 引入：

  <style>
    @import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css";
  </style>

官网还有其他多种引入方式。

2. 字体和颜色

在 Bulma 中，元素的大小是通过给元素一个类来实现的，并且大多数的 bulma 类是以 is 或者 has 开头的。通过给元素设置类为class="is-size-数字1-7"来实现不同的大小的字体。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css";
  </style>
</head>

<body>
  <h1 class="is-size-1">Hello, Bulma</h1>
  <h2 class="is-size-2">Hello, Bulma</h2>
  <h3 class="is-size-3">Hello, Bulma</h3>
  <h4 class="is-size-7">Hello, Bulma</h4>
</body>

</html>

在这里插入图片描述

同样的，还可以设置字体的大小写、倾斜、粗细：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css";
  </style>
</head>

<body>
  <p class="is-size-4 is-uppercase is-italic">Hello again</p>
  <p class="is-lowercase">Hello again</p>
  <p class="has-text-weight-bold">Hello again</p>
  <p class="has-text-weight-light">Hello again</p>
</body>

</html>

在这里插入图片描述

我们还可以利用 bulma 快速创建标题，比如主标题和副标题：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css";
  </style>
</head>

<body>
  <h2 class="title">Title</h2>
  <h3 class="subtitle">Subtitle</h3>
</body>

</html>

在这里插入图片描述

我们还可以实现文本居中和靠左、靠右对齐：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css";
  </style>
</head>

<body>
  <h1 class="is-size-1 has-text-centered">Hello, Bulma</h1>
  <h2 class="is-size-2 has-text-right">Hello, Bulma</h2>
</body>

</html>

在这里插入图片描述

默认情况下，我们使用 bulma 的字体颜色都是深灰色，改变字体颜色同样需要不同的类型去设置。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css";
  </style>
</head>

<body>
  <p class="has-text-primary">I'm primary text</p>
  <p class="has-text-warning">I'm warning text</p>
  <p class="has-text-danger">I'm danger text</p>
  <p class="has-text-info">I'm info text</p>
  <p class="has-text-success">I'm success text</p>
  <p class="has-text-dark">I'm dark text</p>
  <p class="has-text-light">I'm light text</p>
</body>

</html>

在这里插入图片描述

我们可以通过在类名后，追加 light 或 dark，让字体颜色变得更亮或更暗：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css";
  </style>
</head>

<body>
  <p class="has-text-danger">I'm danger text</p>
  <p class="has-text-danger-light">I'm danger text</p>
  <p class="has-text-danger-dark">I'm danger text</p>
</body>

</html>

在这里插入图片描述

我们也可以设置字体的背景颜色，同样是通过不同的连字符组合进行：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css";
  </style>
</head>

<body>
  <p class="has-text-primary has-background-light">I'm primary text</p>
  <p class="has-text-warning has-background-danger-dark">I'm warning text</p>
  <p class="has-text-warning has-background-danger-light">I'm warning text</p>
</body>

</html>

在这里插入图片描述

在官方文档中我们可以找到更多的颜色对应的类名。

3. 间距和容器

在 Bulma 中，间距也可以通过类名来控制。

p 代表 padding，m 代表 margin，y 代表在y轴方向上添加间距，x 代表在 x轴方向上添加间距，t 代表在 top 方向添加间距，b 代表在 bottom 方向上添加间距，同理，l 和 r 分别代表在左和右方向上添加间距。数字 1-6 表示间距的强度。

组合使用的效果是这样的：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css";
  </style>
</head>

<body>
  <h1 class="py-6 my-2">Hello, Bulma</h1>
  <h1 class="px-4 mx-6 py-4">Hello, Bulma</h1>
  <h1 class="mt-4 mr-4 pb-6 pl-3">Hello, Bulma</h1>
</body>

</html>

在这里插入图片描述

我们也可以利用 section 标签（或是 section 和 container 类）来对一段文本设置间距：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css";
  </style>
</head>

<body>
  <!-- 写法一： -->
  <section class="section">
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius odio ad temporibus ab! Quibusdam beatae mollitia
      quidem facere nihil fuga sint ducimus neque. Quaerat dolores dicta nam sequi, alias reiciendis quas voluptate illo
      at quis eveniet recusandae corrupti maxime expedita!</p>
  </section>

  <!-- 写法二： -->
  <div class="section">
    <div class="container">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius odio ad temporibus ab! Quibusdam beatae mollitia
        quidem facere nihil fuga sint ducimus neque. Quaerat dolores dicta nam sequi, alias reiciendis quas voluptate
        illo at quis eveniet recusandae corrupti maxime expedita!</p>
    </div>
  </div>
</body>

</html>

在这里插入图片描述

月光晒了很凉快
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Calculator:使用Bulma CSS框架构建的简单计算器
05-19
【标题】：Calculator - 使用Bulma CSS框架构建的简单计算器 在网页开发中，有时候我们需要为用户提供一些基本的计算功能，例如一个简单的计算器。在这个项目中，我们使用了Bulma CSS框架来构建这样一个计算器，它...
CSS 框架 Bulma 教程
HY_358116732的博客
11-02 2396
作者： 阮一峰 网页样式需要大量时间开发，最省事的方法就是使用 CSS 框架。 Bootstrap 是最著名的 CSS 框架，但是今天我想推荐另一个更轻量化、更易用的框架----Bulma。有了它，即使完全不懂 CSS，也可以轻而易举做出美观的网页。 我要感谢 100offer 对我提供赞助。100offer 是国内第一流的人力资源网站，本文结尾有他们的简介，
Bulma 教程，Bulma 指南，Bulma 实战，Bulma 中文手册
xmt1139057136的专栏
10-24 9847
Bulma 是一个基于 Flexbox 的现代化的 CSS 框架，设计的初衷就是移动优先（Mobile First），模块化设计，可以轻松用来实现各种简单或者复制的内容布局，浏览器支持：浏览器支持：Chrome、Edge、Firefox、Internet Explorer (10+)、Opera 以及 Safari。下面是关于 Bulma 的教程，指南，实战，中文手册相关内容的链接：Bulma 简
Bulma和 Tailwind功能比较
Merlin's Engineering Blog
06-13 806
Bulma, Tailwind这两个框架的比较
css模板 bulma_Bulma是您永远需要的唯一由Flexbox驱动CSS框架
cune1359的博客
06-30 442
Flexbox是前端开发人员的热门话题，因为它为CSS对齐提供了一种现代化的方法 。 大多数网站布局都依靠CSS浮动或固定百分比来使内容块保持一致。 但是flexbox改变了所有规则，并且使用Bulma这样的框架，您可以在flexbox上构建完整的布局 。 这是一个仍处于开发初期的全新CSS框架，但有很多功能可提供。 另请阅读： CSS浮点数在五个问题中的解释 对于这样一个年轻...
快速提示：如何使用布尔玛构建博客布局
Web design 教程小屋
07-09 399
在这个快速提示中，我们将使用Jeremy Thomas流行的基于FlexboxCSS框架Bulma来构建响应式博客布局。 和往常一样，要初步了解我们将要创建的内容，请查看相关的Codepen演示（请查看较大的版本以获得更好的体验）： 布尔玛入门 Bulma只需要一个CSS文件。 您可以通过程序包管理器（例如npm ）或CDN（例如cdnjs ）访问其GitHub页面来获取该文件的副本。...
bulma css 中文,[译] Bulma: 2018年你应该关注的CSS框架
weixin_36054159的博客
08-04 170
image在这 Bootstrap 主导的世界里，Semantic UI和Foundation备受欢迎, 其它的一些框架很难脱颖而出。不过, 这三个是众所周知的, 已经相对成熟, 并且在市场上存在了相当长的时间, 但是它们都相对较重, 它们都需要对核心有深刻的理解，尤其是你需要自己定制些东西的时候(你曾经在Semantic中定制过下拉组件吗？？！)一股清流Bulma来了。 Jeremy Thoma...
bulma-0.7.5.zip
06-27
未压缩的`bulma.css`适合开发时使用，而`bulma.min.css`是经过压缩和优化的版本，适用于生产环境，以减少页面加载时间。 2. **sass**：Sass（Syntactically Awesome Style Sheets）是一种CSS预处理器，允许使用变量...
bulma-0.9.4.zip
最新发布
05-28
Bulma 基于 Flexbox 的现代 CSS 框架 ...Bulma 是一个简单、很容易自定义的 CSS UI 框架，提供了众多预定义好的样式，开发者可以直接调用 class 名来使用，通过规范的组合，来达到快速构建 web 界面
BulmaBlocks:使用Go尝试Bulma块
04-16
布尔玛积木...项目中可能包含一个简单的web服务器示例，展示如何在Go中使用BulmaBlocks的组件。通过阅读源代码和文档，你可以逐步了解如何将BulmaBlocks集成到你的Go项目中，创建出既美观又高效的Web应用。
preact-bulma:Bulma CSS项目的预先组件
05-14
您可以导入完整的Bulma框架，也可以使用SASS / SCSS导入所需的部分。 完整的布尔玛捆绑包（默认主题，无定制，最简单） // Import Bulma CSS import "bulma/css/bulma.min.css" ; 自定义样式（允许自定义，推荐） ...
Bulma CSS框架教程
吴吃辣
05-22 403
Bulma是一个轻量级的现代CSS框架，基于flex，跟bootstrap不一样纯CSS没有JS，与vuejs、reactjs这样JavaScript框架可以很好地集成。 为降低学习难度，让初学者可以快速掌握，本教程聚焦于重点内容，具体技术细节请查阅官方文档。 受众对象 让初学者可轻松熟悉并使用 Bulma CSS框架。 预备知识 对HTML、CSS、JavaScript、文档对象模型(DOM)...
Bulma CSS - CSS类
吴吃辣
05-22 280
Bulma是一个纯粹的CSS框架，没有任何JavaScript代码，最终生成的只是一个简单的.css文件: https://github.com/jgthms/bulma/blob/master/css/bulma.css Bulma的原则是不直接对标签设置样式，而是通过css类，让开发人员选择是否应用Bulma样式。例如 <input type="text">，如果不设置css类，是...
Bulma CSS - 简介
吴吃辣
05-22 463
Bulma是什么？ Bulma是一个开源、简单、现代的CSS框架，它基于flexbox模块(用于开发响应式布局结构)，纯css没有js代码。 版本历史 Bulma 于2016年发布，遵循MIT license。 特性 轻量级的现代CSS框架，使用Flexbox 支持响应式布局，网格等 纯CSS，没有Javascript代码 可定制、模块化 优点 为电脑、平板和手机提供响应式设计 纯CSS框架...
css模板 bulma_用Bulma在6分钟内学习CSS框架
culh2177的博客
09-02 872
css模板 bulmaIn this tutorial, we’ll be getting started with Bulma, a modern CSS Framework built on Flexbox. For best results, follow along with the video at the end by OpenSource Craft. If you want to ...
webpack随笔06-bulma
uikoo9的专栏
06-14 377
推荐一个网站：Find the best package for you and test it online, Analyze tech stack for your project. | DEVTOOL.TECH这里可以看到npm包各种信息，比如按npm包star数排行，下载数排行，以及npm包详细信息等 npm包详情内，有很多聚合的信息这个网站比较有意思，可以看到目前流行的npm包是哪些流行npm包（star排行）中，css类前三：bootstrap（老牌大哥），element-ui，bulma，Bu
Bulma 表单
『程序员·小李』的博客
05-12 750
1. 准备工作 将遵循html5规范预定加载js及css文件。 2. 在body中添加标签 在body中添加了一个section，section是带有一个hero类的，设置了颜色is-primart，设置了高度，is-fullheight 中间的div就是hero的主体了，hero-body，他可以让内容垂直居中， 效果如图： 3. 让登录部分水平...
Bulma简介
『程序员·小李』的博客
05-12 450
1. 列排布 <div class="columns"> <div class="column"> </div> ` ` ` </div> columns代表一行的列布局，每个column代表一列，对100%进行平均划分。 以上将会均分为三列 2. 阅读起来也是很方...
Bulma CSS - 模块化
abcd4491的博客
05-22 251
Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma框架是模块化的，可以按需导入。 Bulma包含39个.sass文件，都可以单独导入。 例如，假设项目只需要Bulma columns，相关文件位于bulma/sass/grid文件夹中。 只...
做简单的网站需要的框架
04-01
做简单的网站可以选择以下框架： 1. Bootstrap：Bootstrap 是一个基于 HTML、CSS 和 JavaScript 的开源框架，它可以帮助开发者快速创建响应式的网站。 2. Foundation：Foundation 是另一个流行的响应式框架，它提供了许多组件和模板，可以轻松地创建美观的网站。 3. Materialize：Materialize 是一个基于 Google Material Design 的框架，它提供了许多预定义的组件和样式，可以让开发者快速构建现代化的网站。 4. Semantic UI：Semantic UI 是一个语义化的 CSS 框架，它提供了许多易于理解的类和组件，可以让开发者轻松构建美观且易于维护的网站。 5. Bulma：Bulma 是一个轻量级的 CSS 框架，它使用现代的 CSS 技术，提供了许多易于使用的组件和样式，可以帮助开发者快速创建简单的网站。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值