YZM 3215 İleri Web Programlama...Bootstrap Nedir? (devam…) • Bir web uygulaması için gerekli olan tüm bileşenleri yapısında barındırır. –Form öğeleri, tablolar, butonlar,

YZM 3215

İleri Web Programlama

Yrd. Doç. Dr. Deniz KILINÇ

Celal Bayar Üniversitesi

Hasan Ferdi Turgutlu Teknoloji Fakültesi

Yazılım Mühendisliği

1

BÖLÜM - 4

Bootstrap

2

Bu bölümde;

Responsive Web Design Bootstrap

Container

Grid

Table

Page

Navigation

Form Oluşturma

ile ilgili konular anlatılacaktır.

Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Responsive Web Tasarımı Nedir?

• Sayfa yerleşim ve düzeninin, sayfayı

görüntüleyen cihazın özelliklerine göre

otomatik olarak kendini ayarlamasıdır.

– PC

– Tablet

– Telefon

– TV








Bootstrap Nedir?

• Front-End yazılım geliştiriciler için geliştirilmiş açık

kaynak kodlu ve ücretsiz bir CSS çatısıdır.

• Twitter çalışanları Mark Otto ve Jacob Thornton

tarafından geliştirilmiş ve Ağustos 2011’de Github

üzerinde ilk defa yayınlanmıştır.

• HTML5’in tüm özelliklerini desteklemektedir.

• Altyapısı sayesinde

– Masaüstü, tablet, mobil cihaz ve tüm tarayıcılara uyumlu

web siteleri geliştirilmesine imkan sağlar.


Bootstrap Nedir? (devam…)

• Bir web uygulaması için

gerekli olan tüm bileşenleri

yapısında barındırır.

– Form öğeleri, tablolar,

butonlar, uyarılar, navigasyon

bar, sayfalama, etiketler,

açılan menüler vb. tasarım

öğeleri.

– Bu hazır bileşenleri kullanarak

hem gelişmiş bir görünüm

hem de her cihaza uygun bir

tasarım gerçekleştirilebilir.


Bootstrap Nedir? (devam…)

• Bootstrap 3 sürümü, Chrome, Safari, Firefox,

Internet Explorer, Opera gibi neredeyse tüm popüler

web tarayıcılarının son sürümlerinde sorunsuz

çalışmaktadır.

• Windows işletim sisteminde, Internet Explorer 8-11

desteklenmektedir.


Bootstrap CDN


<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!– Derlenmiş JavaScript --><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Bootstrap – HTML5


• Bootstrap, belirli HTML elemanlarını ve CSS

özelliklerini kullandığı için HTML5 doctype

kullanılmasını gerekmektedir.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">

</head></html>

Bootstrap – Mobil Öncelik


• Bootstrap 3 mobil öncelikli (mobile-first) olarak baştan

tasarlanmıştır. İsteğe bağlı mobil stilleri eklemek yerine,

doğrudan çekirdeğin içine dahil edilmiştir.

• Uygun render ve dokunmatik yakınlaştırma sağlamak

için, "viewport" meta etiketi <head> arasına eklenmelidir.

• Mobil cihazlarda yakınlaştırma özelliğini viewport meta

etiketine user-scalable=no ekleyerek devre dışı

bırakılabilir. Kullanıcılara sadece kaydırma çubuğuna

erişim imkanı sağlanarak ve siteye biraz daha doğal

(native) uygulama hissi verilebilir.

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no ">

Bootstrap – Konteyner


• Bootstrap site içeriğini (elemanlar, bileşenler, ızgara sistemi

vb.) barındırmak için en dışta bir barındırıcı elemana

ihtiyaç duyar. Klasik div etiketi olan bu eleman için özel iki

sınıf tanımlanmıştır.

– .container: Duyarlı sabit genişliğe sahip konteyner.

– .container-fluid: Tam ekran genişlikteki konteyner.

• Detaylı bilgi için

– http://stackoverflow.com/questions/22262311/container-fluid-vs-

container

<div class="container">... </div>

<div class="container-fluid">... </div>

http://stackoverflow.com/questions/22262311/container-fluid-vs-container

• ÖRNEK 1: Tam ekran ve sabit uzunluğa sahip

konteynerler içeren ayrı iki web sayfası yapalım.

14Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Bootstrap – Konteyner (devam…)

• ÖRNEK 1: Tam ekran ve sabit uzunluğa sahip

konteynerler içeren ayrı iki web sayfası yapalım.

15Celal Bayar Üniversitesi - YZM 3215 İleri Web Programlama

Bootstrap – Konteyner (devam…)

www.bootply.com/4YwXa2M0KY

http://www.bootply.com/4YwXa2M0KY

Bootstrap – Izgara Sistemi


• Bootstrap duyarlı, mobil öncelikli Izgara (Grid) sistemi

içermektedir.

• Cihaz veya ekranın boyutu arttıkça 12 sütuna kadar uygun

olarak ölçeklenir.

• Bu sayede farklı cihazlara göre sütunların görüntülenme

şekli değiştirilmiş olur.

Bootstrap – Izgara Sistemi (devam…)


• Grid sistemindeki kullanılan 4 sınıf aşağıdaki gibidir:

1. xs (extra small) (Telefon, <768px)

2. sm (small medium) (Tablet, ≥768px)

3. md (medium) (Masa üstü, ≥992px)

4. lg (large) (Geniş masa üstü, ≥1200px)

• Aşağıdaki örnekte col-md-6 tanımlaması, medium (orta)

boyutlardaki cihazlarda, ekranın 12’de 6’sını (yarısını)

kaplayacak şekilde pozisyon alır.



• Satırlar doğru hizalama ve dolgu için .container veya

.container-fluid içine yerleştirilmelidir.

• Konteyner içerisindeki satırlar <div class="row"> ile

yaratılır.

• Daha sonra satırlar içerisine kolonlar .col-*-* kullanılarak

yerleştirilir.

<div class="container"><div class="row"><div class="col-*-*"></div><div class="col-*-*"></div><div class="col-*-*"></div>

</div><div class="row">...

</div></div>



• ÖRNEK 2: Telefonlar için ekranı üç eşit parçaya

bölerek aşağıdaki ekran görüntüsünü elde eden

uygulamayı yazalım.



• ÖRNEK 2:

Soru: Genişliği iyice küçültsek de kolonlar neden hep yatay kalıyor?

Alt alta (stacked) olmuyor?



• ÖRNEK 3:

– Masa üstü için ekranı 4 eşit sütuna,

– Tablet için ekranı ikişerli 2 sütuna,

– Telefonlar içinse ekranı 1 sütun şeklinde gösterecek

uygulamayı yazalım.



• ÖRNEK 3:

Bootstrap – Tablolar


• Bootstrap tablolar için özel bir .table sınıfına sahiptir.

• Tablolar için kullanılan özel sınıflardan bazıları

aşağıdaki gibidir:

– table-striped: Şeritli bir tablo oluşturmak için kullanılır.

– table-bordered: Kenarlıklı bir tablo oluşturmak için

kullanılır.

– table-hover: Tablo üzerindeki satırların üzerine geldiğinde

satırın aktif olduğunu göstermek için kullanılır.

– table-condensed: Tablonun hücrelerini biraz daha

küçültmek ve özetlerini yapmak için kullanılır.

Bootstrap – Tablolar (devam…)


• ÖRNEK 4: Aşağıdaki gibi bir tablo oluşturup, tablo

sınıflarını deneyiniz (table-striped table-bordered

table-hover table-condensed).

Bootstrap – Tablolar (devam…)


• ÖRNEK 4: Aşağıdaki gibi bir tablo oluşturup, tablo

sınıflarını deneyiniz (table-striped table-bordered

table-hover table-condensed).

Bootstrap – Page Header


• ÖRNEK 5: Aşağıdaki gibi görünen bir sayfa yapalım.

Bootstrap – Panel


• Paneller, köşeleri yuvarlatılmış kutular içerisinde

metin veya resim görüntülemek için kullanılır.


Bootstrap – Panel (devam…)


– Panel ile ilgili class’lara dikkat edin:

• panel-heading, panel-body, panel-footer

Bootstrap – List Group


• Klasik listelerin daha iyi görünmesini sağlamak ve

ekstra bazı özellikler katabilmek için List Group

bileşeni kullanır.


Bootstrap – List Group (devam…)




• Liste elemanlarına formatlı başlık ve içerik de

verilebilir.

• ÖRNEK 7.2: Aşağıdaki gibi görünen bir sayfa

yapalım.



Bootstrap – Navigasyon Bileşenleri


• Navigasyon, web siteleri için temel bir özelliktir.

• Bootstrap çeşitli navigasyon özellikleri sağlamaktadır

– Nav

– Navbar

– Breadcrumb

Bootstrap – Nav


• ÖRNEK 8: Aşağıdaki gibi farklı nav seçeneklerini bir

arada içeren bir sayfa yapalım.

Bootstrap – Nav (devam…)


Bootstrap – Navbar


• Navbar, bootstrap’in en önemli navigasyon

özelliklerinden biridir.

• Sayfanın geniş ya da dar olmasına göre sergilediği

davranışla farklı ekran boyutlarında işlevsel bir üst

menü oluşturmaya imkan sağlar.

Bootstrap – Navbar (devam…)


• ÖRNEK 9: Farklı sayfa genişliklerinde aşağıdakiler

gibi görünen bir sayfa yapalım.





• ÖRNEK 9.2: Ürünler seçeneğine drop-down menü

ekleyelim.



• ÖRNEK 9.2: Ürünler seçeneğine drop-down menü

ekleyelim.



Bootstrap – Breadcrumb


• Sayfanın, sitenin sayfa hiyerarşisi içerisindeki yerini

göstermek ve üst sayfalara bağlantılar sağlamak için

breadcrumb (ekmek kırıntısı) adı verilen teknik

kullanılır.

• Bootstrap’te breadcrumb yapmak çok kolaydır.

• ÖRNEK 10: Aşağıdaki gibi bir sayfa yapalım.

Bootstrap – Label


• Herhangi bir HTML elemanının yanında belirgin bir

yazı göstermek için label bileşeni kullanılabilir.

• Span elemanına label class’ını eklemek yeterlidir.

• Farklı renklerde label’lar için ek label class’ları

kullanılmalıdır.

– label-default gray

– label-primary dark blue

– label-success green

– label-info blue

– label-warning orange

– label-danger red

Bootstrap – Label (devam…)


• ÖRNEK 11: Aşağıdaki gibi görünen bir sayfa

yapalım.

Bootstrap – Button


• Herhangi bir a, button ya da input HTML elemanını

hoş görünen bir butona çevirmek için bu elemanlara

btn class’ını eklemek yeterlidir.

• Farklı renklerde button’lar için ek btn class’ları

kullanılmalıdır.

– btn-default beyaz

– btn-primary dark blue

– btn-success green

– btn-info light blue

– btn-warning orange

– btn-danger red

Bootstrap – Button (devam…)


• ÖRNEK 12: Aşağıdaki gibi görünen bir sayfa

yapalım.

Bootstrap – Form Oluşturma


• HTML form elemanına form class’ı eklenmelidir.

• Formda yer alacak her bir etiket ve input elemanı için

form-group class’ına sahip bir div elemanı

kullanılmalıdır.

• ÖRNEK 13: Aşağıdaki gibi görünen bir form sayfası

yapalım.

Bootstrap – Form Oluşturma (devam…)


Yararlanılan Kaynaklar

49

• http://www.w3c.org

• http://www.w3schools.com/jquery

• Ders Notları, Yrd. Doç. Dr. Yuriy Mishchenko

• Jump Start Bootstrap, Syed Fazle Rahman, 2014,


http://www.w3c.org/

http://www.w3schools.com/jquery

50

İYİ ÇALIŞMALAR…

Yrd. Doç. Dr. Deniz KILINÇ

[email protected]

[email protected]


mailto:[email protected]

mailto:[email protected]

Documents

YZM 3215 İleri Web Programlama...Bootstrap Nedir? (devam…) • Bir web uygulaması için gerekli olan tüm bileşenleri yapısında barındırır. –Form öğeleri, tablolar, butonlar,