Web Yazılım

Bootstrap Nedir? Özellikleri Nelerdir?

Bootsrap Nedir, Özellikleri Nedir ?

Bootstrap responsive yani duyarlı web siteleri ve uygulamaları oluşturabilmemizi sağlayan bir Css, html şablonlarıdır. Bu tür şablonlar genelde framework olarak adlandırıldığı için Bootstrap de bir frameworktür. Bootstrap ile oluşturulmuş web siteleri ve web uygulamaları cep telefonu bilgisayar ve tablet gibi farklı ekran boyutlarına uyumluluk sağlayabilmektedir. Bootstrap’in bu responsive tarafı onun popüler hale gelmesini sağlamıştır. 2015 yılından bu yana github üzerinden 80 binin üzerinde fork edilmiştir.

Bootstrap Özellikleri Nelerdir?

Bootstrap duyarlı bir şablon olmasının yanında web siteleri ve web uygulamalarının ihtiyaç duyacağı bütün elementleri de sağlayabilmektedir. Örnek vermek gerekecek olursan açılır menüler, uyarı metin kutuları, navigasyon menüleri, çeşitli modüller gibi birçok elementi içerisinde barındırır. Bazı başka özellikleri ise şöyle:

  1. Bütün var olan popüler tarayıcılar tarafından desteklenir
  2. JQuery ve JavaScript ile desteklenmiş güçlü kod yazımı sunar
  3. Izgaralandırma sistemi sayesinde istenilen her bölüme müdahale imkanı sağlar.
  4. Web siteleri ve uygulamaları için ihtiyaç olabilecek her elementi destekler.

Bootstrap Nasıl Kullanılır?

Şablon olması sebebiyle kopyala yapıştıra dayalı bir sistem gibi görülebilir ancak bu şablonlar üzerinde kendi özelleştirmelerimize olanak sağlamaktadır. Birçok web sayfasının birbirine benzemesi bu durumdan dolayı kaynaklanmaktadır.

Bootstrap’in genel olayı, her satır 12 eş parçaya dilimlenir bu parçalar başlatıldığı cihaza göre esneyip daralabiliyor. Örnek vermek gerekirse her ekran için 3’lü sütunlar oluşturmak için:

<div class=”row”>

    <div class=”col-md-4″></div>

    <div class=”col-md-4″></div>

    <div class=”col-md-4″></div>

</div>

12’li parçaları 4 eşit 3 parçaya bölerek bu işlemi gerçekleştirebiliriz. Bu sütunların duyarlı olmasını sağlayan classlar .col-md- ve .col-xs- sınıflarıdır. Cep telefonları için .col-xs- , tabletler için .col-sm- , bilgisayarlar için .col-md- sınıfları kullanılır.

Farklı sınıfların birlikte kullanımı da mümkün olmaktadır şu kod ile bilgisayar için 4 sütun cep telefonları için 2 sütun göster diyebiliriz.

<div class=”row”>

    <div class=”col-md-3 col-xs-6″></div

    <div class=”col-md-3 col-xs-6″></div>

    <div class=”col-md-3 col-xs-6″></div>

    <div class=”col-md-3 col-xs-6″></div>

</div>

Bootstrap Nasıl İndirilir ?

https://getbootstrap.com/ adresinde gerekli tüm dosyalar mevcuttur.

İlk indirilecek olan dosya bootstrap-4.5.0.zip dosyası Bootstrap’in tüm script, css dosyalarını barındırır. İkinci olarak indirilecek bootstap-4.5.0-dist.zip dosyası ise web sayfalarınız için önemli bağlantı yollarını ve elementlerini barındırıyor.

Bootstrap’i CDN ile Projelere Ekleme

Kullanmak istediğiniz şablonları veya tasarımla projenize otomatik olarak ekleyebilmek için https://www.bootstrapcdn.com sayfasındaki yönergeler ile yapılması gereken işlemler vardır.

Aşağıdaki kodu da projenize entegre edebilirsiniz:

<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” integrity=”sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin=”anonymous”>

<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js” integrity=”sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy” crossorigin=”anonymous”></script>

JQuery ve Popper.js dosyalarının CDN versiyonları için:

<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js” integrity=”sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49″ crossorigin=”anonymous”></script>

Bootstrap Kurulumu

  1. İndirilen zip uzantılı dosyaları normal klasöre çıkartın.
  2. https://getbootstrap.com/docs/4.1/examples/ adresindeki örnekleri de kullanabilmenin yanı sıra ana dosyaları indirdiğimiz sayfada examples zip dosyasını da indirebilirsiniz
  3. Aktif olduğunu anlayabilmek için Examples klasörü içindeki navbar örnek şablonun index.html dosyasını   bootstap-4.5.0-dist klasörünün içine kopyalayın.
  4. Bootstrap’in çalıştığından emin olduktan sonra kodlamalarınız kendi fikirleriniz ile değiştirebilir yazabilirsiniz.

Diğer bir yol ise:

  1. İnen dosyaları klasöre çıkarttıktan sonra, çıkan dosyaları projenizin yer aldığı ana bölüme kopyalayın
  2. <head> etiketinden hemen önce <link href=”css/bootstrap.min.css” rel=”stylesheet”> yazın.
  3. http://code.jquery.com adresinden güncel versiyonu olan JQuery dosyasını da indirip js klasörüne kopyalıyoruz.
  • <body> etiketinden hemen sonra
  • <script src=”http://code.jquery.com/jquery-3.5.1.js” integrity=”sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=” crossorigin=”anonymous”></script>

Kodunu ekliyoruz.

Bootstrap ile farklı ekranlarda türlü türlü sorunlara yol açan web site veya web uygulamalarını rahat bir kod yazımıyla çözümleyebilir. Ayrıca web teknolojileri ile ilgi iseniz Bootstrap’in inanılmaz rahatlık sağladığını görebilirsiniz.

Share on whatsapp
Share on facebook
Share on twitter
Share on linkedin
Share on tumblr
Share on reddit
Share on pinterest
Share on vk
Share on skype
Share on telegram
Share on email

Author

Murat Tan