YZM 3215 İleri Web Programlama...Bootstrap Nedir? (devam…) • Bir web uygulaması için gerekli...

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

BÖLÜM - 4

Bootstrap

Bu bölümde;

Responsive Web Design Bootstrap

Container

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.

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

• Ö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

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><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

• http://www.w3c.org

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

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

• Jump Start Bootstrap, Syed Fazle Rahman, 2014,

İYİ ÇALIŞMALAR…

Yrd. Doç. Dr. Deniz KILINÇ

drdenizkilinc@gmail.com

deniz.kilinc@cbu.edu.tr

YZM 3215 İleri Web Programlama...Bootstrap Nedir? (devam…) • Bir web uygulaması için gerekli...

Documents

Prof. Dr. Fitnat KAPTAN - fmo.org.tr¼hendisliği... · içerik ARGÜMANTASYON BECERİLERİ FEN OKUR-YAZARLIĞI BİLİŞSEL BECERİLER ÖĞRETİM SÜRECİNİN TEMEL ÖĞELERİ ELEŞTİREL

MAKALE HAKKINDA MUHASEBE ÖĞRETİM PROGRAMININ …öğretim programının program öğeleri, endüstriyel staj uygulamaları gibi birçok konuda yetersiz olduğu görülmektedir

Yerel Mimarinin Sürdürülebilirliği Kapsamında …...Pınar KISA OVALI, Nilay DELİBAŞ Yerel mimari, içinde yer aldığı kültüre özgü soyut ve somut kimlik değerleri barındırır

GARİP - Akbank Sanat fileBir masal değildir mitoloji. Kendisine özgü bir doku içinde günün ideolojik söylemidir. İdeolojik olanı içinde barındırır. İdeolojik olanı

İhtiyacınıza En Uygun Çözümler… - arnetelektronik.com Arnet.pdf · - LPCB, VDS, TSE Sertifikalı Ürünler - Kısa Devre İzolatörlü Dedektörler, Butonlar ve Modüller

FEN BiLiMLER TESTi - sevinc.k12.tr...C) Türkiye’nin dağları, ovaları her türlü güzelliği barındırır koynunda. D) Geçen sene burada, dağların eteklerinde, çay-larımızı

ÖĞRETİM YAZILIMLARININ FARKLI AŞAMALARDA ...Yazılımda dil bilgisi konusuna ait butonlar tıklandığında dört bölüm açılmaktadır: 1) Hazırlık, 2) Konu Anlatımı, 3)

BEDEN DİLİNİN ÖĞELERİ

FOSİL KAPİTALİZMİ VE UYGARLIK KRİZİ · Fosil Kapitalizmi ve Uygarlık Krizi. Jeo-mühendislik çözüm değildir, hatta temel yaşam . döngülerini bozacak riskler barındırır

· Web viewBu konu tam tersi anlaşılmış. Mavi renkli buton ile yeşil renkli butonlar yer değiştirecek. İki upload, bir download butonu olacak. Download butonundan doküman

GELENEKSEL YAPI ÖĞELERİ I D E R S N O T L A R Imehmetmutlu.gen.tr/wp-content/uploads/2011/12/Geleneksel... · 2011-12-31 · GELENEKSEL YAPI ÖĞELERİ I D E R S N O T L A R I

ORTAOKUL BEŞİNCİ SINIF - islahiye.meb.gov.trislahiye.meb.gov.tr/meb_iys_dosyalar/2016_10/... · uyumun önemli öğeleri olarak görülmekte ve dikkate alınmaktadır. Bu kapsamda,

EN KAPSAMLI İnşaat ERP Sistemi - Aqvila Softwareaqvilasoftware.com/wp-content/uploads/2015/01/e-mor...İnşaat sektörüne özgü en iyi finans yönetimi uygulamaları barındırır

Öğretim Programlarının Temel Öğeleri

HACETTEPE ÜNİVERSİTESİ GÜZEL SANATLAR ENSTİTÜSÜ … · 2017-01-27 · Öğretim programının öğeleri şu şekilde sıralanmaktadır: “Öğretim programı, özel hedefler

YİYECEK İÇECEK HİZMETLERİ BESİN ÖĞELERİ – 1

CÜMLENİN ÖĞELERİ

Katalog | 2016 Butonlar ve sinyal lambaları Temel seçim …Ÿıksız mantar butonlar sayfa 9 Işıksız acil durdurma butonları sayfa 10 Işıklı acil durdurma butonları sayfa

CüMlenin öğEleri

zksoft katalog son2017 SON · ELEKTRONİK KİLİT ve BUTONLAR YARDIMCI APARATLAR YAZILIMLAR. ww.zksoftare.com.tr 4 ZKAccess bir ZKSoftware yazılımı olup, geçiş kontrol ürünleri