Bootstrap Kullanımı

Bootstrap'ı Temelleri

Bootstrap bütün olarak ele alındığında sadece HTML ve CSS alt yapısından oluşan bir framework değil, aynı zamanda JavaScript modülleri içeren bir yapıya sahiptir. Bu bağlamda jQuery'ye ihtiyaç duyar. Projenize bootstrap'ı dahil etmek için http://getbootstrap.com/ adresine gitmeni yeterlidir. Buraya gittikten sonra önünüze farklı yöntemler gelecek. Kısaca bu yöntemler üzerinde duralım.

Bootstrap'ı Dahil Etmek

Bootstrap linklerin rengi, başlıkların boyutu gibi bazı değerleri kendisi standart olarak belirlemiştir. Buna haricen grid yapısı da ön tanımlıdır. Örneğin web sitenizin masaüstü/dizüstü cihazlarda gözükeceği ana alan 1200px olarak tanımlanmış ya da cep telefonu ekranına geçerken standart kırılma noktası 480px olarak ayarlanmıştır. Bu değerler uluslararası olarak kabul görmüştür ve genelde değişiklik gerektirmez. Bu bağlamda bu standartlar ile Bootstrap kullanmak isterseniz http://getbootstrap.com/getting-started/ sayfasına gidip Download Bootstrap butonuna tıklayabilirsiniz.

Standart Bootstrap

Bootstrap'ın tüm temel dosyalarını içerir. Değerler ön tanımlıdır ve değişiklik gerektirmez. İndirdiğiniz klasörün içinden çıkan tüm dosya ağacı aşağıdaki gibidir. (Boostrap v3.3.6)

bootstrap/

├── css/

│ ├── bootstrap.css

│ ├── bootstrap.css.map

│ ├── bootstrap.min.css

│ ├── bootstrap.min.css.map

│ ├── bootstrap-theme.css

│ ├── bootstrap-theme.css.map

│ ├── bootstrap-theme.min.css

│ └── bootstrap-theme.min.css.map

├── js/

│ ├── bootstrap.js

│ └── bootstrap.min.js

├── fonts/

│ ├── glyphicons-halflings-regular.eot

│ ├── glyphicons-halflings-regular.svg

│ ├── glyphicons-halflings-regular.ttf

│ ├── glyphicons-halflings-regular.woff

│ └── glyphicons-halflings-regular.woff2

Bootstrap dosyalarını projenizin kök klasörüne taşıdıktan sonra yapmanız gereken ilk şey ister bir CDN aracılığıyla, ister fiziksel olarak jQuery'yi projenize dahil etmeniz gerekir. Bu durumda Layout dosyanızınz <head> etiketine aşağıdaki gibi kütüphaneyi çağırmanız yeterli olacaktır.

Yukarıdaki biçimde jQuery, Google CDN aracılığıyla çağırılmıştır. An itibariyle jQuery 1x, jQuery 2x ve jQuery 3x RC sürümleri bulunmaktadır. Bootstrap her üçüyle de sorunsuz şekilde çalışmaktadır fakat daha iyi bir Internet Explorer desteği için (özellikle IE10 ve IE11) 1x kütüphanesi tercih edilmiştir.

Hemen ardından projenizin içerisinde gelen JavaScript ve CSS dosyalarının içinden seçerek ekleyebilirsiniz.

Yukarıda dahil edilen üç dosyanın ilki, bootstrap temel CSS dosyasıdır ve grid sistemi gibi ana öğeleri içerir. Minified (küçültülmüş) versiyonlarını dahil etmeniz sayfa hızı açısından önem arz eder.

İkinci dosyamız bootstrap tema dosyasıdır. Tipografi ve renklendirme gibi bilgileri içerir.

Üçüncü dosyamız da JavaScript yardımıyla yapılacak olan front-end işlemleri için gereklidir. Dahil edilmesi gerekir.

Bu sistemde çağırılan üç dosya kendi mappingini oluşturarak diğer yardımcı dosyaları da okuyacaktır.

Bootstrap Kaynak Kod (LESS Derleme Metodu)

Diğer bir uygulama yöntemi Bootstrap kaynak kodunu indirerek kendi setupınızı oluşturmaktadır. Bu sayede grid sistemi dahil olmak üzere her türlü detaya müdahale edip ince ayar yapabilirsiniz fakat öncelikle front-end alanında çok derin bir tecrübe ve NodeJS aracılığıyla GruntJS tarzında bir LESS Derleyicisi gerektirir. Bu şekilde kullanmak isterseni aynı sayfadaki Download Source butonuna tıklayıp indirmeniz yeterlidir. Bootstrap temel sürümü işimizi fazlasıyla göreceğinden dolayı bu konuya fazla değinmeyeceğim.

SASS Metodu

Yine gelişmiş ve LESS'e nazaran daha spesifik amaçlarla oluşturulmuş bir yöntemdir. Compass veya Ruby on Rails tarzı SASS projelerine daha kolay entegre etmek için kullanılmaktadır. ASP.Net MVC ile kullanımı önem arz etmez.

Bootstrap CDN

Bootstrap'ın kendine ait bir CDN'i bulunmaktadır. Bundan dolayı yine aynı sayfadan Boostrap CDN yazan kısımdaki kodu kopyalayarak yine proje Layout sayfanızın <head> etiketinin içine yapıştırmanız yeterli olacaktır.

Sayfa Oluşturmak

Bu noktadan itibaren bir yandan örnek anasayfa oluşturacak bir yandan da bootstrap temel sınıfları ve mobil görünüm ile ilgili parça parça anlatmaya devam edeceğim. Başlamadan önce işimiz bittiğinde nasıl bir sayfa ile karşılaşacağımızı inceleyelim.

Masaüstü Görünümü

Tablet Görünümü

Akıllı Telefon Görünümü

Gördüğünüz üzere tasarım açısından çok bir şey vaat etmeyen fakat sadece bir kez CSS yazarak hem de mobil uyumlu bir önyüz oluşturduk. Siz ister yönetim paneli, ister ön yüz hazırlıyor olun, gerçek şu ki bootstrap her türlü arayüz tasarımında minimum CSS kodu yazdırarak çok fazla zaman kazanmanızı sağlayacak ve işinizi kolaylaştıracak.

Bu noktadan sonra tüm kodlarımızı Layout sayfamızın <body> etiketleri arasına ekliyoruz.

Site Menüsü

Resimleri detaylı olarak incelediğimizde karşılaştığımız ilk detay, menü, masaüstü ve tablet modundayken normal bir şekilde duruyorken, mobile geçtiğinde toparlanıp buton haline geliyor olması.

Birazdan kod kısmında da göreceğiniz gibi bunu sağlayan bootstrapın kendi JavaScript ve CSS'i. Sınıfları doğru kullandınız müddetçe hata yapma şansınız yok.

<span class="sr-only">Navigasyonu Açın</span>

</button>

</div>

<li class="active"><a href="#">Anasayfa <span class="sr-only">Anasayfa Aktif</span></a></li>

<li><a href="#">Hakkımızda</a></li>

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hizmetlerimiz <span class="caret"></span></a>

<li><a href="#">Web Sitesi</a></li>

<li><a href="#">Dijital Reklamcılık</a></li>

<li><a href="#">Özel Yazılım</a></li>

<li><a href="#">Sosyal Medya</a></li>

</ul>

</li>

<li><a href="#">Referanslarımız</a></li>

<li><a href="#">İletişim</a></li>

<li>

</div>

</button>

</form>

</li>

</ul>

</div>

</nav>

</div>

Kodu yukarıdaki gibi birebir yazsanız bile yeterli gelecektir. Fakat özelleştirme yapacağınızı göz önüne alarak önemli bootstrap sınıflarının üzerinden geçeye başlayayım.

Bu sınıf sadece menüye özel değil, bootstrap'ın genelinde kullanılan ana sınıflardan biridir. Container size masaüstünde 1200px olan ve ekranlara göre değişiklik gösteren ana kutunuzu yani isminden de anlaşıldığı gibi konteynerinizi verir. Nesting yaparken container ya da container-fluid ile başlamak içerideki nesneleri boyutlandırabilmeniz için önemli adımlardan birisidir.

Burada gerçekten önemli bir kavram ortaya çıkıyor. Resimde de görüdğünüz gibi menü, mobile geçtiği zaman bir butonun altına toplanıyor ve bunu yapabilmek için JavaScript desteğine ihtiyacınız var. Bootstrap'ın kendi içerisinde bulunan JavaScript'leri normalde satırlarca kod yazmanız gereken bu işlemi yapabilirler fakat öncelikle hedefleme yapmamız gerekir.

Hedefleme, herhangi bir DOM nesnesini diğeriyle ilişkilendirmemizi sağlar. Yukarıdaki kod bloğunda ise bizi ilgilendiren kısım data-target kısmı. İsminde de anlaşıldığı gibi targeting (hedefleme) yapmamızı sağlayan bu özellik ile menü nesnelerimizi tutan div'in id'sini gösteriyoruz.

Yukarıda yaptığımız hedefleme işleminin devamı olarak oluşturduğumuz bu div'in içerisine yerleştirdiğimiz her nesne, ekran mobile geçince butonun alt menüsüne gelecek şekilde ayarlanmasını sağlar. Dikkat etmeniz gereken nokta div id'si ile data-target id'sinin aynı olması.

İster span ile kullanın, ister başka bir html elementi ile bu alanın içerisine gelen her metin sadece screen reader'lar tarafından görüntülenir. Görme engelliler için odaklanan nesneleri seslendiren ya da Braille kabartmalarına çeviren otomatik cihazlar tarafından bir mesaj vermek istiyorsanız bu kısım önemlidir. Geniş bir kullanıcı deneyimi açısından metin olmayan fakat kendi içerisinde aksiyon barındıran –örneğimizdeki menü butonu gibi, her nesneye sr-only sınıfı ile açıklama metni tanımlamak önem arz eder.

Bu sınıf ile başlayan <li> elementi ve örnekte gördüğünüz gibi peşi sıra oluşturulan nesting size tıklayınca açılan bir menü verir.

Slider

Web sitenizi görsel olarak zenginleştirmek adına bir slider kullanmanız önemlidir. Bootstrap JavaScript kütüphanesi kendi içerisinde bir slider barındırır. Yine bu slider birkaç püf nokta ve doğru nesting ile çalıştırılabilir.

</ol>

</div>

</div>

</div>

<span class="sr-only">Önceki Slayt</span>

</a>

<span class="sr-only">Sonraki Slayt</span>

</a>

</div>

Yukarıdaki kod bloğunda da sadece slider ile alakalı değil, genel bootstrap sınıflarıyla ilgili birkaç noktaya da değineceğim.

Row, yani satır, iki görevde kullanılır. Birincil görevi float ile sağa ya da sola kaydırdığınız div'leri, container sınırına ulaştıktan sonra clear: both ile sıfırlama derdinden kurtarır. Bu sayede yükseklik farklılıklarına bağlı olan kaymalardan kurtulmuş olursunuz. Bir ikinci görevi ise natürel padding değerini sıfırlamaktır. Bootstrap'da her column (sütun / col-...-... şeklinde sınıflandırılır) ve her container doğal olarak sağan ve soldan 15 pixel boşluk bırakır. Eğer sütunlarınızın dışına bir row eklerseniz hem clear işleminden kurtulursunuz, hem de sürekli 15 pixel içeri giderek git gide küçülen bir görüntüden kurtulmuş olursunuz. Bundan dolayı eğer bir container altında sütun kullanacaksanız mutlaka row eklemeniz gerekmektedir. Bu durumda her daim doğru nesting şu şekilde olur:

container / container-fluid > row > col-...-...

Sütunlar konusu ileriki alanlarda detaylandırılacaktır.

Slaytın doğru bir şekilde çalışması için gerekli olan ana element yukarıdadır. Sınıf carousel slide şeklinde tanımlanmalı ve data nesnelerine dikkat edilmelidir. Bu bağlamda data-ride nesnesi string bir değer alır. İçerisine gelen carousel değeri ile resimleri üst üste yığıp oklar aracılığıyla döndürmeye başlarsınız. Ardından gelen dara-interval nesnesi eğer yazılırsa resimleri otomatik olarak döndürmeye başlar fakat içerisine integer bir değer bekler. Milisaniye cinsinden aldığı değer doğrultusunda slide çalışmaya başlar. (Not: 1s = 1000ms) Son olarak da devreye giren data-pause özelliği Mouse slider alanına girince, otomatik döndürmenin durup durmayacağı kararını verir ve boolean bir değer bekler. Bu mantıksal sınama false olduğu zaman otomatik döndürmeyi durdurmuş olursunuz.

ASP.NET MVC Kitap - Bootstrap

Bootstrap Kullanımı

Bootstrap'ı Temelleri

Bootstrap'ı Dahil Etmek

Standart Bootstrap

Bootstrap Kaynak Kod (LESS Derleme Metodu)

SASS Metodu

Bootstrap CDN

Sayfa Oluşturmak

Site Menüsü

Slider

Yorum Yaz

Sonraki Bölümler

Makale Etiketleri