Bulma - 开始使用 Bulma

描述

您可以使用一个 css 文件开始使用 Bulma，并可以使用以下方式之一进行操作 −

• 使用 Node 包管理器 (NPM) 包管理器安装 Bulma 框架。

• 使用 内容分发网络 (CDN) 链接 Bulma 样式表。

• 从 Github 存储库下载 Bulma 以使用最新开发版本。

使用NPM

使用以下 npm 命令安装 Bulma 框架 −

npm install bulma

使用 CDN

您可以使用以下 CDN 链接 Bulma 样式表 −

https://cdnjs.com/libraries/bulma

使用 GitHub 存储库

从以下 Github 存储库下载 Bulma −

https://github.com/jgthms/bulma/tree/master/css

示例

以下示例演示了如何创建简单的 HTML入门模板 −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      
      <!--responsive viewport meta tag-->
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title> Bulma Example</title>
      
      <!--Bulma CSS CDN-->
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      
      <!--To make use of Font Awesome icons-->
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Hello World...Welcome to Tutorialspoint!!!
            </span>
         </div>
      </section>
  </body>
</html>

将上述代码保存在 HTML 文件中，并在浏览器中打开。它将显示如下所示的输出 −

bulma_overview.html