Bulma ile başlayın

Sep 14, 2025

Nasıl Yapılır

(Resim Kredisi: Bulma)

Bulma kullanarak başlamak ister misiniz? Doğru yerdesin. Bulma, basit bir FlexBox ızgarası sistemine sahip popüler bir CSS çerçevesidir. Daha hafif bir yaklaşım alarak ve herhangi bir JavaScript dahil değil - bu kararı tamamen geliştiriciye bırakmak (diğer seçenekleri keşfetmek, bizim seçim yapmak için, En İyi CSS Çerçeveleri ).

Bu eğitimde, Bulma'nın nasıl kurulacağını göstereceğiz ve çeşitli sınıflarıyla bir web sitesi oluşturacağız. Sınıfların Bulma'da ne kadar yönlü olduğunu kanıtlamak için, tüm öğretici sayfası, tek bir CSS hattını yazmadan oluşturulmuştur. Başka seçenekleri ister misin? Mükemmel bir deneyin Web Sitesi Oluşturucu . Ve sitenizin en iyi şekilde çalıştığından emin olmak için doğru seçin ağ sağlayıcısı hizmet.

Eğitim dosyalarını indirmek için tıklayın

Generate flash sale — (Görüntü Kredi: Gelecek)

CSS üretmek, şehirdeki en sıcak web etkinliğidir. 20-22 Eylül arasında, kodu kullanarak yarı fiyatına bir bilet alabilirsiniz. Flashsale5. Daha fazla bilgi edinmek için resme tıklayın.

01. Başlayın

Bulma: get started — (Resim Kredisi: Bulma)

Yeni bir dizin oluşturun ve içinde, bir index.html dosya. Bu dosyayı bir kod düzenleyicide açın ve bir DocType HTML ve Duyarlı Bir ViewPort Etiketi ile basit bir başlangıç HTML belgesi oluşturun.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; meta adı = "viewport" içeriği =
"Genişlik = cihaz genişliği, ilk ölçek = 1" & gt;
& lt; unvan & gt; sayfa başlığı & lt; / unvanı ve gt;
/ head & gt;
& lt; vücut ve gt;
& lt; / body & gt;
& lt; / html & gt;

02. Bulma'yı yükleyin

Bulma'yı kullanarak kutu tek bir CSS dosyası eklemek kadar hızlıdır. CDN'yi kullanma HTML'de bir bağlantı ekleyin. Değişkenleri değiştirmek gerekirse ve çerçeve üzerinde daha fazla kontrol sahibi olursa, npm yükleme bulma kullanılabilir (bkz. Tam belgeler ). Tam deneyim için, Font Awesome 5 de dahil edilmelidir.

 & LINK REL = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.cssss" & gt;
& lt; script erteleme src = "https://use.fontawesome.com/releres/v5.3.1/js/all.js" & gt;

03. Bir sayfa oluştur

Bulma: hello world — (Resim Kredisi: Bulma)

Vücut etiketinin içinde, bir bölüm öğesi oluşturun ve sınıfa bir DIV oluşturun. konteyner . Konteyner içinde, sınıfla bir H1 oluşturun Başlık sonra sınıfa sahip bir paragraf alt yazı . Şimdilik, 'Hello World' in başlığına ve bir metnin paragrafına girin. Şimdi Bulma için temel başlangıç şablonumuz var.

 & lt; bölüm sınıfı = "bölüm" & gt;
& lt; div sınıf = "konteyner" & gt;
& lt; h1 sınıfı = "başlık" & gt;
Selam Dünya
& lt; / h1 & gt;
& lt; p sınıf = "altyazı" & gt;
Bu temel marş
Bulma için şablon
& lt; / p & gt;
& lt; / div & gt;
& lt; / section & gt;

04. Bir üst kahraman çubuğu oluşturun

Öncekinin üstünde yeni bir bölüm yapın ve sınıf yerine Bölüm , sınıfa ver kahraman . Kahraman sınıfı, yüksekliğini kontrol eden çeşitli seçeneklerle tam genişlikte bir afişin oluşturulmasına izin verir. Bu yeni bölümde sınıfa bir div oluşturun kahraman gövdesi ve sonra bir konteyner Bu içeriği tutacaktır.

 & lt; bölüm sınıfı = "kahraman" & gt;
& lt; div sınıf = "kahraman gövdesi" & gt;
& lt; div sınıf = "konteyner" & gt; ... ... / div & gt;
& lt; / div & gt;
& lt; / div & gt;

05. Başlık ve altyazı ekleyin

Konteynır Divide, sınıflara sahip bir H1 ve H2 etiketi ekleyin. Başlık ve alt yazı . Bunlar içeriğinin boyutunu artıracak tipografi sınıflarıdır. Bulma, bir başlık ve altyazı ne zaman birleştirildiğinde bilmek akıllıca ve bunları birbirine daha yakın getirecek.

06. Renkli bir sıçrama ekleyin

Sınıfı ekle birincil Kahraman bölümüne. Bu, birincil rengi arka plana uygular ve metni daha hafif varyantla değiştirecektir. Onun yerine birincil , bilgi , başarı , uyarı , Tehlike , ışık ve karanlık ayrıca seçilebilir

 & lt; bölüm sınıfı = "kahramandır - birincil" & gt;

07. İçeriği sütunlara bölün

Web sitesinin ilk içerik alanı iki sütuna bölünür. Sınıf bölümüyle yeni bir bölüm yapın ve bir konteyner ekleyin. Sütunları ayarlamak için bir DIV eklenir sütunlar sınıf. Her sütun ana kapta eklenir. Sütunlar, belirli bir boşlukta, belirtilmediği sürece küçük bir boşlukla kendilerini eşit olarak alacaktır.

Çok fazla içeriğiniz varsa, varlıklarınızı güvenilir bulut depolamada geri döndürdüğünüzden emin olun.

 & lt; bölüm sınıfı = "bölüm" & gt;
& lt; div sınıf = "konteyner" & gt;
& lt; div sınıf = "sütunlar vcentered" & gt;
& lt; div sınıf = "sütun" & gt;
...
& lt; / div & gt;
& lt; div sınıf = "sütun" & gt;
...
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / section & gt;

08. Duyarlı görüntüler oluşturun

Bulma: responsive images — (Resim Kredisi: Bulma)

İkinci sütun bir görüntü içerecektir. Resmi bir şekil elemanına sarın ve mümkünse, şeklin görüntünün en boy oranının bir sınıfını verin. Örneğin, 16by9 kullanılmıştır (bkz. Mevcut oranların tam listesi ).

 & LT; DIV sınıfı = "sütun" & gt;
& lt; Şekil Sınıfı = "Görüntü IS-16BY9" & GT;
& lt; img src = "img / dog.jpg" & gt;
& lt; / figure & gt;
& lt; / div & gt;

09. Düğmelerle eylem öner

Düğme sınıfı renkli düğmeler oluşturur ve uygulanabilir & lt; a & gt; elemanlar veya & lt; button & gt; formlardaki elemanlar. İlk sütuna iki düğme ve renk değiştiricileri uygulayın. Birden fazla düğme kullanıyorsanız, bunları sınıfa bir div içine sarın. düğmeler , boşluğu düzeltir ve sınıfların bir grup olarak uygulanmasına izin verir.

 & lt; div class = "düğmeleri" & gt;
& lt; a sınıfı = "düğmesi IS-Info" & gt;
Daha fazlasını öğrenin; / a & gt;
& lt; bir sınıf = "düğmesi, tehlike belirtilmiştir" ve GT;
Şimdi satın al & lt; / a & gt;
& lt; / div & gt;

10. Kutulu içerik oluşturun

Bulma: boxed content — (Resim Kredisi: Bulma)

Sayfanın altına üç sütunla yeni bir bölüm ekleyin. Sütunlar içinde bir kutu elemanı eklenir. Kutu elemanları, etraflarındaki kenarları bir sayfanın arka planından ayıran basit kaplardır.

 & LT; DIV sınıfı = "sütun" & gt;
& lt; div class = "box" & gt;
Ölçek
& lt; / div & gt;
& lt; / div & gt;

11. İkonik kutuları kullanın

Bulma, Font Awesome 5 ile bütünleşir, ancak tüm yazı tipi kütüphaneleriyle uyumludur ve en uygun simgeleri aramak için sınıflara sahiptir. Her kutunun içinde bir içerik kabı ekleyin, ardından sınıfa sahip bir açıklık öğesi simge . Açıklığın içinde & lt; i & gt; İstediğiniz simge için gerekli sınıfları aramak için öğe. Simgeler metinle aynı şekilde renklidir.

 & lt; div class = "içeriği" & gt;
& lt; span sınıfı = "icon" & gt;
& lt; i sınıf = "FAS FA-LG FA-HOME
metin-başarı "ve gt; / i & gt;
& lt; / span & gt;
& LT; DIV sınıfı = "başlık boyutu-6" & gt; ... / div & gt;
& lt; div sınıf = "altyazı boyutu-6" & gt; ... ... / div & gt;
& lt; / div & gt;

12. Kalın Olun

Sayfanın altındaki yeni bir iki sütunlu kahraman bölümü oluşturun, bilgi bölüme sınıf. İlginç bir etki için de uygulayın cesur İnce bir gradyan için bu bölüme sınıf. Bu değiştirici, ana renklerin tümü tümüyle çalışır.

13. Seviyeleri değiştirin

Seviyeler, elemanların bir üst üste dikey olarak merkezli olmasını sağlamak için harika bir yoldur. Sayfanın altındaki yeni bir bölümde, seviye sınıfına bir DIV ekleyin ve dört seviye öğenin içindeki yuva ekleyin. Seviye bir öğeye eklenen herhangi bir içerik dikey olarak hizalanır.

& lt; div sınıf = "seviye" & gt;
& lt; DIV sınıfı = "Seviye-Öğe Metin Merkezi" ve GT;
...
& lt; / div & gt;
& lt; DIV sınıfı = "Seviye-Öğe Metin Merkezi" ve GT;
...
& lt; / div & gt;
& lt; / div & gt;

14. Formları ekleyin ve kontrol edin

Sayfanın altına bir form eklemek için, ile yeni bir iki sütunlu kahraman bölümü yapın. birincil . İki sütuna bölün ve doğru sütunda, bir alan sınıf. Alan sınıfı, birkaç form girişini bir araya getirmek için kullanılır, doğru şekilde yerleştirildiler. Her giriş de bir bireye sarılmalıdır .kontrol sınıf.

 & LT; DIV sınıfı = "alan" & gt;
& lt; div class = "Kontrol has-simgeleri - sol
var-simgeler-sağ "& gt;
& lt; giriş sınıfı = "giriş" Type = "e-posta"
Yer tutucu = "E-postanız" & gt;
& lt; span sınıfı = "simgesidir
sol "& gt;
& lt; i Sınıf = "FAS FA-Zarfı" & GT; & GT;
& lt; / span & gt;
& lt; / div & gt;
& lt; / div & gt;

15. Kullanıcılara geri bildirim verin

Bulma: feedback — (Resim Kredisi: Bulma)

Bir form gönderildiğinde, kullanıcılara bir mesaj döndürmelidir, böylece bir sonraki ne olduğunu bileceklerdir. Bu mesaj görüntülendiğinde Bulma kontrol edememektedir, ön uç, Message sınıfı ile oluşturulabilir.

 & lt; makale sınıfı = "Mesaj IS-Info" & gt;
& lt; div sınıf = "mesaj başlığı" & gt;
& lt; p & gt; teşekkür ederim! & lt; / p & gt;
& lt; / div & gt;
& lt; div sınıf = "mesaj gövdesi" & gt;
... & lt; / div & gt;
& lt; / makale & gt;

16. Bir altbilgi ekleyin

Esnek altbilgi sınıfı, bir sayfanın altına herhangi bir öğenin eklenmesini, telif hakkı bilgisi ve alt navigasyon için bir yer sağlayan ve ayrıca web sitesine bir bitirmek için bir yer sağlanmasını sağlar.

 & lt; footer sınıfı = "altbilgi" & gt;
& LT; DIV sınıfı = "içeriğe metin odaklı" ve GT;
& lt; p & gt; ... / p & gt;
& lt; / div & gt;
& lt; / footer & gt;

17. Değişkenleri özelleştirin

Çoğu proje, prototiplerin ötesinde, bir marka kılavuzu ve renklerle çalışmak için bir gereksinimi olacaktır. Benzer şekilde, bir tasarımanın bulma fontlarını, renklerini veya diğer yönlerini değiştirmesi gerekeceğini varsaymak güvenlidir. Bulma'nın büyük bir kısmı, özelleştirilebilir ve modüler olmasıdır. Sadece modüller seçici olarak içe aktarılamaz, ancak 415'e kadar SASS değişkeni çerçevede değiştirilebilir.

Değişkenlerin kullanımı, birincil bu rengi bu projenin tüm bulma çerçevesindeki tüm bulma çerçevesinde değiştireceği için yeni bir renk belirlemek anlamına gelir. Bunu ayarlamak ilk başta zor olabilir, ancak kılavuzlar kullanılarak sağlanmıştır. Üç farklı yöntem belgelerde.

Bu makale başlangıçta yaratıcı web tasarım dergisinin 289 sayısında yayınlandı. Web tasarımcısı . Sayı satın al 289 veya abone olun .

Daha fazla oku:

5 ilham verici web tasarım vaka çalışmaları
En iyi UI tasarım araçları
Master minimalist web sitesi tasarımı

Bulma ile başlayın

01. Başlayın

02. Bulma'yı yükleyin

03. Bir sayfa oluştur

04. Bir üst kahraman çubuğu oluşturun

05. Başlık ve altyazı ekleyin

06. Renkli bir sıçrama ekleyin

07. İçeriği sütunlara bölün

08. Duyarlı görüntüler oluşturun

09. Düğmelerle eylem öner

10. Kutulu içerik oluşturun

11. İkonik kutuları kullanın

12. Kalın Olun

13. Seviyeleri değiştirin

14. Formları ekleyin ve kontrol edin

15. Kullanıcılara geri bildirim verin

16. Bir altbilgi ekleyin

17. Değişkenleri özelleştirin

Nasıl Yapılır - En Popüler Makaleler

JamStack: Bugün daha hızlı, daha verimli web siteleri oluşturun

Adobe Illustrator'da perspektif oluşturun

InDesign'da özel baskı işlemi oluşturun

Google'ın flutteriyle çapraz platform mobil uygulamaları oluşturun

3 kolay adımda boyamak için bir tahta hazırlayın

BBC'nin performans güçlendiricisinde önbellek

Photoshop'ta bir Snapchat Geofilter Nasıl Oluşturulur

3D Saç ve Kürk Nasıl Oluşturulur

Kategoriler