AnasayfaBlogBootstrap Nedir? Nasıl Kullanılır?
Nedir?

Bootstrap Nedir? Nasıl Kullanılır?

31 Mart 2020
Bir adam iki bilgisayar ekranının önünde oturmuş, hafifçe aşağıya doğru bakmaktadır. Ellerini başının üzerine koymuş ve parmaklarını birbirine kenetlemiş. Başı hafifçe yana eğiktir ve görüntünün sağ alt köşesinde odakta siyah bir kalem görülmektedir. Başının arkası görünüyor ve arkasındaki duvar tuğladan yapılmış. Arka planda beyaz bir kağıdın bulanık görüntüsü var. Adam odaklanmış ve düşünceli görünüyor ve görüntüdeki atmosfer bir konsantrasyon atmosferi.
Bootstrap UnsurlarıTanımAçıklama
BootstrapÖn-yüz çatı aracıWeb sayfalarını ve uygulamaları geliştiren, düzeltmeye yardımcı olan ve açık kaynak kodlu bir yazılımdır.
GeliştiriciTwitter2010 yılında Twitter, Bootstrap projesini başlattı ve yazılımın geliştirilmesini sağladı.
Piyasaya Sürülme Tarihi19 Ağustos 2011Bootstrap, ilk sürümünü 2011 yılında yayınladı ve zamanla daha da geliştirildi.
AltyapıHTML5, CSS3, Javascript, jQueryBootstrap, HTML5 ve CSS3 gibi alt yapılarla güçlendirilmiş, Javascript ve jQuery gibi diller tarafından desteklenir.
AmaçTüm cihazlara uygun tasarım modellemesiProgramın temel amacı, tüm cihazlara uyumlu web tasarımı oluşturabilmektir.
Kullanım biçimiHazır kurulu bir sistemBootstrap, hazır kurulu bir sistem olup, kopyala yapıştır mantığıyla çalışır.
Bootstrap Grid SistemiIzgara sistemiBu ızgara sistem sayesinde web sitesinin yapım süreci hızlanır.
KapsayıcıGrid üzerindeki yerleşimi sağlarKapsayıcı, Bootstrap grid üzerinde her şeyin tam yerleşmesini sağlar.
Satırlar12 kolon üzerine kuruludurSatırlar, ana kapsayıcının oluşturduğu boşlukları doldurur.
KolonlarSütun bölümleriKolonlar, satırların içerisinde yer alır ve içerikleri düzenler.

Günümüzde her şirketin ya da kurumun bir web sitesi vardır. Hatta bireysel siteler bile yaygın şekilde kullanılmaktadır. Wordpress tabanının bunda etkisi büyüktür. Kolay kurulum ve basit ara yüz ile kullanıcılar kendilerine ait web sayfası oluşturabilmektedir. Bootstrap web sayfası yaparken veya düzenlerken önemli bir konuda sizlere yardımcı olmaktadır. Bootstrap ile beraber yapacağınız siteyi akıllı cihazlara uyumlu hale getirmek daha kolay. Sadece bu özelliği ile öne çıkmamaktadır. Aynı zamanda araç, birçok tasarım yapmanıza da olanak sağlar.

Geçmişte web sitelerinin tasarımı ve akıllı cihazları uyumu çok düşünülmezdi. Fakat 2020 yılında bunun önemi daha da anlaşılır hale geldi. Bu furya elbette şimdi başlamadı. Akıllı cihazların hayatımızda yer edinmesiyle birlikte sitelerin mobil uyumu da önemli hale geldi. Web sitesi sahipleri için bu süreç biraz sancılı başladı. Zamanla her şey yerine oturdu. Şimdilerde Google, mobil siteleri şart koşuyor desek abartmayız. Kullanıcıların birçoğu internete akıllı cihazlardan girmesi alınan kararı doğrular nitelikte. Google, mobil uyumlu web sitesi olmayanları daha alt sıralarda gösterdiği herkes tarafından bilinir. Ancak zamanımızda kurulumu gerçekleşe siteler mobil uyumludur.

Bootstarp tam da bu konuların tartışıldığı zamanda ortaya çıktı. İyi şekilde geliştirilen program, insanların ihtiyaçlarına karşılık verebilme gayesi ile yola çıktı. Programın altyapısı birçok unsura da izin vermektedir. Sitenin içinde yer alan; sayfa, etiket, uyarı, metinler, menü ve form öğeleri gibi konularda yardımcı olmaktadır. Kısacası yapmak istediğiniz her şeyi kolay ve basit şekilde Bootstrap ile halledebilirsiniz. Bootstrap nedir? Nasıl kullanılır ve nerede işimize yarar? Sorularına daha fazla açıklık getirelim.

Bootstrap Ne Anlama Gelir?

Bootstrap kelimesinin İngilizce karşılığına baktığımızda çizme atkısı anlamı ortaya çıkıyor. Ancak çoğu yerde önyüz çatısı olarak geçiyor. Bootstrap, açık kaynak kodlu yazılıma sahiptir. Web sayfaları içinde ya da uygulamaları geliştirmede ve düzeltmede kullanılabilecek araçların bütününe verilen işlemlere Bootstrap denir. Programı ortaya çıkaran sosyal medyanın güçlü ağı Twitter’dır. Programlamayı tamamen Twitter tasarladı ve geliştirdi.

Twitter, projeyi ortaya çıkardığında sene 2010’du. 10 sene önce açık kaynak kodlu bir tasarım geliştirdi ve şimdilerde dünyanın popüler programı haline geldi. Program ilk ismini Twitter Bluprint olarak kullandı. Daha doğrusu çevreden böyle biliniyordu. Tanıtılmasının ardından asıl ismiyle birlikte kullanılmaya başlandı. Bootstrap piyasaya 2011 yılının 19 Ağustos günü ilk sürümünü alarak çıktı. Zamanla 2. ve 3. sürüleri de aldı. Bootstrap 2’de tema ve farklı fonksiyonlar eklendi. Bootstrap 3 ile beraber ise, mobil öncelikli bir yaklaşım sağlandı. Bootstrap 3 sürümü halen kullanılmakta ve gayet başarılı sonuçlar vermektedir. Chrome, Safari, Opera, Firefox ve Internet Explorer gibi birçok web tarayıcısında sorunsuz şekilde çalışmaktadır.

Bootstrap aynı zamanda bir kütüphane gibi de tanımlanır. HTML5 ve CSS3 gibi alt yapılarla güçlendirilmiştir. Bootstrap, javascript ve jquery gibi programlama dilleri tarafından desteklenir. Bootstrap’ın asıl amacı tüm cihazlara uygun şekilde tasarım modellemesi yapmasıdır. Programlama birçok imkanı kullanıcıların inisiyatifine bırakır. Serbest kullanıma izin verir.

Bootstrap, responsive design yani duyarlı tasarım yapmanın en kolay yoludur. Duyarlı tasarım yaparken yardımcı olur. Kısacası yazının başında da belirttiğimiz gibi tüm cihazlara uyacak şekilde bir tasarım ortaya çıkarır.

Bootstrap Nasıl Kullanılır?

Bootstrap nedir, sorusuna cevap bulduk. Şimdi ise program nasıl kullanılır ve ne yapmak gerekir buna bakalım. Hazır kurulu bir sistem olması işinizi daha da kolaylaştırır. Kopyala yapıştır mantığı ile işlerinizi halledebilirsiniz. Fakat öncesinde sayfanın HTML5 ve CSS dosyası ile birlikte jquery scriptine hazır olması gereklidir. Hazır olduktan sonra sayfaya bunları eklemelisiniz. Sayfa düzeninde kullanacağınız bir öğeye getbootstrap sitesini referans yapmalısınız. Daha sonrasında sizlere gerekli olan kodları kopyalayın ve yapıştırın. Ayrıca bu işlemleri Bootstrap CDN üzerinden de yapmak mümkün. Bootstrap CDN eklemelerini alarak bulunan projeye dahil edebilirsiniz.

Bootstrap grid sistemine sahiptir. Yani Türkçe tabirle ızgara sistemi vardır. Bu ızgara sayesinde sitenin asıl yapım aşaması hızlanmış olur. Bootstrap grid sayesinde kodlama süreleri ciddi oranda düşer. Kodlama yaparken bu yapının oluşması kullanıcıya büyük kolaylık sağlar. Izgara yapısı 3 ana esasa dayanır; kapsayıcı, satırlar ve kolonlar.

Kapsayıcı: Bootstrap grid üzerinde her şeyin tam yerleşmesini sağlar. Satırların oluşabilmesi için kapsayıcıya ihtiyaç vardır.

Satırlar: 12’li bir kolon üzerine kuruludur. Kolonların ya da sütunların kendilerini atmasına engel olur. Ana kapsayıcının oluşturduğu boşlukları doldurur. Şuna dikkat etmek gerekir, satırları ana kapsayıcı dışında kullanılmamalıdır. Zaten kullanmaya çalıştığında size yanıt vermez. Görevi dışında kullanmamaya özen gösterin. Herhangi bir hata ile karşılaşmamak için önemli.

Kolonlar: Izgara yapısında son olarak kolonlar yer alır. Burada sağ ve sol tarafta dolgu malzemeleri bulunur. Bu dolgu malzemeleri satır ile aralarında yer alan mesafeyi ayırmak için eklenir. Her ayrı kolon için bu işlemde aynı etkiyi gösterir.

Olayları biraz daha basit dille anlatalım. Mantık olarak sistem, sütun esasına göre çalışır. Bir satırın 12 sütuna bölünmesi şeklinde oluşmaya başlar. Oluşan sütunlar sayesinde farklı cihazlarda görme imkanı olur. Örnek verecek olursak, geniş ekrana sahip olan bir cihazda 4’lü sütun yapısı var. Bu durumda 12 sütunu 3 ayrı sütuna bölerek uyumlu bir yapı oluşturabiliriz.

Bootstrap Kullanım Yerleri

Bootstrap programının kullanım alanı sandığınızdan daha geniştir. Herhangi standart işlemlerin dışında birden fazla unsur tasarlanabilir. Program, web sitesinin her alanında kullanıma açıktır. Sitenin içinde yer alan öğeleri istediğiniz şekilde şekillendirmeniz konusunda yardımcı olur. Navigasyon, modal pencereler, slider, tablolar ve tipografik öğeler gibi alanlarda kullanılabilir.

Temel Programlamaya Giriş ve Bootstrap Eğitimi

Bootstrap eğitimi almak isteyenler için bir fırsat. Enstitü birçok konuda verdiği online eğitimler serisine bu sefer Bootstrap’ı da ekledi. Online şekilde kolaylıkla programlama eğitimine sahip olabilirsiniz.

Programlama ve kodlama işlerine merakınız varsa, Enstitü üzerinden eğitim alabilirsiniz. Temel programlamaya giriş tam da size göre. 1 hafta süren eğitimlerde temel düzeyde bilinmesi gereken programlama ve kodlama öğretilmektedir. Web sitesi ve internet alanında kodlamaya merak duyunlar için oldukça uygundur. Hatta bu kurs sonrasında Python eğitimi de alınabilir. Python hakkında birçok bilgi ve birikim de yine bu eğitimde yer almaktadır.

Yazılım konusunda ilerlemek için bu fırsatı kaçırmayın. Kod yazma konusunda kendinizi geliştirin. Evde kaldığınız süreyi değerli şekilde kullanabilirsiniz. İnternetin olduğu her yerde rahatlıkla online eğitim programlarına katılabilirsiniz. Aynı zamanda alınan eğitimlerde başarı durumuna göre sertifika da sizlere verilmektedir.

Bootstrap, Ön-yüz çatı aracı, Web sayfalarını ve uygulamaları geliştiren, düzeltmeye yardımcı olan ve açık kaynak kodlu bir yazılımdır, Geliştirici, Twitter, 2010 yılında Twitter, Bootstrap projesini başlattı ve yazılımın geliştirilmesini sağladı, Piyasaya Sürülme Tarihi, 19 Ağustos 2011, Bootstrap, ilk sürümünü 2011 yılında yayınladı ve zamanla daha da geliştirildi, Altyapı, HTML5, CSS3, Javascript, jQuery, Bootstrap, HTML5 ve CSS3 gibi alt yapılarla güçlendirilmiş, Javascript ve jQuery gibi diller tarafından desteklenir, Amaç, Tüm cihazlara uygun tasarım modellemesi, Programın temel amacı, tüm cihazlara uyumlu web tasarımı oluşturabilmektir, Kullanım biçimi, Hazır kurulu bir sistem, Bootstrap, hazır kurulu bir sistem olup, kopyala yapıştır mantığıyla çalışır, Bootstrap Grid Sistemi, Izgara sistemi, Bu ızgara sistem sayesinde web sitesinin yapım süreci hızlanır, Kapsayıcı, Grid üzerindeki yerleşimi sağlar, Kapsayıcı, Bootstrap grid üzerinde her şeyin tam yerleşmesini sağlar, Satırlar, 12 kolon üzerine kuruludur, Satırlar, ana kapsayıcının oluşturduğu boşlukları doldurur, Kolonlar, Sütun bölümleri, Kolonlar, satırların içerisinde yer alır ve içerikleri düzenler
bootstrap bootstrap grid bootstrap 3 bootstrap cdn bootstrap nedir temel programlamaya giriş
Bu resimde ikisi de gözlük takan bir erkek ve kadın görülüyor. Adam mavi bir gömlek ve siyah bir pantolon giyerken, kadın beyaz bir gömlek ve mavi bir kot pantolon giymektedir. Her ikisinin de gözlükleri takılı ve dümdüz ileriye bakıyorlar. Adamın kolu kadının beline dolanmış ve yüzleri birbirine yakın göründüğü için birlikte bir anı paylaşıyor gibi görünüyorlar. Arka plan yumuşak, kirli beyaz bir renktedir. Işık hafif loş, görüntüye yumuşak ve sıcak bir his veriyor. Gözlüklerine rağmen, gözleri hala bir duygu belirtisi gösteriyor. Birbirlerinin varlığından memnun ve mutlu görünüyorlar.
Konuk Yazar
Blog Yazarı

İstanbul İşletme Enstitüsünde yazılarının yayınlanmasını isteyen konuk yazarlarımız için oluşturulan bilgi kartıdır. Birçok alanda ve disiplindeki yazıları bu hesap üzerinde bulabilirsiniz.

Benzer Yazılar
Doğru ve faydalı bilgiler sağlama konusunda kararlı olan uzman ekibimizle blogumuzu her zaman yeni makaleler ve videolarla güncelliyoruz. Güvenilir tavsiyeler ve bilgilendirici içerikler arıyorsanız, blog sayfamıza mutlaka göz atın.