Bootstrap Nedir ?

0

Bootstrap nedir?​

Ücretsiz bir CSS framework’u olan Bootstrap, açık kaynak kodlu bir tasarım aracıdır. Telefon, tablet ve masaüstü bilgisayarlar için farklı ve cihazınızın büyüklüğüyle orantılı şekilde sitenizin görünmesini sağlayan tema ve tasarımları kolaylıkla yapabilirsiniz. Bir site için gerekli olan bütün unsurları içerisinde barındıran Bootstrap ile tasarım yaparken bu hazır unsurları kullanarak tüm cihazlara uygun tasarımlar yapmanızı sağlar. Bu da demek oluyor ki, her şeyi hazır olan kodlarla yeni bir tasarım yaratmak oldukça kolay ve pratiktir. Stiller, imajlar ve JavaScript’ler daha öncesinden Bootstrap’in içine monte edilmiştir. Yapmanız gereken tek şey bunları çağırmanızdır. Bootstrap’in son sürümü olan Bootstrap 5, Chrome, Safari, Firefox, Internet Explorer, Opera gibi neredeyse her internet tarayıcısının son sürümlerinden sorunsuz şekilde çalışıyor.

Bootstrap’in Kullanım Alanları

Bir internet sitesi yaratmak için gerekli olan bütün elementleri içerisinde barındıran Bootstrap ile bir siteyi komple bir bütün olarak tasarlayabilirsiniz. Tipografik ögeler, carousel, tablolar, slider, imajlar, dropdown menüler, modal pencereler, navigasyon bar, butonlar, sayfalandırma, thumbnaili uyarı, etiketler ve yükleme barları, bilgilendirme balonları vb. gibi kullanıcılara hazır olarak sunulmuş. Sizin yapmanız gereken tek şeyse ihtiyacınız olan kodu kopyalayıp yapıştırmak.

Bootstrap Nasıl Kullanılır?

Bootstrap hazır bir sistem olduğu için her şeyi kopyalayıp yapıştırarak halledebilirsiniz. Fakat, öncelikle dosyanız için mutlaka yapmanız gereken şeyler var. Örneğin; sayfanız Html5 olmalı ve Bootstrap için CSS dosyası ile jquery scriptini sayfaya mutlaka eklemelisiniz. Sayfanızda kullanacağınız tüm ögeler için referansınız getbootstrap.com adresi olacak. Siteye giriş yaptığınız üst menüde yer alan Getting Started, CSS, Component ve JavaScript alanlarında sizin için gerekli olan kodları kopyalayıp yapıştıracaksınız.

Bootstrap’in temel tasarım mantığı, bir satırın 12 sütuna bölünmesi ve bu sütunların farklı genişlikteki cihazlara göre daraltılıp esnetilebilmesinden oluşuyor. Böylece bu sütunların farklı cihazlarda görüntülenme şekilleri de değiştirilebiliyor. Örnek verecek olursak, geniş ekranlı bir cihaz için üçlü sütun yapısı düşünüyorsunuz. Bootstrap’in sunduğu 12’ye ayrılan satırı dörderli sütunlar halinde böldüğünüz takdirde üçlü sütun yapısını oluşturabilirsiniz.

Farklı cihazlarda sütunların farklı şekilde davranmasını istediğiniz takdirde kullanılacak cihaza göre sütunların davranması gerektiği şekilde aynı class etiketi içerisine bu genişlikleri birlikte yazabilirsiniz. Örneğin; masaüstü bilgisayarlar için .col-md-3 class’ı ile dörde böldüğünüz satırların tabletlerde iki adet ikili sütun şeklinde görünmesini isteyebilirsiniz. Yani masaüstü bilgisayarda dörtlü sütun olarak görünen satır, tabletlerde iki satıra dönüştürülüp her bir satırda ikili sütun görünecek şekilde davranmasını sağlayabilirsiniz.

Secured By miniOrange