12 Mart 2015 Perşembe

Bootstrap -Giriş

     


        Bu yazıyı yazmamdaki amacım Bootstrap ile uğraşmaya hevesi olan arkadaşların Github üzerinden bootstrap web sayfasını nasıl oluşturacağını göstermektir. Aslına bakılırsa bu işe hevesli olan kişilerin araştırıp bu işi yapmaları çok zamanlarını almayacaktır fakat en ufak bir zaman kaybının da çok önemli olduğunu düşünerek bu yazıyı yazmaya ihtiyaç duydum.
        Öncelikle bootstrap hakkında çok kısa bir bilgi vereyim. Bootstrap; büyük ölçüde günümüz teknolojisine uyumlu, HTML, CSS ve JS bileşenlerini içinde barındıran, web sitelerini hızlı, kaliteli hale getiren son derece popüler bir web teknolojisidir. Yani bootstrap ile oluşturulan web uygulamaları veya siteleri son derece efektif ve kullanışlıdır. Bootstrap'ı indirmek için http://getbootstrap.com/ tıklayarak ilgili adrese gidebilirsiniz.
       Github kullanıcılarına kullanıcı isimleri ile birlikte .github.io uzantılı olacak şekilde bir domain oluşturma hakkı tanıyor. Github kullanıcıları buradan çeşitli paylaşımlar ve benim şimdi yapacağım gibi bir web sitesi servisi sağlayabilir.
       Bootstrap'ı indirdikten sonra (ben distrubition 3.3.2 yi indirdim siz farklı sürümünü indirmiş olabilirsiniz) .zip dosyasını bir klasöre çıkartın.




        Normalde resimdeki .html uzantılı dosya hariç diğer 3 dosyayı göreceksiniz. İşte dosyaların hepsi bootstrap'in en sade şekliyle kendisidir. Yazılımcı'nın kullanacağı bileşenler buradadır. İhtiyaca göre dışardan ek dosyalar da eklenebilir. index.html dosyası tarayıcıdan sizin adresini yazan birinin karşılaşacağı içeriğin oluşturulduğu dosyadır. O yüzden sizde aynı şekilde bir dosya oluşturun. Bu index.html dosyasını açmak için size tavsiyem Sublime Text2'yi tavsiye ederim. Kodlarınız bu editör yardımıyla daha anlaşılır yazabilirsiniz. Konuya dönersek içeriği çok sade bir biçimde;





yaptım. Burada temel HTML içeriğinin yanında örnek olsun diye yine aynı dosya içine script kullanıp hedef gösterilerek hedefteki dosyayı kullanacağımı belirttim. Böylelikle sayfa belirtilen hedef içeriklerine ulaşabilecektir. Bunu binevi köprü olarak nitelendirebiliriz. index.html gibi fakat farklı isimde birden fazla .html dosyası oluşturup kullanıcılara görünteleyebilirsiniz. Ama unutmamak gerekir ki tarayıcıya sizin adresinizi yazan kişi ilk olarak index.html dosyasının içeriği ile karşılaşır. O yüzden index.html dosyasını oluşturmak önemlidir. Şimdi bu içerikleri web sunucuda çalıştırmak için Github hesabınızda kendi kullanıcıadınız.github.io isminde bir repository(depo) oluşturun. Buradaki kritik nokta kesinlikle kullanıcı adınızı kullanmanızdır. Aksi takdirde servisi veremezsiniz. Oluşturduğunuz bu repo'ya tüm bootstrap içeriğinizi (ilk resimdeki tüm dosya ve klasörleri) push edin ve kaydedin. Artık hemen hemen tüm tarayıcıdan kullanıcıadnız.github.io adresini aratan kişiler index.html sayfanızın içeriğini görüntüleyecektir. Bootstrap'ı iyi öğrenmek ve ayrıntılı bilgiler için http://www.w3schools.com/bootstrap/default.asp adresinden yararlanabilirsiniz. 

Hiç yorum yok:

Yorum Gönder