Bulma - Hızlı Kılavuz

Bulma nedir?

Bulma, flexbox modülüne bağlı olan açık kaynaklı, basit ve modern bir CSS çerçevesidir (duyarlı düzen yapısı geliştirmek için kullanılır).

Tarih

Bulma 2016 yılında yayınlandı ve MIT lisansı altında dağıtıldı. Bulma'nın güncel sürümü 0.7.1, 18 Nisan 2018'de yayınlandı.

Bulma neden kullanılmalı?

Bulma'nın öğrenilmesi ve ayarlanması çok kolaydır. O ile inşa edilmiştir SASS ve 39 bölü .sass dosyaları. Kod, ayrı dosyalara bölünerek kolayca özelleştirilebilir ve beklenen sonucu elde etmek için uygulama bölümünün özelleştirilmesine izin verir.

Özellikleri

• Flexbox kullanan hafif, modern bir CSS çerçevesidir.

• Ayrı dosyalar yerine tek bir dosyada mobil ilk stilleri içerir.

• Özelleştirilebilir ve modülerleştirilebilir.

Avantajlar

• Masaüstü bilgisayarlar, tabletler ve cep telefonları için duyarlı tasarım sağlar.

• AngularJS, ReactJS vb. Gibi herhangi bir JavaScript çerçevesiyle birleştirebilmeniz için saf CSS çerçevesidir.

• Kodu okumayı ve yazmayı kolaylaştıran minimum HTML kodu kullanır.

Dezavantajları

• Bir topluluk kadar geniş olmayan yeni bir çerçevedir.

• Daha az dokümantasyona sahiptir ve biraz iyileştirmeye ihtiyaç duyar.

• Bu çerçeve hala geliştirme aşamasındadır.

Açıklama

Bulma, flexbox modülüne dayanan hafif, modern bir CSS çerçevesidir (duyarlı düzen yapısı ve süslü tasarımlar geliştirmek için kullanılır).

Bulma'ya genel bakış, Bulma'yı kullanmaya başlama, yanıt verme (web sayfalarını masaüstleri, tabletler ve telefonlar gibi farklı cihazlarda görüntüleyebilirsiniz), renkler, renkleri ve değerleri tanımlama işlevleri ve karışımları (size izin veren CSS özellikleri grubu) içerir. Bulma'da bir sınıfın özelliklerini başka bir sınıf için kullanmak için).

Aşağıdaki tablo, Bulma CSS'yi kullanmak için kullanabileceğiniz farklı türdeki yardımcı programları listelemektedir -

S.No.	Yardımcı Program ve Açıklama
1	Bulma'ya başlarken Bulma ile bir css dosyası kullanarak başlayabilirsiniz.
2	Duyarlılık ve Renkler Büyük, küçük ve orta büyüklükteki cihazlarla birleştirilebilen mobil uyumlu bir geliştirmedir.
3	Fonksiyonlar ve Karışımlar Bulma, sırasıyla değerleri ve öğeleri tanımlamak için bazı işlevleri ve karışımları kullanır.

Açıklama

Bulma'daki değiştiriciler, sınıfları kullanarak öğeler için alternatif stiller, stilleri değiştirmek için duyarlı sınıflar, öğelerin rengini değiştirmek için renk yardımcıları, metnin boyutunu ve rengini değiştirmek için tipografi yardımcıları içerir.

Aşağıdaki tablo, Bulma CSS'yi kullanmak için kullanabileceğiniz farklı tür değiştiricileri listelemektedir -

S.No.	Değiştiriciler ve Açıklama
1	Değiştiriciler sözdizimi ve Duyarlı Yardımcıları Değiştirici sınıfları kullanarak öğeler için alternatif stiller oluşturabilirsiniz.
2	Renk ve Tipografi Yardımcıları Metnin veya arka planın rengini değiştirmek için renk yardımcılarını kullanabilirsiniz.

Açıklama

Bulma, bir konteyner içinde 12 sütuna kadar ölçeklendiren duyarlı ızgara sistemi (bir dizi satır ve sütun aracılığıyla sayfa düzeni oluşturma) sağlar. Cihaz veya görüntü alanı boyutu arttıkça sütunlar yeniden düzenlenecektir.

Aşağıdaki tablo, Bulma CSS'yi kullanmak için kullanabileceğiniz sütun çeşitlerini listelemektedir -

S.No.	Sütun Türleri ve Açıklama
1	Sütun düzeni ve Boyutlar Bulma , konteynere sütun sınıfı ekleyerek çok kolay bir şekilde sütun düzeni oluşturmaya izin verir .
2	Sütun Duyarlılığı ve Yerleştirme Bulma, mobil cihazlar, tabletler ve masaüstü gibi farklı ekran türlerinde duyarlı sütunlar sağlar.
3	Sütun Boşluğu ve Seçenekler Sütunlar, sütun içeriği arasında eşit boşluk oluşturur.

Açıklama

Bulma düzeni, CSS sınıfları kullanılarak tasarlanan web sayfasının yapısını açıklar.

Aşağıdaki tablo, Bulma CSS'yi kullanmak için kullanabileceğiniz düzen çeşitlerini listelemektedir -

S.No.	Düzen Türleri ve Açıklama
1	Konteyner ve Seviyeler Bulma, temel düzeni temsil etmek ve site içeriğini sarmak için kapsayıcılar kullanır.
2	Medya Nesnesi Medya nesnesi, çeşitli bileşen türlerini oluşturmak için soyut nesne stillerini belirtmek için kullanılır.
3	Kahraman afişi Bulma, web sayfasına tam genişlikteki başlığı belirtmek için kahraman başlığı sağlar.
4	Fayans Bulma, tek bir eleman sınıfı kullanarak 2 boyutlu düzen oluşturur.

Açıklama

Bulma form öğesi, giriş öğelerini (metin alanları, onay kutuları, radyo düğmeleri ve daha fazlası gibi) kullanarak kullanıcı giriş verilerini belirtir ve verileri işlemek için bir sunucuya gönderir.

Aşağıdaki tablo, Bulma CSS'yi kullanmak için kullanabileceğiniz form çeşitlerini listelemektedir -

S.No.	Form Türleri ve Açıklama
1	Form kontrolleri Bulma, çeşitli formlar oluşturmak için farklı form kontrol sınıfları içerir.
2	Giriş Bulma, farklı varyasyon türleriyle birlikte kullanıcı verilerini girmek için giriş alanı sağlar.
3	Metin alanı Bulma metin alanı, birden çok satır girişine ihtiyacınız olduğunda kullanılır.
4	Seçiniz Bulma seçimi, kullanıcının birden çok seçenek arasından seçim yapmasına izin vermek istediğinizde kullanılır.
5	Onay Kutusu ve Radyo Onay kutuları ve radyo düğmeleri, kullanıcıların önceden ayarlanmış seçenekler listesinden seçim yapmasını istediğinizde kullanılabilir.
6	Dosya Dosyaları kullanıcı verilerinden yüklemek için kullanılır.

Açıklama

Bulma, görüntüyü belirtmek için kap, düğme öğesi, görüntü kabı, tablo öğesi vb. Olarak kullanılabilen kutu öğesi gibi farklı türde öğeler sağlar.

Aşağıdaki tablo, Bulma CSS'yi kullanmak için kullanabileceğiniz öğelerin çeşitlerini listelemektedir -

S.No.	Form Türleri ve Açıklama
1	Buton Bir düğme öğesi, özel düğme stilleriyle kullanıcı etkileşimi sağlar.
2	İçerik Bulma, içerik sınıfının HTML etiketlerini doğrudan kullanmasını sağlar .
3	Kutu ve Simge .Box sınıfı, bir sınır yarıçap ve dolgu içeren bir kabı tanımlar.
4	Resim Bulma, sayfadaki görüntüleri görüntülemek için .image sınıfını kullanır .
5	Bildirim ve İlerleme çubukları Bulma, bildirimi görüntülemek için önceden tanımlanmış uyarı mesajlarını belirtir.
6	Tablo Bulma, verileri tablo biçiminde görüntülemek için öğeleri sarar.
7	Etiket ve Başlık Bulma, ek bilgileri görüntülemek için etiketler adı verilen küçük etiketler sağlar.

Açıklama

Bulma, sayfada kullanıcı deneyimini kolaylaştırmak için açılır menüler, modal, sayfalandırma, navbar, sekmeler vb.

Aşağıdaki tablo, Bulma CSS'yi kullanmak için kullanabileceğiniz bileşen çeşitlerini listelemektedir -

S.No.	Bileşen Açıklaması
1	Kırıntı Bulma, geçerli sayfanın konumunu uygulamadaki kullanıcıya belirtmek için gezinme yöntemi olarak içerik haritası bileşenini kullanır.
2	Kart Kart bileşeni, daha iyi görünüm için içeriği bir kutu içinde görüntüler.
3	Yıkılmak Bulma, ilgili bağlantıları bir liste biçiminde görüntülemek için değiştirilebilir açılır menüler sağlar.
4	İleti Bulma, sayfanızın görünümünü iyileştirmek için mesaj blokları sağlar.
5	Modal Modal, ana penceresinin üzerine yerleştirilmiş bir alt penceredir.
6	Navbar Gezinme çubukları, siteniz için gezinme başlıkları görevi görür.
7	Sayfalandırma Sayfalandırma bileşeni, birden çok sayfada bir dizi ilgili bağlantı sağlar.
8	Sekmeler Bulma, içeriği görüntülemek için farklı stillere sahip sekmeli gezinme menüsü sağlar.