İnternet Programcılığı II
Öğr. Gör. Hüseyin Şengün 8. Hafta
Bootstrap ile Asp.Net Sayfa Tasarımı
• Asp.Net ile web sitesi tasarımında html kodları ile sayfaları düzenleyebiliriz.
• Bootstrap ile sayfa tasarımı yapmak daha kolay olduğu için sayfalarımızı düzenlemek için
faydalanabiliriz.
• Bootstrap dosyalarını öncelikle bilgisayarımıza indiriyoruz.
Bootstrap ile Asp.Net Sayfa Tasarımı
• https://getbootstrap.com/docs/4.6/getting- started/download/
• Bootstrap 4.6 sürümünü kullanacağımız için yukarıdaki linkten zip dosyasını indirip klasöre çıkarıyoruz.
Bootstrap ile Asp.Net Sayfa Tasarımı
• Daha sonra jQuery dosyasını indireceğiz.
• Dünyada en çok kullanılan JavaScript kütüphanesi olan JQuery'in amacı JavaScript dilini internet
üzerinden kolayca kullanılabilmeyi sağlayan
ücretsiz ve açık kaynaklı bir teknoloji sunmaktır.
• JQuery'nin sağladığı en büyük avantajlardan biri tutarlı bir şekilde bütün tarayıcılarda çalışmasıdır, bu sebeple tüm ortamlarda rahatlıkla
kullanılabilme imkanı sunmaktadır.
Bootstrap ile Asp.Net Sayfa Tasarımı
• https://jquery.com/
• Yukarıdaki linkten Download JQuery tıklıyoruz.
Bootstrap ile Asp.Net Sayfa Tasarımı
• Açılan sayfada link üzerinde sağ tıklayıp Bağlantıyı Farklı Kaydet diyoruz.
• Js uzantılı dosyayı indiriyoruz.
Bootstrap ile Asp.Net Sayfa Tasarımı
• Visual Studio programını çalıştırıyoruz ve File/New/Web Site ile yeni bir Web site oluşturuyoruz.
Bootstrap ile Asp.Net Sayfa Tasarımı
• Boş bir web site projesi oluşturmuş olduk.
• Sağ üstteki Solution Explorer içerisine iki klasör oluşturuyoruz. Solution Explorer içinde sağ
tık/New Folder ile css ve js adında klasörleri oluşturduk.
• İndirdiğimiz Bootstrap klasörünün içindeki css klasörü altındaki bootstrap.cs dosyasını
sürükle/bırak ile Solution Explorer daki css klasörünün içine kopyaladık.
Bootstrap ile Asp.Net Sayfa Tasarımı
• İndirdiğimiz Bootstrap klasörünün içindeki js klasörü altındaki bootstrap.min.js dosyasını sürükle/bırak ile Solution Explorer daki js
klasörünün içine kopyaladık.
• Daha sonra indirdiğimiz jQuery dosyasınıda sürükle/bırak ile Solution Explorer daki js klasörünün içine kopyaladık.
Bootstrap ile Asp.Net Sayfa Tasarımı
• Oluşan proje dosyaları resimdeki gibidir.
Bootstrap ile Asp.Net Sayfa Tasarımı
• Website proje üzerinde sağ tıklayıp Add New Item diyerek masterpage ekliyoruz.
Bootstrap ile Asp.Net Sayfa Tasarımı
• Website proje dosyalarımız yandaki gibi oluşturuldu.
• MasterPage sayfasına örnek bir navbar kodu ekleyelim.
• Bootstrap sitesinde sol
taraftaki components/navbar seçeneklerine tıklayalım ve beğendiğiniz navbar kodlarını kopyalayalım.
Bootstrap ile Asp.Net Sayfa Tasarımı
Bootstrap ile Asp.Net Sayfa Tasarımı
• Kopyaladığımız Navbar kodlarını MasterPage kodlarının içine yapıştıracağız.
• <Body> etiketinden hemen sonra yapıştırıyoruz.
• Navbar sayfanın en üstünde görüneceği için.
• Yada nerede göstermek isterseniz oradaki
<div> etiketleri arasına kopyalamamız gerekiyor.
Bootstrap ile Asp.Net Sayfa Tasarımı
• Şimdi sitemize bir Ana sayfa ekleyelim.
• Bunun için Proje ismi üzerinde sağ tıklayıp Add New Item
diyoruz.
Bootstrap ile Asp.Net Sayfa Tasarımı
• Açılan ekrandan Web Form seçilir, Select master page seçeneğine tik konulur. Add tıklanır.
Bootstrap ile Asp.Net Sayfa Tasarımı
• Açılan ekrandan daha önce oluşturduğumuz MasterPage seçilir. Ve Ok tıklanır.
Bootstrap ile Asp.Net Sayfa Tasarımı
• Sitemizin Anasayfası
Default.aspx oluşturulmuş oldu.
• Default.aspx sayfamızı çalıştıralım ve navbar eklenmiş mi görelim.
Bootstrap ile Asp.Net Sayfa Tasarımı
• Navbar yandaki gibi hatalı görünüyorsa;
• MasterPage dosyasındaki
<head> etiketleri arasına css ve js dosyalarının
yolunu tanımlamamız gerekiyor.
Bootstrap ile Asp.Net Sayfa Tasarımı
• Solution Explorer’dan dosyaları sürükle/bırak ile ekleyebiliriz. Dosyaların sıralaması resimdeki gibi olmalıdır.
Bootstrap ile Asp.Net Sayfa Tasarımı
• Navbar Aşağıdaki görüntülenir.
Bootstrap ile Asp.Net Sayfa Tasarımı
• Her sayfada görünmesini istediğimiz (Navbar, footer, header...vb) nesneleri MasterPage dosyasına
ekliyoruz. Daha sonra sayfaları MasterPage’e bağlıyoruz.
• Sadece eklenen sayfada görünmesini istediklerimizi o sayfaya ekliyoruz.
• Biz Navbar’ı MasterPage dosyasına ekledik. Çünkü menü her sayfada görünmesini istiyoruz.
Bootstrap ile Asp.Net Sayfa Tasarımı
• Default.aspx yani Anasayfamıza
bootstrap
özelliklerinden
eklemek istersek bir örnekle açıklayalım.
• Anasayfaya Jumbotron ekleyelim.(https://getb ootstrap.com/docs/4.6 /components/jumbotr on/)
• Kodları kopyaladık.
Bootstrap ile Asp.Net Sayfa Tasarımı
• Default.aspx yani Anasayfamızda resimde gördüğünüz yere yapıştırdık.
• Kaydedip çalıştırıyoruz.
Bootstrap ile Asp.Net Sayfa Tasarımı
• Default.aspx aşağıdaki gibi görüntülendi. Eklenen bootstrap kodları içerisinde düzenleme yaparak sayfayı değiştirebiliriz.
Bootstrap ile Asp.Net Sayfa Tasarımı
• MasterPage’te Bootstrap
özelliklerinden olan Container sınıfını
kullanırsanız yandaki yere yazmanız
yeterlidir.
Bootstrap ile Asp.Net Sayfa Tasarımı
• Container sınıfı sayfaya eklenen nesnelerin sol ve sağında aşağıdaki gibi boşluk bırakır.
Bootstrap ile Asp.Net Sayfa Tasarımı
• Bootstrap ile sayfa düzenleme için aşağıdaki videoyu izleyebilirsiniz.
• https://veliofkeli.com/AspNet-ile-web-tasarim/AspNet- Dinamik-Web-Sitesi-Yapimi---Ders-1
