• Bootstrap
  • Bootstrap 2.x versiyonunundan 3.x versiyonuna geçiş kodları listesi (Bootstrap v2.x to v3.x migrating codes list)

    Bootstrap 3.x versiyonuna geçiş işlemindeki büyük değişiklikler, yenilikler ve kullanılmayacaklar listesi aşağıdaki gibidir. Bootstrap 3.x versiyonu geriye doğru uyumlu değildir. Class değişiklikleri v2.x v3.x .row-fluid .row .span* .col-md-* .offset* .col-md-offset-* .brand .navbar-brand .navbar .nav .navbar-nav .nav-collapse .navbar-collapse .nav-toggle .navbar-toggle .btn-navbar .navbar-btn .hero-unit .jumbotron .icon-* .glyphicon .glyphicon-* .btn .btn .btn-default .btn-mini .btn-xs .btn-small .btn-sm .btn-large .btn-lg […]

  • Bootstrap
  • Bootstrap 3.x offset kodu kullanımı örneği (Bootstrap 3.x offset code usage example)

    Bootstrap 3.x ile “offset” kullanımı bize soldan boşluk bırakma imkanı sağlar. Şöyle ki, sayfadaki ilgili alanımız 12 eşit parçalaya bölünmüştür. ve biz 4 parçalık kısmını kullanmak istiyoruz ama bu 4 parçalık kısmı sağa yaslı şekilde göstermek istiyoruz diye düşünelim. Burda bize “offset” yardım edecektir. Örnek kullanımı aşağıdaki gibidir.

  • Bootstrap
  • Bootstrap 3.x yatay yazı,sayfa,buton ortalama kodu kullanımı örneği (Bootstrap 3.x horizontal text,page,button centeralise code usage example)

    Bootstrap ile sayfanızda bulunan yazı, buton ve diğer elementleri ortalamak istediğinizde size yardımcı olacak olan class aşağıdaki gibidir. Yukarıdaki class ı ilgili elementlerin üst elementine yerleştirdiğinizde alt elementlerinizin hepsinin yatay olarak ortalandığını göreceksiniz.

  • Bootstrap
  • Bootstrap 2.x yatay yazı,sayfa,buton ortalama kodu kullanımı örneği (Bootstrap 2.x horizontal text,page,button centeralise code usage example)

    Bootstrap ile sayfanızda bulunan yazı, buton ve diğer elementleri ortalamak istediğinizde size yardımcı olacak olan class aşağıda gibidir. Yukarıdaki class ı ilgili elementlerin üst elementine yerleştirdiğinizde alt elementlerinizin hepsinin yatay olarak ortalandığını göreceksiniz.

  • Bootstrap
  • Bootstrap 2.x offset kodu kullanımı örneği (Bootstrap 2.x offset code usage example)

    Bootstrap “offset” kullanımı bize soldan boşluk bırakma imkanı sağlar. Şöyle ki, sayfadaki ilgili alanımız 12 eşit parçalaya bölünmüştür. ve biz 2 parçalık kısmını kullanmak istiyoruz ama bu 2 parçalık kısmı sağa yaslı şekilde göstermek istiyoruz diye düşünelim. Burda bize “offset” yardım edecektir. Örnek kullanımı aşağıdaki gibidir.

  • Bootstrap
  • Bootstrap “radio button” kodu kullanımı örneği (Bootstrap “radio button” code usage example)

    Twitter Bootstrap te kullanabileceğiniz “radio button” örnek kodları aşağıdaki gibidir. Alt alta kullanabileceğiniz “radio button” örneği: Kodu çıktı görüntüsü şöyle olacaktır: Yan yana yani aynı satırda kullanabileceğiniz “radio button” örneği: Burda bize yardımcı olan bootstrap class’ı ise “inline” dır Kodun çıktı görüntüsü şöyle olacaktır:

  • Bootstrap
  • Bootstrap HTML sayfasını,div’i iki sütuna bölme kodu kullanımı örneği (Bootstrap dividing,splitting HTML page,div into two columns code usage example)

    Twitter Bootstrap ile bölünebilir HTML parçanızı, form bölümünüzü, div parçanızı ikiye bölmek istediğinizde size aşağıdaki kod blokları yardımcı olacaktır. “row” class’ı sabit genişlik sağlar, “row-fluid” ise ekranın genişliğine göre yüzdesel genişlik özelliği kazandırır. “row” veya “row-fluid” class’ını alan div’lerinizi bir kapsayıcıya,konteynere koyarak sağdan ve soldan sayfayı hızalamasını istediğinizde size yardımcı olacak olan Bootstrap sınıfları “container” […]

  • Bootstrap
  • Bootstrap yerleşim planı düzenleri kodu kullanımı örneği (Bootstrap Layouts code usage example)

    Twitter Bootstrap bize sayfa yerleşim planı düzenleri için “container” ve “container-fluid” sınıflarını(class) sunmuştur. “container” sınıfı ile genel sabit genişlik düzeni sağlamaktadır. Sağdan ve soldan ortak eşitlikte mesafeler kalacak şekilde HTML parçamızı ortalar. “container-fluid” sınıfı ile ise değişmez 2 sütunlu sayfanın genişliği ile birlikte esnek şekilde değişen bir sayfa oluşturmamız mümkün olur. “container” örnek kod bloğu […]

  • Bootstrap
  • Bootstrap indirme, kurulumu, kullanımı, gereksinimleri ve Neden Bootstrap?

    İndirme: Twitter Bootstrap’i indirmek için aşağıdaki adresteki istediğiniz versiyonu indirebilirsiniz. Bootstrap versions Kurulumu(yerleşimi): Kurulumdan değil dosyaları kullanmanız söz konusudur. İndirmiş olduğunuz dosyanızın içerisindeki “bootstrap.min.css” ve “bootstrap.min.js” dosyalarınızı HTML sayfanızda aşağıdakine benzer dizin yapısındaki gibi tanımladığınızda artık sizde Bootstrap kolaylıklarından faydanabileceksiniz. Kullanımı: Bootstrap kullandığınızda HTML etiketlerinizde genişlik(width), arkafon rengi(background-color) gibi stil niteliklerini sürekli kullanmanıza gerek kalmayacaktır. […]