Bootstrap Nedir

Bootstrap dünyanın en popüler, açık kaynak kodlu, ücretsiz, farklı cihazlar için responsive tasarıma duyarlı bir CSS Framework(kütüphane)'üdür.
İçerisinde mevcut olan sayısız tablo, grafik, ikon, carousel, navigasyon gibi pek çok hazır tasarım sayesinde sitenizi kolayca tasarlayabilirsiniz.
Ayrıca Bootstrap‘in kullandığı Grid (Izgara) sistemi ile sitenizi istediğiniz bölümde konumlandırabilirsiniz. Bu özellik, ekranı dilediğiniz ölçüde bölüp, ayırdığınız bu kısımlara kolayca müdahale etmenizi sağlamaktadır.

Bootstrap 4 vs 5

4 de kullanılan (l) left yerini (s) starta, (r) right yerini (e) end e bıraktı.

12'lik Grid Sistemini Anlamak

Kapsayıcı (.container)

Container: Sayfanın belirli bir kısmını kaplar. İçeriğin sayfanın istenilen tarafında (genelde orta hatta) tutulmasını sağlar.
Sayfanın tamamını kaplayan containerlara container-fluid (akışkan konteynır) denir

Izgara sistemi

Bölümlerin hayali olarak bölünmesini sağlar
Örnek için: 960.gs

Bootstrap 12lik sistem kullanır

Satırlar(.row)

12lik sistemi bölebilmek için kullanılır

Kolonlar(col-)

12lik gridin her bir parçası

Kolon genişliği: div.class="col-..."
col(kolon genişliği)
col-5: 5li kolon
col-12: tam satır kolon
col: 1li kolon
Satırda kolon sıralaması: div class="col-1 order-3"
order-(sıra numarası)
order-1: birinci sıra
order-5: 5. sıra
order-2: 2. sıra
Kolonlar arası boşluk: div.class="col ms-auto"
ms-auto: başlangıç yönünde (standartta solda) boşluk
me-auto: bitiş yönünde (standartta sağda) boşluk

Bootstrap Örnekleri

Ekran Çözünürlüğüne Göre Kolon Ayarlamak

Lorem, ipsum.
Ex, labore.
Iusto, recusandae.
Odit, facilis.
Facere, hic.
Vitae, accusamus.

Satır Blokları (Row) Kullanımı

Lorem.

Lorem ipsum dolor sit.

Lorem ipsum dolor sit.

Lorem ipsum dolor sit.

Lorem ipsum dolor sit.

Lorem ipsum dolor sit.

Lorem ipsum dolor sit.

Renk Paleti

Bootstrap renk ayarlarını class ile veriyor.
Renk paletini buradan seçip CSS dosyasından bootsrap'ın renk classlarını düzenleyebiliriz

Tipografi

Bootsrapın sitesinde typograpy kısmından bakılabilir.
inline listeyi yan yana sıralamak için .list-inline clası atanır

Margin ve Padding

responsive yapı kurulabilir: mt-sm-3 vs.

m: margin
p: padding
t: top
b: bottom
s: start
e: end
x: x ekseni
y: y ekseni

Display Örneği

Bazı ekran boyutlarında elementin görünmesini veya bazı ekran boyutlarında görünmemesini sağlamak için kullanılır. Aşağıdaki örneği anlamak için ekran boyutunu değiştirin

.d-none: "gösterme" demek

.d-block: "göster" demek

XS - Mobil Görünümlü Sitemize Hoşgeldiniz

SM - Tablet Görünümlü Sitemize Hoşgeldiniz

MD - Laptop Görünümlü Sitemize Hoşgeldiniz

LG - Normal Görünümlü Sitemize Hoşgeldiniz

XL - Büyük Ekran Görünümlü Sitemize Hoşgeldiniz

Lorem.
At.
Amet?
Consequatur.
Voluptates!
A!

.offset

.offset kolonun iki yanında kaç kolon boşluk olacağını belirtir. .offset + .col toplam 12 olmalıdır. İçinde yer aldığımız örnek: .offset-4.col-4

Order

.order-(sıra numarası) ile order numarası verilebilir

responsive yapı oluşturularak .order-(responsive)-(sıra numarası) klası ile sıranın ekran boyutuna göre değişmesi sağlanabilir

SM ekranda İlk kart.

mobile ekranda son kart

SM ekranda İlk kart.

SM ekranda ikinci kart.

mobile ekranda ilk kart

SM ekranda ikinci kart.

SM ekranda son kart.

mobile ekranda ortanca kart

SM ekranda son kart.

Bootstrap Components

Companentler için detaylı bilgi için tıklayın

Accordion

Sizlere açılır kapanır başlıklar yapmanıza olanak tanıyan bir component. Akordiyon müzik aletine benzediği için bu ismi almış.

Collapse JavaScript eklentimizle birlikte dikey olarak çöken akordeonlar oluşturun.

Akordeonları ana kaplarıyla uçtan uca oluşturmak için varsayılan arka plan rengini, bazı kenarlıkları ve bazı yuvarlatılmış köşeleri kaldırmak için .accordion-flush ekleyin.

Akordeon öğelerinin başka bir öğe açıldığında açık kalmasını sağlamak için her .accordion-collapse'ta data-bs-parent niteliğini atlayın.

Daha fazla bilgi için lütfen daraltma erişilebilirlik bölümünü okuyun.

getbootstrap.com -> Accordion

Allert

Bir avuç kullanılabilir ve esnek uyarı mesajıyla tipik kullanıcı eylemleri için bağlamsal geri bildirim mesajları sağlayın.

Herhangi bir metin uzunluğu için uyarılar ve isteğe bağlı bir kapatma düğmesi mevcuttur. Uygun stil için, gerekli sekiz bağlamsal sınıftan birini kullanın (ör. .alert-success). Satır içi işten çıkarma için uyarılar JavaScript eklentisini kullanın.

Yardımcı teknolojilere anlam taşıma

Renkleri anlam eklemek için kullanmak yalnızca görsel bir gösterge sağlar ve ekran okuyucular gibi yardımcı teknolojilerin kullanıcılarına iletilmez. Renkle gösterilen bilgilerin ya içeriğin kendisinden (ör. görünen metin) açıkça anlaşıldığından veya .visually-hidden sınıfıyla gizlenmiş ek metin gibi alternatif yollarla dahil edildiğinden emin olun.

JS kullanımını öğrendiğimizde allertler daha kullanışlı olacaktır.

Badge

Rozetler, göreli yazı tipi boyutlandırması ve em birimleri kullanılarak hemen üst öğenin boyutuna uyacak şekilde ölçeklenir.





Buttons

Birden çok boyut, durum ve daha fazlasını destekleyen formlardaki, iletişim kutularındaki ve daha fazlasındaki eylemler için Bootstrap'in özel düğme stillerini kullanın.

Yardımcı teknolojilere anlam taşıma

Renkleri anlam eklemek için kullanmak yalnızca görsel bir gösterge sağlar ve ekran okuyucular gibi yardımcı teknolojilerin kullanıcılarına iletilmez. Renkle gösterilen bilgilerin ya içeriğin kendisinden (ör. görünen metin) açıkça anlaşıldığından veya .visually-hidden sınıfıyla gizlenmiş ek metin gibi alternatif yollarla dahil edildiğinden emin olun.

Button Group

Bir dizi düğmeyi tek bir satırda gruplayın veya dikey bir sütunda istifleyin.

Card

Bootstrap kartları, birden çok değişken ve seçenek içeren esnek ve genişletilebilir bir içerik kapsayıcısı sağlar.

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • An item
  • A second item
  • A third item
Card link Another link

Close Button

Modeller ve uyarılar gibi içerikleri kapatmak için genel bir kapat düğmesi.

Collapse

Daraltma JavaScript eklentisi, içeriği göstermek ve gizlemek için kullanılır. Düğmeler veya çapalar, geçiş yaptığınız belirli öğelerle eşlenen tetikleyiciler olarak kullanılır. Bir öğeyi daraltmak, yüksekliği geçerli değerinden 0'a canlandıracaktır. CSS'nin animasyonları nasıl işlediği göz önüne alındığında, bir .collapse öğesinde dolgu kullanamazsınız. Bunun yerine, sınıfı bağımsız bir sarma öğesi olarak kullanın.

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

List Group

Liste grupları, bir dizi içeriği görüntülemek için esnek ve güçlü bir bileşendir. Bunları, içindeki hemen hemen her içeriği destekleyecek şekilde değiştirin ve genişletin.

The current link item A second link item A third link item A fourth link item A disabled link item

Offcanvas

Birkaç sınıf ve JavaScript eklentimizle gezinme, alışveriş sepetleri ve daha fazlası için projenize gizli kenar çubukları oluşturur

Offcanvas, görünümün sol, sağ, üst veya alt kenarından görünmesi için JavaScript aracılığıyla değiştirilebilen bir kenar çubuğu bileşenidir. Düğmeler veya çapalar, değiştirdiğiniz belirli öğelere eklenen tetikleyiciler olarak kullanılır ve JavaScript'imizi çağırmak için veri öznitelikleri kullanılır.

Burası Gizli Menü. Kanvasın dışında kalan alan

Buraya menü gelecek

Placeholders

Bir şeyin hala yüklenmekte olduğunu belirtmek için bileşenleriniz veya sayfalarınız için yükleme yer tutucuları kullanılır

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Popovers

Daha sonra incelenecek

Progress

İlerleme bileşenleri iki HTML öğesi, genişliği ayarlamak için bir miktar CSS ve birkaç nitelik ile oluşturulmuştur. İlerleme çubuklarını yığabilmenizi, canlandırabilmenizi ve üzerlerine metin etiketleri yerleştirebilmenizi sağlamak için HTML5 progress öğesini kullanmıyoruz.

  • İlerleme çubuğunun maksimum değerini belirtmek için .progress'i sarmalayıcı olarak kullanırız.
  • Şimdiye kadarki ilerlemeyi belirtmek için iç .progress-bar'ı kullanıyoruz.
  • .progress-bar, genişliklerini ayarlamak için bir satır içi stil, yardımcı program sınıfı veya özel CSS gerektirir.
  • .progress-bar ayrıca erişilebilir kılmak için erişilebilir bir ad (aria-label, aria-labelledby veya benzeri kullanarak) dahil olmak üzere bazı rol ve arya özniteliklerini gerektirir.
68%

Scrollspy

Bu sayfanın yanında örneği var

Spinners

Önyükleme "döndürücüler", projelerinizde yükleme durumunu göstermek için kullanılabilir. Yalnızca HTML ve CSS ile oluşturulmuştur, yani bunları oluşturmak için herhangi bir JavaScript'e ihtiyacınız yoktur. Bununla birlikte, görünürlüklerini değiştirmek için bazı özel JavaScript'e ihtiyacınız olacak. Görünümleri, hizalamaları ve boyutlandırmaları, muhteşem faydalı sınıflarımızla kolayca özelleştirilebilir.

Erişilebilirlik amacıyla, buradaki her yükleyici role="status" ve yuvalanmış bir span class="visually-hidden" Yükleniyor... span içerir.

Toasts

Tostlar, mobil ve masaüstü işletim sistemleri tarafından popüler hale getirilen push bildirimlerini taklit etmek için tasarlanmış hafif bildirimlerdir. Flexbox ile üretildikleri için hizalanmaları ve konumlandırılmaları kolaydır.

Tostlar performans nedenleriyle isteğe bağlıdır, bu nedenle bunları kendiniz başlatmanız gerekir.

JS öğrendikten sonra tekrar incelenecek

Tooltips

JS öğrendikten sonra tekrar incelenecek