Bootstrap Hazır Tema Kullanımları

Bu yazımızda Bootstrap hazır tema kullanımları konusundan bahsedeceğiz. Aşağıdaki soruları yanıtlamaya çalışacağız.

Temel olarak bir HTML sayfasının hangi bölümlerden oluşur?

Bootstrap temalarının sitemizde nasıl kullanılması gerekir?

İnceleyeceğimiz Şablonlar:

  1. Temel Web Sitesi Şablonu
  2. Blog Web Sitesi Şablonu
  3. Sosyal Web Sitesi Şablonu
  4. Portfolyo Web Sitesi Şablonu

 

Temel Web Sitesi Şablonu

Bootstrap ve HTML kullanarak oluşturulan web sayfası HTML etiketleri içerisinde dört bölümden meydana gelir. HTML sayfası ise Head ve Body olmak üzere iki temel alandan meydana gelmiştir.

1.Head

Meta tanımlamaları,script yapıları ve link atamaları bu kısımda yapılmaktadır. Temel bir HTML sayfasında bulunması gereken, önemli bir kısımdır. Bootstrap hazır tema kullanımları için kritik öneme sahip bir bölümdür.

2.Header ve Navigasyon Kısmı (Body İçerisinde)

Menü ve logoları yer aldığı kısımdır. Navigasyon menüsü birden fazla sayfadan veya tek sayfadan oluşmuş web sitelerinde sıklıkla kullanılmaktadır. Bir sitenin kimliği sayılabilecek logolar da web tasarımda önemli bir yerdedir. Bu kısımların tanımlamaları ve tasarımları genel olarak body içerisindeki header kısmında yapılmaktadır. Ancak son yıllarda footer içerisinde de menü kullanımları oldukça yaygınlaşmıştır.

3.İçerik Kısmı ( Body içerisinde )

Bu şablonda içerik kısmı üç bölümü ayrılmıştır. Kenar çubuğu adı verilen reklamların ve çeşitli linklerin yer aldığı kısımlar yer almaktadır. Bu kısımlar sayfanın en sağa ve en solunda yer almaktadır. Ortadaki geniş kısım ise anasayfada yer alan tüm içeriklerin bulunduğu kısımdır. ( Resim, yazı, video, ürün, oyun, slider vb. ) Örnek uygulamada konu daha iyi anlaşılacaktır. Örneğe footer anlatımının altındaki bağlantıdan ulaşabilirsiniz.

4.Footer Kısmı ( Body içerisinde )

Footer kısmında “Tüm hakları saklıdır”  yazısının yer aldığı copright kısmı, navigasyon bağlantıları, site hakkında ek bağlantılar ve logolar yer alabilmektedir. Genellikle sayfanın en sonuna sabitlenerek kullanılır. Farklı kullanım şekilleri vardır.

Örnek kullanıma bu bağlantıdan ulaşabilirsiniz.

Blog Web Sitesi Şablonu

İlk temadan farklı olarak bu Bootstrap temasında navigasyon kısmı sol taraftadır. HTML içerisindeki bağlantılara sol menüden ulaşabilirsiniz. Blog kısmı ise içeriklerin bulunduğu bölümde yer almaktadır. Aşağıdaki linkte tipik bir blog sitesinin yapısını görebilirsiniz.

Temada menu kısmı 3 sütün, içerik kısmı 9 sütun toplamda 12 sütundan oluşan bir Grid yapısı mevcuttur

Örnek kullanıma bu bağlantıdan ulaşabilirsiniz.

Sosyal – Portfolyo Web Sitesi Şablonu

Bir sosyal medya sitesi projeniz var ise rahatlıkla bu temadan faydalanabilirsiniz.

Ayrıntılı bilgi vermek yerine sizleri örnek kullanımı paylaşarak bilgilendirme yolunu seçiyorum. Ayrıca uygulamada daha sonraki yazılarımızda bahsedeceğimiz, Jquery UI konusunda örnek bir kullanım yer almaktadır.

Örnek kullanıma bu bağlantıdan ulaşabilirsiniz.

Sergilemek istediğiniz her türlü çalışmayı Portfolyo web sitesi şablonunu kullanarak sergileyebilirsiniz. Portfolyo web sitesi şablonu kullanmak istiyorsanız alttaki linkte yer alan örnekten faydalanabilirsiniz.

Örnek kullanıma bu bağlantıdan ulaşabilirsiniz.

Nereden ulaşabilirsiniz ?

Burada yer alan linkte W3school sitesinde yer alan tüm tema anlatımlarına ulaşabilirsiniz.

Temel düzeyde öğrenmek isteyen arkadaşlar için Türkçe olarak bu içeriklerin tam olarak ne konuda sizlere yardımcı olabileceği konusundan bahsetmeye çalıştım. Bir sonraki yazımızda görüşmek dileğiyle…