Ketahui kerangka CSS dalam 6 minit dengan Bulma

Mari kita membina halaman petikan pengekodan dengan Bulma, kerangka CSS moden yang dibina di Flexbox. Tutorial ini melengkapkan Video Kerajinan OpenSource (dihubungkan di bawah). Untuk konteks mengapa Bulma adalah pilihan yang hebat, tonton video pengenalan mereka [pautan ke video].

Kami akan menggunakan komponen UI Bulma: Banner Hero, Lajur, Kad, dan Butang.

Pertama, pasang Bulma. Gunakan

atau import terus ke HTML anda: 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>

Seterusnya, Buat Banner Hero:

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

Sekarang, mari kita bina lajur:

Tambahkan tiga lajur, masing -masing mengandungi kad dengan petikan, pengarang, dan butang:

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

Ulangi struktur lajur ini dua kali lebih banyak untuk melengkapkan susun atur tiga lajur.

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

Untuk lebih banyak sumber Bulma, lawati Bulma.io. Untuk lebih banyak tutorial seperti ini, lihat OpenSourceCraft.

(Nota: URL imej tetap tidak berubah. Kod ini disusun semula untuk kebolehbacaan dan kejelasan yang lebih baik, tetapi fungsinya tetap sama.)

Atas ialah kandungan terperinci Ketahui kerangka CSS dalam 6 minit dengan Bulma. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!