YZM 3215 İleri Web Programlama

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 Bu bölümde; Responsive Web Design Bootstrap Container Grid Table Page Navigation Form Oluşturma ile ilgili konular anlatılacaktır. 2

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

Responsive Web Tasarımı Nedir?

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/boot strap/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. <meta name="viewport" content="width=device-width, initial-scale=1"> 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, 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. <div class="container">... </div> <div class="container-fluid">... </div> Detaylı bilgi için http://stackoverflow.com/questions/22262311/container-fluid-vscontainer

Bootstrap Konteyner (devam ) ÖRNEK 1: Tam ekran ve sabit uzunluğa sahip konteynerler içeren ayrı iki web sayfası yapalım. 14

Bootstrap Konteyner (devam ) ÖRNEK 1: Tam ekran ve sabit uzunluğa sahip konteynerler içeren ayrı iki web sayfası yapalım. www.bootply.com/4ywxa2m0ky 15

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.

Bootstrap Izgara Sistemi (devam ) 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>

Bootstrap Izgara Sistemi (devam ) Ö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.

Bootstrap Izgara Sistemi (devam ) ÖRNEK 2: Soru: Genişliği iyice küçültsek de kolonlar neden hep yatay kalıyor? Alt alta (stacked) olmuyor?

Bootstrap Izgara Sistemi (devam ) Ö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.

Bootstrap Izgara Sistemi (devam ) Ö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 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. ÖRNEK 6: Aşağıdaki gibi görünen bir sayfa yapalım.

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. ÖRNEK 7: Aşağıdaki gibi görünen bir sayfa yapalım.

Bootstrap List Group (devam )

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 List Group (devam )

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.

Bootstrap Navbar (devam )

Bootstrap Navbar (devam ) ÖRNEK 9.2: Ürünler seçeneğine drop-down menü ekleyelim.

Bootstrap Navbar (devam )

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

İYİ ÇALIŞMALAR Yrd. Doç. Dr. Deniz KILINÇ drdenizkilinc@gmail.com deniz.kilinc@cbu.edu.tr 50