Bulma
是一个简单且易于定制的CSS UI框架,它提供了许多预定义的样式。开发者可以直接调用类名来使用,通过规范的组合,可以快速搭建一个web界面。Bulma
官方提供了几十个基础组件,非常漂亮,也是用CSS实现,没有任何Javascript代码。下面编程教程网小编给大家简单介绍一下项目的搭建!
安装 Bulma
// npm 安装
npm install bulma
// yarn 安装
yarn add bulma
或者
<!-- 在线引入 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma-rtl.min.css">
demo项目示例
<!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://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</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>
进入Bulma官网
以上是编程学习网小编为您介绍的“利用Bulma前端框架搭建项目”的全面内容,想了解更多关于 前端知识 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:利用Bulma前端框架搭建项目
基础教程推荐
猜你喜欢
- 使用PHP从MySQL DB更新HTML组合框 2023-10-26
- # HTML5与CSS3从如入门到精通(第三版)(超简洁、实用学习笔记) 2023-10-29
- VUE项目引入微信JSSDK 实现微信自定义分享 2023-10-08
- VUE3(二十)VUE自定义指令v-preventReClick,防止多次点击,重复请求 2023-10-08
- js树插件zTree获取所有选中节点数据的方法 2024-01-09
- CSS3中currentColor关键字的妙用 2024-03-31
- JavaScript把局部变量变成全局变量的方法 2024-02-09
- Ruffy javascript 学习笔记 2023-12-20
- $.ajax中contentType: “application/json” 的用法详解 2023-02-23
- js中style.display=””无效的解决方法 2024-01-07