Bootstrap Kütüphanesi Nedir?

Bootstrap Kütüphanesi Nedir?

Herkese merhabalar. Bu başlıkta Bootstrap kütüphanesinin nimetlerinden bahsedeceğim. :) Bildiğiniz gibi son yılların en popüler front-end kütüphanelerinden olan Bootstrap, özellikle hazırladığı hazır content tasarımlarıyla popülaritesini hızla arttırmaya devam ediyor. Belkide saf html ve css kullanarak onlarca satır kodla oluşturacağımız bir divi bile, Bootstrap kütüphanesiyle hem ücretsiz hem de birkaç satır kodla oluşturabiliyoruz. Peki Bootstrap kütüphanesine ve bu kütüphaneyi projelerimize nasıl dahil edeceğimize gelin birlikte bakalım.

Neden Bootstrap Kullanmalıyız?

WordPress, Page Builder ve creative HTML temalarda kullanılan Bootstrap, MIT Lisansı ve Apache Lisansına sahip, açık kaynak kodlu HTML & CSS kütüphanesidir. Bu kütüphaneyi diğer stil kütüphanelerinden ayrıcalıklı kılan özelliği ise, çok daha pratik ve estetik olmasıdır. Özellikle grid sistemli tasarım imkanı, oluşturulan divlerin masaüstü, tablet ve mobil uyumlu yani responsive olması, Bootstrap kütüphanesinin başlıca avantajlarındandır. Bir örnek vermek gerekirse; Örneğin biz HTML ve CSS kullanarak bir buton oluşturmak istiyoruz. Hatta şöyle renkli, hover değerleri olan bir buton oluşturalım;
 

<.input type="button" value="Butonum" class="benimbutonum">

<.style>
.benimbutonum {
color: #fff;
background-color: #007bff;
border-color: #007bff;
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: .37rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
<./style>


bootstrap-kutuphanesi

Butonumuzu oluşturduk ve çıktısı yandaki görselde göreceğiniz şekilde olacak. HTML ile butonumuzu ekledik ve CSS ile biçimlendirmesini yaptık. Şimdi dilerseniz gelin bir de aynı butonu Bootstrap ile hazırlayalım.

 

	<.button type="button" class="btn btn-primary">Butonum<./button>


Çıktı:

bootstrap-kutuphanesi

Evet, hepsi bu kadar! :) Bootstrap ile aynı butonu oluşturdum ve sadece 1 satır HTML kodu kullandım. Çünkü bootstrap kütüphanesinde tüm bu buton ve biçimlerin CSS tanımları yapılmıştır. Bizler sadece butonun “class”ındaki ismi değiştirerek dilediğimiz görüntü ve şablonda buton elde edebiliriz. Örneğin Bootstrap’ın paylaşmış olduğu diğer butonları bu başlık altına ekleyelim:

bootstrap-nasil-eklenir

 

<.button type="button" class="btn btn-primary">Primary<./button>

<.button type="button" class="btn btn-secondary">Secondary<./button>

<.button type="button" class="btn btn-success">Success<./button>

<.button type="button" class="btn btn-danger">Danger<./button>

<.button type="button" class="btn btn-warning">Warning<./button>

<.button type="button" class="btn btn-info">Info<./button>

<.button type="button" class="btn btn-light">Light<./button>

<.button type="button" class="btn btn-dark">Dark<./button>

<.button type="button" class="btn btn-link">Link<./button>


Tüm bu buton tasarımları, grid sistemler, formlar, inputlar, tab ve menü yapıları gibi daha bir çok şeyi Bootstrap kütüphanesiyle pratik bir şekilde ulaşıp kullanabilirsiniz! Peki şimdi gelelim Bootstrap’ı projemize nasıl dahil edeceğimize;

Bootstrap’ı Nasıl Dahil Edebiliriz?

Öncelikle şunu bilmelisiniz ki Bootstrap, açık kaynak kodlu bir sistemdir ve ücretsiz bir şekilde projelerinize dahil edebilir, dilediğiniz gibi düzenlemesini yapabilirsiniz.

Bootstrap Dosyalarını İndirerek Dahil Etme

Bootstrap’ı projeye dahil etmek için öncelikle Bootstrap’ın kendi web sitesine giderek, açık sunmuş olduğu CSS ve JS dosyalarını indirerek projenize dahil edebilirsiniz. Bootstrap Dosyalarını İndir « bağlantısına tıklayarak bootstrap sitesine erişim sağlayabilirsiniz. Bu kısımda yer alan dosyaların tamamını indirmenize gerek yoktur. Projeniz dahiline neler işinize yarayacaksa onları dahil edebilirsiniz.

Bootstrap Dosyalarını CDN İle Dahil Etme

Eğer bootstrap dosyalarını sunucunuza indirmek istemiyor ve bootstrap güncellemelerini otomatik almak istiyorsanız, web sitenizin

tagları arasına Bootstrap kütüphanesini çağırmanız yeterlidir.

CSS

<.link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


JS

 

<.script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"><./script>

<.script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"><./script>

<.script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"><./script>


Hepsi bu kadar! Artık siz de rahatlıkla Bootstrap kütüphanesinden faydalanabilir ve hem responsive hem de daha kreatif tasarımlara imza atabilirsiniz! Bootstrap’la yapılmış örnek projeleri görmek için Bootsnipp « adresini ziyaret edebilirsiniz! İyi çalışmalar dileriz! :)