Sayfa Reklamı

Browsing Tag

bootstrap

Bootstrap, Genel

Punto, Pixel, Em ve Yüzde Çeviri Tablosu

Merhabalar,

Bugün hayatımda ilk defa photoshop kullanmak zorunda kaldım ve birçok (pt) vs. dönüştürmek için net üzerinden araştırma yapmam gerekti ve aşağıdaki gibi bir sonuç buldum. Güzel ve yararlı bir tablo benim görüşüm üzerine inşallah sizlerinde işlerine yarar.

Punto

Piksel

Em

Yüzde

6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%
Bootstrap, CSS

Bootstrap Yenilendi!

Merhaba Arkadaşlar,

Bildiğimiz üzere bootstrap dünyaca bilinen CSS framework’tür. Bağzen işlerimizi kolaylaştırırken bağzen ise zorlaştırdığı alanlarda olabiliyor ve şuanda sizlere kendi sitesini uzun bir aradan sonra yenilemiş olduğunu görmekteyim vede böyle gelişmeleri bu tür çalışmalarda görmek beni gururlandırıyor bu tarz şeyleri kullanmak yada etrafındakilere bahsetmek güzel sizlerede derslerini vereceğim kısa süre içerisinde Takip’te kalın 🙂

Son Halinden Ufak Bir Görüntü :

Screenshot_2

Not : Resim HD olduğu için tıklayarak içerisinden görüntülemenizi tavsiye ederim.
Websitesi : www.getbootstrap.com

Bootstrap, CSS, HTML

Bootstrap Nedir ?

Merhaba Arkadaşlar,

Bugün sizlere bootstrap hakkında biraz bilgi vereceğim. Kullanması kolay ve birçok avantaj sağlayan tabi bu avantajları sağlarken dezavantajlarıda var size bunları göstereceğim ve ardından Bootstrap ile ilgili birkaç video’lu ders hazırlayacağım Bootstrap hakkında size bilgi vereceğim nasıl yapılır ve nasıl kullanılır gibi birçok terimi birlikte göreceğiz…

Nedir Bu Bootstrap :
Aslında çok geç kalınmış bir yazı olan fakat bir türlü vakit bulamadığım için hazırlayamadığım bu yazıda, twitter ‘ın frontend developerlarından @mdo ve @fat tarafından 2010 ortalarında geliştirilmiş açık kaynak kodlu bir front-end framework olan bootsrap’den bahsettim. Yapısında tüm gerekli css, js ve görselleri barındıran bootstrap, geliştiricilerin hayatını kolaylaştıran ve front-end geliştirmelerinde hızınıza hız katan bir framework’dür.

Neden Bootstrap :
Aslında araştırdığınızda benzeri bir çok framework olduğunu görebilirsiniz. Ancak, (sayısal verilere sahip değilim ama) en çok kullanılan olduğunu düşündüğüm bootstrap, twitter gibi bir devinde desteği ile çok daha fazla geliştiriciye çok daha hızlı duyurulduğundan ve geliştiricilerinde beğenmesi sonucu github üzerinden iyi katkı sağladıklarını düşünürsek, “neden?” sorusuna cevap vermiş oluruz heralde.

Bu zamana kadar neden keşfedemedik :
Öncelikle baş nedenlerimizden birisi, responsive design için biçilmiş kaftan. Günümüzde hala genişlik yükseklik vs. css kuralları verirken sadece “%” vererek bunu yapacağını sanan arkadaşların da bulunduğunu biliyoruz (saklanmayın, biliyorum oradasınız 😉 ). Ancak günümüz css teknolojisi, “media query” denilen css query’leri ile, farklı ekran çözünürlükleri için farklı css kuralları vermenize izin veriyor. örnek vermek gerekirse;

@media(max-width: 500px){.class_adı{width:200px;}} dediğimiz de, ekran genişiği maksimum 500 pisel olduğunda adı belirilen class’ın genişliği 200px olsun demiş oluyoruz, tabiki bilen arkaşlarımızı da sıkmam istemem fakat hadi örnek vermişken bir örnek daha vereyim @media(min-width: 501px)and(max-width: 1200px){.class_adı{width:450px;}} şeklinde yazdığımızda ekran çözünürlüğü en az 501px en fazla da 1200px olan ekranlarda adı verilen class’ın genişliğini 450px yapmış oluyoruz.

İşte bootstrap içerisinde bir çok hazırlanmış class ile bizi bir çok temel eleman için bu kodları yazmaktan kurtarıyor ve biz bu kodları istersek kendi istediğimiz gibi görünmesini istediğimiz de değiştirmek için kullanıyoruz sadece.

Öte yandan o kadar detaylı düşünülmüş ki, icon’lardan tutunda, form elamanları, butonlar, input’lar, table’lar herşey var. Hatta ve hatta, carousel, modal, scrollspy, tooltip, popover vs. gibi javascript kullanılarak geliştirilmiş bir çok elemanıda emrinize amade ediyor !!

Nasıl Kullanıcağız :
Bootstrap’e sahip olmak kesinlikle ücretsiz. Öncelikle şuradan son versiyonu ya da dilersek bir önceki versiyonu indiriyoruz. Yine aynı sitede (ki; resmi site) gerekli dökümantasyona ulaşabilir ve kollayca kullanmaya başlayabilirsiniz.

İlerleyen zamanda Bootstrap hakkında video’lu derslerimide bloğumda görebileceksiniz.