Bootstrap dersleri – Jumbotron Kullanımı

Merhaba arkadaşlar bootstrap 4 derslerimizin 4. gününe hoşgeldiniz. Bu dersimizde bootstrap jumbotron kullanımını öğreneceğiz.

Daha önceki derslerimize kısaca değinecek olursak

  1. gün bootstrap kütüphanelerini sayfalarımıza nasıl ekleyeceğimizi ve  bootstrap kullanarak ilk sayfamızı oluşturduk.
  2. gün Sayfamıza Navbar ( Menü) eklemeyi ve eklediğimiz menüde değişiklikler yapmayı öğrendik.
  3. gün sayfalarımızın temelini oluşturacak ızgara (div) yapısı ve kullanımı hakkında bilgi sahibi olduk.

4. günümüze geldiğimizde ise konumuz Jumbotron.Html 5 ile gelen bu özelliğin bootstap kullanılarak nasıl sitemizde kullanılacağını göreceğiz. Jumbotron sayfanızın içerisinde öne çıkan esnek yapılar oluşturmanızı sağlayan bir div türüdür.

Jumbotron örneklerine bir göz atalım.

Jumbotron örnek sayfalar

bootstrap jumbotron1

bu sayfada gördüğünüz “examples”  alanı jumbotron yapısını kullanmıştır.

bootstrap jumbotron2

arka planda resim bulunan güzel bir jumbotron yasarımı.

bootstrap jumbotron

şık bir jumbotron tasarımı daha.

Sayfalarınızı jumbotronla nasıl güzelleştirebileceğinizi gördünüz. Gelin işe koyulalım.

Bootstrap jumbotron kullanımı

http://bootstrap.kodleon.com/jumbotron1.html

Bootstrap jumbotron ‘unuzun genişliği sayfayı kaplasın istiyorsanız :

container-fluid sınıfına sahip Divin içine yerleştirin.

Bootstrap jumbotron ‘unuz sayfanızda ortalı bir şekilde görünsün istiyorsanız:

Container sınıfına sahip Divin içine yerleştirin.

bootstrap jumbotron renklendirme

bootstrap jumbotron5

bootstrap jumbotron4

 

bootstrap jumbotron5

bootstrap4 jumbotron

bootstrap jumbotron7

Jumbotron arkaplan resmi koyma

Geldik jumbotronun en sevdiğim özelliğine. Sayfalarınızda arkaplanınında resim olan şık jumbotronlar oluşturarak sayfanızın dikkat çekmesini sağlayabilirsiniz. Bunu nasıl yapacağımıza bakalım.

  1. adımda jumbotronumuzu oluşturduk. Burda gördüğünüz gibi diğer oluşturduklarımızdan farkı yok.Sadece arkaplan rengi ayarlamadık.

2. adımda html sayfanızın style.css dosyası yoksa style.css dosyası oluşturun ve Sayfanızın <head> bölümünde style.css dosyasını gösterin.

burada dikkat edeceğiniz nokta

bunu bootstrap css in altına yazmak olacak. Yani önce bootstap css dosyasını gösteriyoruz daha sonra style.cs dosyasını gösteriyoruz.

3. adımda syle.css dosyamızı oluşturalım.

arkaplan resimli jumbotronumuzu oluşturduk. Tebrikler 🙂

Sayfamızın önizlemesi: http://bootstrap.kodleon.com/jumbotron9.html

bootsrap jumbotron9Bir Sonraki dersimizde Boostrap ile şık form lar yapmayı öğreneceğiz. Görüşmek üzere.

Leave a Reply

%d blogcu bunu beğendi: