İçerik
- 01. Başlayın
- 02. Bulma'yı yükleyin
- 03. Bir sayfa oluşturun
- 04. Üst düzey bir kahraman çubuğu oluşturun
- 05. Başlık ve altyazı ekleyin
- 06. Bir renk cümbüşü ekleyin
- 07. İçeriği sütunlara ayırın
- 08. Duyarlı görüntüler oluşturun
- 09. Düğmelerle eylem önerin
- 10. Kutulu içerik oluşturun
- 11. İkonik kutuları kullanın
- 12. Cesur olun
- 13. Seviyeleri değiştirin
- 14. Formları ekleyin ve kontrol edin
- 15. Kullanıcılara geri bildirimde bulunun
- 16. Altbilgi ekleyin
- 17. Değişkenleri özelleştirin
Bulma'yı kullanmaya başlamak ister misiniz? Doğru yerdesiniz. Bulma, basit bir flexbox grid sistemine sahip popüler bir CSS çerçevesidir. Daha hafif bir yaklaşım benimseyerek ve herhangi bir JavaScript içermemesiyle diğer çerçevelerden farklıdır - bu kararı tamamen geliştiriciye bırakır (diğer seçenekleri keşfetmek için en iyi CSS çerçeveleri seçimimize bakın).
Bu eğitimde Bulma'nın nasıl kurulacağını ve çeşitli sınıfları olan bir web sitesinin nasıl kurulacağını göstereceğiz. Bulma'da sınıfların ne kadar çok yönlü olduğunu kanıtlamak için eğitim sayfasının tamamı tek bir CSS satırı yazmadan oluşturuldu. Başka seçenekler mi istiyorsunuz? Mükemmel bir web sitesi oluşturucu deneyin. Sitenizin en iyi şekilde çalıştığından emin olmak için doğru web barındırma hizmetini seçin.
- Eğitim dosyalarını indirmek için tıklayın
CSS Oluştur, şehirdeki en sıcak web etkinliğidir. 20-22 Eylül tarihleri arasında kodu kullanarak yarı fiyatına bilet alabilirsiniz.FLASHSALE5. Daha fazlasını öğrenmek için resme tıklayın.
01. Başlayın
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 görüntü alanı etiketi ile basit bir başlangıç HTML belgesi oluşturun.
! DOCTYPE html> html> head> meta name = "viewport" content = "width = device-width, initial-scale = 1"> title> Sayfa Başlığı / title> / head> body> / body> / html>
02. Bulma'yı yükleyin
Bulma'yı kutudan çıkarmak, tek bir CSS dosyası eklemek kadar hızlıdır. CDN'yi kullanarak HTML'ye bir bağlantı ekleyin. Değişkenleri değiştirmek ve çerçeve üzerinde daha fazla kontrole sahip olmak gerekirse, npm Bulma yükle kullanılabilir (tam belgelere bakın). Tam deneyim için, font awesome 5 de eklenmelidir.
link rel = "stylesheet" href = ”https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css"> script defer src = "https: //use.fontawesome .com / release / v5.3.1 / js / all.js "> / script>
03. Bir sayfa oluşturun
Gövde etiketinin içinde, sınıfla bir bölüm öğesi ve bir div oluşturun konteyner. Kapsayıcı içinde, sınıfla bir h1 oluşturun Başlık sonra sınıfla bir paragraf alt yazı. Şimdilik, başlığa "merhaba dünya" ve paragrafa biraz metin girin. Artık Bulma için temel başlangıç şablonuna sahibiz.
section> div> h1> Hello World / h1> p> Bu, Bulma / p> / div> / section> için temel başlangıç şablonudur
04. Üst düzey bir kahraman çubuğu oluşturun
Bir öncekinin üzerine ve sınıfın yerine yeni bir bölüm yapın Bölüm, ona sınıfı ver kahraman. Kahraman sınıfı, yüksekliğini kontrol eden çeşitli seçeneklerle tam genişlikte bir afiş oluşturulmasına izin verir. Bu yeni bölümde sınıfla bir div oluşturun kahraman vücut ve sonra a konteyner bu içeriği tutacaktır.
bölüm> div> div> ... / div> / div> / div>
05. Başlık ve altyazı ekleyin
Div kapsayıcısının içine, sınıflarla bir h1 ve h2 etiketi ekleyin Başlık ve alt yazı. Bunlar, içeriklerinin boyutunu artıracak tipografi dersleridir. Bulma, bir başlığın ve alt başlığın ne zaman birleştirileceğini bilmek için akıllıdır ve onları birbirine yaklaştırır.
06. Bir renk cümbüşü ekleyin
Sınıfı ekleyin birincil kahraman bölümüne. Bu, birincil rengi arka plana uygular ve metni daha açık varyantla değiştirir. Onun yerine birincil, bilgi, başarı, uyarı, Tehlike, ışık ve karanlık ayrıca seçilebilir
07. İçeriği sütunlara ayırın
Web sitesinin ilk içerik alanı iki sütuna bölünmüştür. Sınıf bölümü ile yeni bir bölüm oluşturun ve bir kapsayıcı ekleyin. Sütunları ayarlamak için bir div eklenir sütunlar sınıf. Her sütun üst kapsayıcıya eklenir. Sütunlar, aksi belirtilmedikçe aralarında küçük bir boşluk bırakarak mevcut alanda kendilerini eşit aralıklarla yerleştirir.
Çok fazla içeriğiniz varsa varlıklarınızı güvenilir bulut depolamada yedeklediğinizden emin olun.
bölüm> div> div> div> ... / div> div> ... / div> / div> / div> / section>
08. Duyarlı görüntüler oluşturun
İkinci sütun bir görüntü içerecektir. Görüntüyü bir şekil öğesine sarın ve mümkünse şekle görüntünün en boy oranı için bir sınıf verin. Örnekte, 16by9 kullanıldı (mevcut oranların tam listesine bakın).
div> şekil> img src = "img / köpek.webp"> / şekil> / div>
09. Düğmelerle eylem önerin
Düğme sınıfı renkli düğmeler oluşturur ve uygulanabilir a> elementler veya düğmesi> İlk sütuna iki düğme ekleyin ve bunlara renk değiştiriciler uygulayın. Birden fazla düğme kullanıyorsanız, bunları sınıfla birlikte bir div'e sarın düğmeler, bu boşluğu düzeltir ve sınıfların grup olarak uygulanmasına izin verir.
div> a> Daha fazlasını öğrenin / a> a> Şimdi satın alın / a> / div>
10. Kutulu içerik oluşturun
Sayfanın altına üç sütunlu yeni bir bölüm ekleyin. Sütunların içine bir kutu elemanı eklenir. Kutu öğeleri, etraflarında kendilerini bir sayfanın arka planından ayıran bir kenarlığa sahip basit kaplardır.
11. İkonik kutuları kullanın
Bulma, Font Awesome 5 ile bütünleşir, ancak tüm font kitaplıklarıyla uyumludur ve mevcut simgelerin çoğunu çağırmak için sınıflara sahiptir. Her kutunun içine, bir içerik kapsayıcısı ve ardından sınıfla birlikte bir span öğesi ekleyin ikon. Aralık içinde, bir i> istenen simge için gerekli sınıfları çağırmak için eleman. Simgeler, metinle aynı şekilde renklendirilir.
div> span> i> / i> / span> div> ... / div> div> ... / div> / div>
12. Cesur olun
Sayfanın altında iki sütunlu yeni bir kahraman bölümü oluşturun. is-info bölüme sınıf. İlginç bir etki için, ayrıca kalın ince bir gradyan için bu bölüme sınıflayın. Bu değiştirici yedi ana rengin tamamıyla çalışır.
13. Seviyeleri değiştirin
Düzeyler, öğelerin arka arkaya dikey olarak ortalanmasını sağlamanın harika bir yoludur. Sayfanın altındaki yeni bir bölümde, seviye sınıfıyla bir div ekleyin ve dört seviye öğesinin içine yerleştirin. Bir seviye öğesine eklenen herhangi bir içerik dikey olarak hizalanacaktır.
div> div> ... / div> div> ... / div> / div>
14. Formları ekleyin ve kontrol edin
Sayfanın altına bir form eklemek için, iki sütunlu yeni bir kahraman bölümü oluşturun. birincil. İki sütuna bölün ve sağ sütunda bir alan sınıf. Alan sınıfı, birkaç form girdisini bir arada gruplandırmak ve bunların doğru aralıklarla yerleştirilmesini sağlamak için kullanılır. Her girdi ayrıca bir kişiye sarılmalıdır .kontrol sınıf.
div> div> input type = "email" placeholder = "E-postanız"> span> i> / i> / span> / div> / div>
15. Kullanıcılara geri bildirimde bulunun
Bir form gönderildikten sonra, daha sonra ne olacağını bilmeleri için kullanıcılara bir mesaj göndermelidir. Bulma bu mesajın ne zaman görüntüleneceğini kontrol edemese de, ön uç mesaj sınıfıyla oluşturulabilir.
makale> div> p> Teşekkürler! / p> / div> div> ... / div> / article>
16. Altbilgi ekleyin
Esnek altbilgi sınıfı, herhangi bir öğenin bir sayfanın altına eklenmesine izin vererek telif hakkı bilgileri ve alt gezinme için bir yer sağlar ve aynı zamanda web sitesine bir bitiş getirir.
altbilgi> div> p> ... / p> / div> / altbilgi>
17. Değişkenleri özelleştirin
Prototiplerin ötesinde, çoğu projenin bir marka yönergesi ve renklerle çalışma gereksinimi olacaktır. Benzer şekilde, bir tasarımcının Bulma'nın yazı tiplerini, renklerini veya diğer yönlerini değiştirmesi gerekeceğini varsaymak da güvenlidir. Bulma'nın büyük bir kısmı, özelleştirilebilir ve modüler olmasıdır. Yalnızca modüller seçici olarak içe aktarılamaz, aynı zamanda çerçeve içinde 415'e kadar Sass değişkeni değiştirilebilir.
Değişkenlerin kullanımı, yeni bir rengin birincil olarak ayarlanması, bu rengi o proje için Bulma çerçevesinin tamamında değiştireceği anlamına gelir. Bunu ayarlamak ilk başta zor olabilir, ancak dokümantasyonda üç farklı yöntem kullanılarak kılavuzlar sağlanmıştır.
Bu makale ilk olarak yaratıcı web tasarım dergisinin 289. sayısında yayınlandı. Web tasarımcısı. Sorunu satın al 289 veya abone olun.
