Apprenez un cadre CSS en 6 minutes avec Bulma

Créons une page de citations de codage avec Bulma, un framework CSS moderne construit sur Flexbox. Ce tutoriel complète la vidéo OpenSource Craft (liée ci-dessous). Pour le contexte sur les raisons pour lesquelles Bulma est un excellent choix, regardez leur vidéo d'introduction [lien vers la vidéo].

Nous utiliserons les composants de l'interface utilisateur de Bulma: bannière de héros, colonnes, cartes et boutons.

Tout d'abord, installez Bulma. Utilisez npm install bulma ou importez-le directement dans votre 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>

Ensuite, créez la bannière héros:

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

Maintenant, construisons les colonnes:

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

Ajouter trois colonnes, chacune contenant une carte avec un devis, un auteur et des boutons:

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

Répétez cette structure de colonne deux fois de plus pour compléter la disposition à trois colonnes.

Pour plus de ressources Bulma, visitez Bulma.io. Pour plus de tutoriels comme celui-ci, consultez OpenSourceCraft.

(Remarque: Les URL de l'image restent inchangées. Le code est restructuré pour une meilleure lisibilité et une meilleure clarté, mais la fonctionnalité reste la même.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!