BOOTSTRAP

---

Bootstrap Nedir?

Tanım:Bootstrap Ön Yüz Geliştiriciler (Front-End Developer) için geliştirilmiş açık kaynak kodlu ve ücretsiz bir CSS framework'tür.

Framework yazılım geliştiricilerin kullandığı önceden hazırlanmış kütüphanelerin bulunduğu ve bunlara yenilerini ekleyebileceği yapıların adıdır.

Özelikle Twitter'de form buton ve menü elemanlarında kullanılan Bootstrap 19 AĞUSTOS 2015'te Twitter'de çalışan 2 mühendis tarafından geliştirilmeye başlandı.(Bu yüzden Twitter Bootstrap'da denmektedir).

Bootstrap kısaca bize sunulan belirli taslaklar dahilinde Responsive duyarlı arayüzler tasarlamamıza olanak sağlar.Buda farklı ekran boyutlara otomatik olarak uyum sağlamasını ve farklı cihazlarda kullanıcıyı yormayan bir tasarım yapmamızı sağlar. Bootstrap projelerde kullanılan bileşenleri(butonlar,form,navigasyon elamanları vs.) çok kolay bir şekilde tasarlamıza olanak sağlıyor.

Neden Bootstrap Kullanmalıyız

• Responsive Tasarım yapmak çok kolay.
• Bootstrap Ön Yüz Programlamada kullanılan tüm bileşenleri yapısında barındırır.(Form, Buton, Tablo vs.)
• Bootstrap web sitesi geliştirmek için tüm yeniliklileri içinde barındırıyor.
• Zamandan tasarruf: Geliştiricilere hazır kaynak kodlar sunan bir kütüphanesi vardır.
• Bootstrap'ın en iyi yönlerinden biri de özelleştirilebilir olması. Arkanıza yaslanıp bütün yapıyı araştırabilir ve istediğinizi tutup istediğinizi atabilirsiniz. Bootstrapın sizin ihtiyacınıza göre değiştirilmeye açık bir platform. Geliştiricinin projesi için ne lazımsa onu tıpkı bir terzi gibi Bootstrap'a dikebilir veya sökebilirsiniz! Bu yüzden bir çok geliştirici bazı Bootstrap araçlarına işe yaramaz gözüyle bakarken bazı geliştiriciler adeta tapmakta.
• Bootstrap'ın geliştirilmesindeki en büyük neden Twitter'ın geliştiricilerin projlerinde büyük tutarsızlıklar görmesiydi. Bu sorun projelerde bazı sorunlara yol açtı. Bootstrap merkez setli bir geliştirici kodu kullandığı için bütün platformlarda aynı sonuçlar veriyor. Yani Internet Explorer'a bakınca da aynı Chrome'a bakınca da aynı sonucu alacaksınız.
• Jquery'i örnek alırsak geliştirmeler iki yılda bir kullanıcılara açılıyor. Bootstrap ise daha sık ve daha sabit güncelleniyor. Geliştiriciler her sorun bulduğunda Bootstrap takımı düzeltmek için çalışmaya başlıyor.
• Bootstrap'ın dökümanları gerçekten etkileyici. Çoğu yeni platformun sorunu tam bir dökümana sahip olmaması fakat bootstrap size sıfırdan başlama imkanı sunuyor. Öğrenmek için herşeyle oynamanıza gerek kalmıyor ve anında istediğiniz bilgiyi alabiliyorsunuz dökümanlardan.

---

Hadi Başlayalım....

Sayfa Yerleşimi(Container)

---

Grid (Izgara) Sistemi

Izgara Sistemi Nedir?

Responsive Tasarımı oluşturmamızdaki rolü çok büyüktür(merkezdedir). Responsive Tasarıma göre ekran boyutları küçüldükçe alanlar(sütunlar) alt alta gelip ekran boyutuna uyum sağlamaktadır.Amaç div kutularının bir düzen içerisinde yer almasını sağlamaktır.

Yan yana 1 birimden toplamda 12 adet div gelmektedir. Divlerin kapladığı alanlara göre düzenleyip istediğimiz görünümü elde edebiliriz.

Grid Ekran Modelleri

Telefon => col-xs (Extra Small)

Tablet => col-sm(Small)

Dizüstü Bilgisayar => col-md (Medium)

Masaüstü Bilgisayar => col-lg (Large)

Televizyon => col-xl (Xlarge)

Media Nesnesi

Forumlarda bloglarda çoğunlukla kullanılır. Blog sitelerindeki makaledeki yazarın bilgilerinin bulunuduğu alan örnek olarak gösterilebilir

---

Tipografik Stiller

Başlıklar:

<p class="h1">PAUSIBER</p>=> PAUSIBER

<p class="h2">PAUSIBER</p>=> PAUSIBER

<p class="h3">PAUSIBER</p>=> PAUSIBER

<p class="h4">PAUSIBER</p>=> PAUSIBER

<p class="h5">PAUSIBER</p>=> PAUSIBER

<p class="h6">PAUSIBER</p>=> PAUSIBER

Display Heading (Öne Çıkan Başlıklar):

<p class="display-1">PAUSIBER</p>=> PAUSIBER

<p class="display-2">PAUSIBER</p>=> PAUSIBER

<p class="display-3">PAUSIBER</p>=> PAUSIBER

<p class="display-4">PAUSIBER</p>=> PAUSIBER

Pasif Metinler

<p class="text-muted">PAUSIBER</p>=> PAUSIBER

Öne Çıkan Metin

<p class="lead">PAUSIBER</p>=> PAUSIBER

Metin Renklendirme Etiketleri

<p class="text-primary">PAUSIBER</p> => PAUSIBER

<p class="text-secondary">PAUSIBER</p> => PAUSIBER

<p class="text-success">PAUSIBER</p> => PAUSIBER

<p class="text-info">PAUSIBER</p> => PAUSIBER

<p class="text-warning">PAUSIBER</p> => PAUSIBER

<p class="text-danger">PAUSIBER</p> => PAUSIBER

<h1 class="text-danger">PAUSIBER</h1>

<h2 class="text-danger">PAUSIBER</h2>

<h3 class="text-danger">PAUSIBER</h3>

<h4 class="text-danger">PAUSIBER</h4>

<h5 class="text-danger">PAUSIBER</h5>

<h6 class="text-danger">PAUSIBER</h6>

---

Arka Plan Renklendirme Etiketleri

<p class="bg-light text-dark">PAUSIBER</p> => PAUSIBER

<p class="bg-dark text-white">PAUSIBER</p> => PAUSIBER

<p class="bg-primary text-dark">PAUSIBER</p> => PAUSIBER

<p class="bg-primary text-white">PAUSIBER</p> => PAUSIBER

<p class="bg-secondary">PAUSIBER</p> => PAUSIBER

<p class="bg-success">PAUSIBER</p> => PAUSIBER

<p class="bg-info">PAUSIBER</p> => PAUSIBER

<p class="bg-warning">PAUSIBER</p> => PAUSIBER

<p class="bg-danger">PAUSIBER</p> => PAUSIBER

---

Metin Dönüşümleri

<p class="text-lowercase">PAUSIBER</p> => PAUSIBER

<p class="text-uppercase">pausiber</p> => pausiber

<p class="text-capitalize">pausiber</p> => pausiber

---

Metin Hizalama

<p class="text-left">Metni sola hizala
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

<p class="text-right">Metni sağa hizala
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

<p class="text-center">Metni ortala
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

<p class="text-justify">Metni iki yana hizala
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

<p class="text-nowrap">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

---

Kenarlıklar , Kenarlıkların Renklendirmesi ve Yuvarlanması

---

Resimler (Images)

Resimlere Responsive Özelliği Kazandırma =><img class="img-fluid" src="img/pausiber.png">

Resimlere Kenarlık =><img class="img-thumbnail" src="img/pausiber.png">

Resimleri Hizalama

Resmi Sola Hizalama => <img class="float-left" style="width: 20%;" src="img/pausiber.png">

Resmi Sağa Hizalama => <img class="float-right" style="width: 20%;" src="img/pausiber.png">

Resmi Ortalama => <img class="mx-auto d-block " style="width: 20%;" src="img/pausiber.png">

---

Video (Embed)

---

Figürler

Bir resimle birlikte bir tanımlama sunar.

---

FLEXBOX

Flexbox yapısı esnek çalışma imkanı suğlar

Bootstrap Flexbox

---

Tablolar

Ad	Soyad	No	Bölüm
Murat	Tanrıverdi	123	CENG
Murat	Tanrıverdi	123	CENG
Murat	Tanrıverdi	123	CENG
Murat	Tanrıverdi	123	CENG

Bootstrap Tablolar

---

Bootstap Bileşenler (Components)

Butonlar

<button type="button" class="btn btn-primary"></button>
<button type="button" class="btn btn-secondary"></button>
<button type="button" class="btn btn-success"></button>
<button type="button" class="btn btn-danger"></button>
<button type="button" class="btn btn-warning"></button>
<button type="button" class="btn btn-info"></button>
<button type="button" class="btn btn-light"></button>
<button type="button" class="btn btn-dark"></button>
<button type="button" class="btn btn-link"></button>

<button type="button" class="btn btn-outline-primary"> </button>
<button type="button" class="btn btn-outline-secondary"> </button>
<button type="button" class="btn btn-outline-success"> </button>
<button type="button" class="btn btn-outline-danger"> </button>
<button type="button" class="btn btn-outline-warning"> </button>
<button type="button" class="btn btn-outline-info"> </button>
<button type="button" class="btn btn-outline-light"> </button>
<button type="button" class="btn btn-outline-dark"> </button>

Button Size

<button type="button" class="btn btn-primary btn-lg"></button>

<button type="button" class="btn btn-primary btn-sm"></button>

Block Level Button

<button type="button" class="btn btn-primary btn-lg btn-block"></button>

Active Buton

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true"></a>

Disabled Button

<button type="button" class="btn btn-lg btn-primary" disabled> </button>

---

Buton Grupları

Açılır Butonlar (Dropdown)

---

Uyarı Kutuları (Alert)

Link Verilmiş Uyarı Kutusu

Detaylı Bilgi

---

Rozetler (Badge)

Bootstrap 3 te Label Olarak Geçer

Example heading <span class="badge badge-primary"></span>

Example heading <span class="badge badge-secondary"></span>

Example heading <span class="badge badge-success"></span>

Example heading <span class="badge badge-warning"></span>

Example heading <span class="badge badge-info"></span>

Example heading <span class="badge badge-danger"></span>

---

İçerik Haritası(Breadcrumb)

Nerelerde Kullanılır: Girilen sitelerde alt kategorilere indikçe nerelerde olduğunuzu göstermek için kullanılır.

1. Anasayfa
2. Eğitimler
3. Bootstrap

---

Jumbotron (Vitrin)

---

Cards (Kartlar)

Kartlar; Flexbox Yapısını kullanmaktadır. Sabit temel bir boyutu yoktur, sayfaya yayılırlar. Bileşenler ile en iyi şekilde çalışırlar.

Card Arka Plan Renklendirme

---

Giriş Grupları (Input Groups)

---

FORMLAR

Email

Password

Address

Address 2

City

State Choose... ...

Zip

Check me out

Sign in

---

Menüler (Navs)

• Anasayfa
• Hakkımızda
• İletişim

• Anasayfa
• Hakkımızda
• İletişim

• Anasayfa
• Hakkımızda
• İletişim

---

Menü Bar (Navs Bar)

Collapse Menü

Collapse

Link with href Button with data-target

---

Sayfalama (Pagination)

---

Progress Bar (İlerleme Çubuğu)

---

Modal Popup (Açılır Kutular)

Launch demo modal

---

ToolTips

Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left

---

Popovers (Açıklama Metinleri)

Click to toggle popover

---

Slider (Carousel)

---