Erfahren Sie in 6 Minuten mit Bulma ein CSS -Framework

Erstellen wir eine Codierungs -Zitat -Seite mit Bulma, einem modernen CSS -Framework, das auf Flexbox basiert. Dieses Tutorial ergänzt das OpenSource Craft -Video (unten verlinkt). Für den Kontext, warum Bulma eine gute Wahl ist, sehen Sie sich ihr Einführungsvideo [Link zum Video] an.

Wir werden Bulmas UI -Komponenten verwenden: Heldenbanner, Spalten, Karten und Tasten.

Installieren Sie zuerst Bulma. Verwenden Sie npm install bulma oder importieren Sie es direkt in Ihr HTML:

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

Erstellen Sie als nächstes das Heldenbanner:

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

Erstellen wir nun die Spalten:

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

Fügen Sie drei Spalten hinzu, die jeweils eine Karte mit Zitat, Autor und Schaltflächen enthalten:

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

Wiederholen Sie diese Spaltenstruktur noch zweimal, um das dreispaltige Layout zu vervollständigen.

Besuchen Sie Bulma.io. Weitere Tutorials wie diese finden Sie OpenSourceCraft.

(Hinweis: Bild -URLs bleiben unverändert. Der Code wird für eine bessere Lesbarkeit und Klarheit umstrukturiert, aber die Funktionalität bleibt gleich.)

Das obige ist der detaillierte Inhalt vonErfahren Sie in 6 Minuten mit Bulma ein CSS -Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!