Bulma-Bulmaの使用を開始する

説明

あなたは1つのCSSファイルを使用してブルマで開始することができ、次の方法のいずれかを使用して操作することができます-

リンクを使用してBulmaフレームワークをインストールします。/nodejs/nodejs_npm[NodePackage Manager]（NPM）パッケージマネージャー。
https://en.wikipedia.org/wiki/Content_delivery_network [コンテンツ配信ネットワーク]（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 finddevguides!!!
            </span>
         </div>
      </section>
  </body>
</html>

上記のコードをHTMLファイルに保存し、ブラウザーで開きます。以下に示すように出力が表示されます-

Bulma-getting-started

Bulma-Bulmaの使用を開始する

説明

例