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.htm

打印页面