Bulma的简单使用

最新推荐文章于 2024-07-20 18:16:53 发布
最新推荐文章于 2024-07-20 18:16:53 发布
阅读量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
    评论
专栏目录
CSS 框架 Bulma 教程
HY_358116732的博客
11-02 2396
作者： 阮一峰 网页样式需要大量时间开发，最省事的方法就是使用 CSS 框架。 Bootstrap 是最著名的 CSS 框架，但是今天我想推荐另一个更轻量化、更易用的框架----Bulma。有了它，即使完全不懂 CSS，也可以轻而易举做出美观的网页。 我要感谢 100offer 对我提供赞助。100offer 是国内第一流的人力资源网站，本文结尾有他们的简介，
Bulma 教程，Bulma 指南，Bulma 实战，Bulma 中文手册
xmt1139057136的专栏
10-24 9846
Bulma 是一个基于 Flexbox 的现代化的 CSS 框架，设计的初衷就是移动优先（Mobile First），模块化设计，可以轻松用来实现各种简单或者复制的内容布局，浏览器支持：浏览器支持：Chrome、Edge、Firefox、Internet Explorer (10+)、Opera 以及 Safari。下面是关于 Bulma 的教程，指南，实战，中文手册相关内容的链接：Bulma 简
bulmatypecho是一个使用Bulmacss构建的Typecho模板
08-11
bulma-typecho 是一个使用 Bulma.css 构建的 Typecho 模板，它只有很少的 JavaScript 代码，以及一个 CSS 依赖，使用这个主题的主页最少只需要发起两个请求。
Bulma CSS框架教程
吴吃辣
05-22 403
Bulma是一个轻量级的现代CSS框架，基于flex，跟bootstrap不一样纯CSS没有JS，与vuejs、reactjs这样JavaScript框架可以很好地集成。 为降低学习难度，让初学者可以快速掌握，本教程聚焦于重点内容，具体技术细节请查阅官方文档。 受众对象 让初学者可轻松熟悉并使用 Bulma CSS框架。 预备知识 对HTML、CSS、JavaScript、文档对象模型(DOM)...
Bulma组件
LeeBrook0的博客
04-28 516
面包屑导航（breadcrumb） 使用breadcrumb标记nav，组成ul列表。当前页使用is-active标记 <nav class="breadcrumb" aria-label="breadcrumbs"> <ul> <li><a href="#">Bulma</a></li> <li><a href="#">Documentation</a></li>
Bulma - 免费开源的纯 CSS 前端 UI 框架，专注于构建移动优先的响应式 web 界面
那些免费的砖
01-07 951
简单易用的 CSS 框架，虽然只有一个 CSS 文件，但功能很强大，在国外很受开发者欢迎，推荐给大家。
Calculator:使用Bulma CSS框架构建的简单计算器
05-19
【标题】：Calculator - 使用Bulma CSS框架构建的简单计算器 在网页开发中，有时候我们需要为用户提供一些基本的计算功能，例如一个简单的计算器。在这个项目中，我们使用了Bulma CSS框架来构建这样一个计算器，它...
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_在5分钟内学习Bulma CSS-初学者教程
cumian8165的博客
07-22 1054
bulma.cssBulma is a simple, elegant, and modern CSS framework that a lot of developers prefer over Bootstrap. Personally, I think Bulma has a better design by default, and it also feels more light-wei...
Bulma，Bulma中文网，Bulma中文文档，Bulma教程
weixin_45304927的博客
03-23 1441
Bulma中文网：https://bulma.zcopy.site
Bulma 图标
『程序员·小李』的博客
05-18 904
基本用法 <span class="icon"> <i class="fas fa-home"></i> </span> 不同颜色的图标 <span class="icon has-text-info"> <i class="fas fa-info-circle"></i> &...
Bulma CSS - 入门
吴吃辣
05-22 753
有数种方法可以安装Bulma： 使用npm安装Bulma包 使用cdnjs CDN链接到Bulma样式表 从GitHub项目库获得最新的开发版本 1. 使用npm安装Bulma包 npm install bulma 2. 使用cdnjs CDN https://cdnjs.com/libraries/bulma 3. 从GitHub项目库下载 https://github.com/jgthm...
Bulma列
『程序员·小李』的博客
12-26 472
简单创建响应式多列（均分） 增加一个 columns 作为容器 根据你的需要在其中添加更多的 column 元素 <div class="columns"> <div class="column"> 第一列 </div> <div class="column"> 第二列 </div> &lt...
Bulma 表单
『程序员·小李』的博客
05-12 750
1. 准备工作 将遵循html5规范预定加载js及css文件。 2. 在body中添加标签 在body中添加了一个section，section是带有一个hero类的，设置了颜色is-primart，设置了高度，is-fullheight 中间的div就是hero的主体了，hero-body，他可以让内容垂直居中， 效果如图： 3. 让登录部分水平...
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 429
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
做简单的网站需要的框架
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、付费专栏及课程。

余额充值