BULMAで6分でCSSフレームワークを学びます

FlexBoxに基づいて構築された最新のCSSフレームワークであるBulmaを使用して、コーディングの引用ページを作成しましょう。 このチュートリアルは、OpenSourceクラフトビデオを補完します（以下にリンク）。 Bulmaが素晴らしい選択である理由についてのコンテキストについては、彼らの紹介ビデオ[ビデオへのリンク]をご覧ください。

BulmaのUIコンポーネントを使用します：ヒーローバナー、コラム、カード、およびボタン。

最初に、Bulmaをインストールします。

を使用するか、HTML：

に直接インポートします npm install bulma

次に、ヒーローバナーを作成します：

<code class="language-html"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.min.css"></code>

<code class="language-html"><section class="hero is-primary is-medium">
  <div class="hero-body">
    <div class="container">
      <h1 class="title is-1">Coding Quotes</h1>
      <h2 class="subtitle">Like your favorites</h2>
    </div>
  </div>
</section></code>

さあ、列を構築しましょう：

3つの列を追加します。

<code class="language-html"><section class="section">
  <div class="container">
    <div class="columns">
      <!-- Column content will go here -->
    </div>
  </div>
</section></code>

この列構造をさらに2回繰り返して、3列のレイアウトを完了します。

<code class="language-html"><div class="column">
  <div class="card">
    <div class="card-content">
      <h2 class="title">"Quote"</h2>
      <h3 class="subtitle">Programmer</h3>
    </div>
    <footer class="card-footer">
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="card-footer-item button is-success"><i class="fa fa-thumbs-o-up"></i></a>
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="card-footer-item button is-danger"><i class="fa fa-thumbs-o-down"></i></a>
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="card-footer-item button is-info"><i class="fa fa-retweet"></i></a>
    </footer>
  </div>
</div></code>

その他のバルマリソースについては、bulma.ioをご覧ください。 このようなチュートリアルについては、OpenSourCaCraftをご覧ください

（注：画像URLは変更されていません。コードは読みやすくなり、明確にするために再構築されますが、機能は同じままです。

以上がBULMAで6分でCSSフレームワークを学びますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。