Card içerik alanı. Buraya metin, resim veya başka bileşenler ekleyebilirsiniz.
Canlı Demolar
1. Flexbox Grid Sistemi
Bulma'nın kolon sistemi inanılmaz derecede basittir. Sadece .columns ve içine .column eklersiniz.
is-full
is-two-thirds
Auto
is-one-quarter
Auto
is-one-quarter
1 (Mobile)
2 (Mobile)
3 (Mobile)
<div class="columns">
<div class="column is-full">
<div class="notification is-primary has-text-centered">is-full</div>
</div>
</div>
<div class="columns">
<div class="column is-two-thirds">
<div class="notification is-info has-text-centered">is-two-thirds</div>
</div>
<div class="column">
<div class="notification is-warning has-text-centered">Auto</div>
</div>
</div>
<!-- .is-mobile sınıfı, kolonların mobilde de yan yana kalmasını sağlar -->
<div class="columns is-mobile">
<div class="column">
<div class="notification is-link has-text-centered">1 (Mobile)</div>
</div>
<div class="column">
<div class="notification is-link has-text-centered">2 (Mobile)</div>
</div>
<div class="column">
<div class="notification is-link has-text-centered">3 (Mobile)</div>
</div>
</div>2. Hero + Card Düzeni
Hero bileşeni ile büyük, dikkat çekici başlık alanları ve Card bileşeni ile şık içerik kutuları oluşturabilirsiniz.
Bulma Hero
Hero bileşeni, sayfanızda büyük bir banner oluşturur.
Bileşen
Jeremy Thomas
@jgthms
Bulma'nın yaratıcısı. Harika bir CSS framework'ü hazırladı.
<section class="hero is-info is-small mb-4">
<div class="hero-body">
<p class="title">Bulma Hero</p>
<p class="subtitle">Hero bileşeni büyük bir banner oluşturur.</p>
</div>
</section>
<div class="columns">
<div class="column">
<div class="card">
<header class="card-header">
<p class="card-header-title">Bileşen</p>
</header>
<div class="card-content">
<div class="content">
Card içerik alanı.
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Kaydet</a>
<a href="#" class="card-footer-item">Düzenle</a>
</footer>
</div>
</div>
</div>3. Navbar + Dropdown (Burger Menü)
Bulma saf CSS olduğu için, mobilde burger menüsünü açıp kapamak için ufak bir JavaScript kodu yazmanız gerekir.
↑ "Daha Fazla" üzerine geldiğinizde dropdown menü açılır.
<nav class="navbar is-dark" role="navigation">
<div class="navbar-brand">
<a class="navbar-item" href="#"><strong>LOGO</strong></a>
<!-- Mobile Burger -->
<a role="button" class="navbar-burger" data-target="navMenu">
<span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
</a>
</div>
<div id="navMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">Ana Sayfa</a>
<!-- Dropdown (Hover ile açılır) -->
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">Daha Fazla</a>
<div class="navbar-dropdown">
<a class="navbar-item">Hizmetler</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">Kayıt Ol</a>
</div>
</div>
</div>
</div>
</nav>4. Form Elemanları ve Bildirimler (Notifications)
Gelişmiş ikon destekli form alanları ve farklı renk paletlerine sahip bildirim kutuları.
Kullanıcı adı geçerli
Bu e-posta adresi geçersiz
Bu, birincil (primary) bir bildirim kutusudur. İşlem başarılı oldu.
Bu bir hata (danger) mesajıdır, ancak
.is-light sınıfı ile daha yumuşak renkler alır.
Dikkatli olmalısınız! Bu bir uyarı (warning) bildirimi.
<!-- İkonlu Form Input -->
<div class="field">
<label class="label">Email</label>
<div class="control has-icons-left has-icons-right">
<input class="input is-danger" type="email" placeholder="Email adresiniz">
<span class="icon is-small is-left"><i class="fas fa-envelope"></i></span>
</div>
<p class="help is-danger">Bu e-posta adresi geçersiz</p>
</div>
<!-- Bildirim (Notification) -->
<div class="notification is-primary">
<button class="delete"></button>
İşlem başarıyla tamamlandı.
</div>
<div class="notification is-danger is-light">
<button class="delete"></button>
Bir hata oluştu!
</div>