與Bulma一起在6分鐘內學習CSS框架

>讓我們用Bulma建立一個編碼引號頁面，Bulma是建立在Flexbox上的現代CSS框架。 該教程補充了OpenSource Craft視頻（下面鏈接）。 有關布爾瑪為何是一個不錯的選擇的上下文，請觀看他們的介紹性視頻[鏈接到視頻]。

我們將使用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>

現在，讓我們構建列：

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

添加三列，每個列包含帶有報價，作者和按鈕的卡：>

再重複此列結構兩次以完成三列佈局。 >

<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資源，請訪問Bulma.io。 有關此類教程的更多教程，請查看OpenSourcecraft。 >

（注意：圖像URL保持不變。對代碼進行了重組，以提高可讀性和清晰度，但功能保持不變。）

以上是與Bulma一起在6分鐘內學習CSS框架的詳細內容。更多資訊請關注PHP中文網其他相關文章！