Bulma Bulma ist ein modernes Open-Source-CSS-Framework, das vollständig auf Flexbox basiert.
Responsive Breakpoints
768px 1024px 1216px 1408px
<---------^------------^------------------^-------------^------------->
Mobile Tablet Desktop Widescreen FullHD
- Mobile: bis 768px
- Tablet: ab 769px
- Desktop: ab 1024px
- Widescreen: ab 1216px
- FullHD: ab 1408px
Spalten-Grid-System
Schließen Sie untergeordnete .column-Elemente in einen .columns-Flex-Container ein:
<div class="columns">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>
Spaltenbreiten-Modifikatoren
<div class="column is-half">Halbe Breite</div>
<div class="column is-one-third">1/3 Breite</div>
<div class="column is-three-quarters">3/4 Breite</div>
<div class="column is-4">4 / 12 (1/3)</div>
Kernmodifikatoren
Farben
.is-primary: Türkis.is-link: Blau.is-info: Cyan.is-success: Grün.is-warning: Gelb.is-danger: Rot
Größen
.is-small.is-normal.is-medium.is-large
Zustände
.is-outlined: Transparenter Hintergrund mit farbigem Rahmen.is-loading: Eingebetteter animierter Lade-Spinner.is-disabled: Visuell inaktiv
Typografie-Helfer
Schriftgrößen
| Klasse | Berechnete Größe |
|---|---|
.is-size-1 |
3rem |
.is-size-2 |
2.5rem |
.is-size-3 |
2rem |
.is-size-4 |
1.5rem |
.is-size-5 |
1.25rem |
.is-size-6 |
1rem |
.is-size-7 |
0.75rem |
Ausrichtung & Texttransformation
.has-text-centered: Zentriert ausrichten.has-text-left: Linksbündig.has-text-right: Rechtsbündig.has-text-justified: Blocksatz.is-capitalized: Ersten Buchstaben jedes Wortes großschreiben.is-lowercase: Nur Kleinbuchstaben.is-uppercase: Nur Großbuchstaben
WYSIWYG-Content-Container
Verwenden Sie .content zur Formatierung von Rohtext, Markdown oder CMS-Inhalten:
<div class="content">
<h1>Haupttitel</h1>
<p>Standardabsatz mit automatischer typografischer Skalierung.</p>
<ul>
<li>Aufzählungspunkt 1</li>
<li>Aufzählungspunkt 2</li>
</ul>
</div>