Profesyonel bir web sitesi yapmak istiyorsak, sitemizin tüm cihazlara (masaüstü, dizüstü, tablet, telefon vb) uyumlu çalışması gerekmektedir. Tüm cihazlara uygun tasarım yapısına responsive design (duyarlı tasarım) denilmektedir. Responsive web tasarımı yaparken ise bize en büyük kolaylığı sağlayan Bootstrap teknolojisidir.
İnternetin yaygın kullanılması ve hayatımıza bir çok cihazın girmesi ile birlikte, bir çok teknolojide geliştirilmeye devam ediliyor. Önceleri sadece belirli ölçülerde yapılan web siteleri artık mobil cihazlara da uyumlu hale getirilmek zorunda kaldı. Google ve diğer arama motorları da SEO işlemleri açısından mobil sitelerin önemini sürekli dile getirmekteler. Hal böyle olunca yapılan web sitelerinin tüm ekran boyutlarına uyumlu olması artık şart haline geldi.
İster geniş ekranlı bir masaüstü pc olsun, ister bir notebook, tablet veya akıllı telefon, web sitemiz hangisinde çalışacak olursa olsun, o ekranın ölçülerine göre bozulmadan büyümeli veya küçülmelidir. Bootstrap bize bu imkanı sağlar. Yazımızın devamında, Bootstrap Nedir? Bootstrap Nerede Kullanılır? Bootstrap Nasıl Kullanılır? Bootstrap Izgara Sistemi Nedir? Bootstrap Örnekleri konularına açıklık getireceğim.
Bootstrap Nedir?
Bootstrap, HTML5 ve CSS3 ile güçlendirilmiş, hazır html ve hazır css şablonları içeren ve tabiki javascript, jquery ile desteklenmiş açık kaynak kodlu bir kütüphanedir (framework). Twitter tarafından geliştirilmektedir. Tüm cihazlara uyumlu bir tasarım modellemesi yapabilmek amacı ile oluşturulmuştur.
Bootstrap, bir web sitesi için gerekli olan tüm elementleri (form ögeleri, etiketler, uyarı ve bilgi metinleri, navigasyon bar, sayfalandırma modülü, açılan menüler, grafikler, iconlar, farklı özelliklere sahip butonlar, tablolar vb bir çok tasarım ögesini) içinde barındırır ve bu araçları kullanarak esnek bir yapı ile responsive tasarım yapmamıza imkan sağlar.
Çoğu web sitesinin birbirine benziyor olması, Bootstrap elemanlarını olduğu gibi kullanmalarından kaynaklanmaktadır. Bootstrap açık kaynak kodlu bir sistem olduğu için projemizde kullanırken kendimize göre renklendirmemiz ve şekillendirmemiz mümkündür. Bootstrap’ın bize sağladığı imkanlardan faydalanarak bir web sayfası tasarımı gerçekleştirmek bize büyük kolaylık sağlamaktadır.
Bootstrap, Chrome, Safari, Firefox, Internet Explorer, Opera, Yandex Browser gibi tüm web tarayıcılarında sorunsuz çalışmaktadır. Bootstrap teknolojisini kullanmak için projemize eklememiz ve çağırmamız gerekmektedir. Bootstrap indirmek için tıklayın. Önceki CSS Nedir? ve Javascript Nedir? başlıklı yazılarımda, css ve js dosyalarını HTML sayfamıza nasıl ekleyeceğimizden bahsetmiştim. Bootstrap dosyalarını da aynı şekilde projenize dahil edebilir ve kullanmaya başlayabilirsiniz.
Ayrıca şu adresten Bootstrap ile oluşturulmuş ve direk olarak alıp kullanılmaya uygun yüzlerce tema bulabilir, satın alıp projenizi geliştirmeye başlayabilirsiniz.
Bootstrap Kullanımı
Bootstrap Kütüphanesi’ni projemize eklemek için iki yöntem bulunmaktadır. Bu yöntemlerden bir tanesi Bootstrap Download bölümünden kaynak dosyaları indirip proje dizinimize dahil etmek ve daha sonra sayfa içinden bu kodları ekleyerek çağırmak, bir diğer yöntem ise direkt olarak Bootstrap CDN üzerinden kaynak kodları projemize dahil ederek kullanmaktır.
Bootstrap CDN üzerinden ekleme:
Bootstrap’ın derlenmiş CSS ve JS dosyalarının önbelleğe alınmış sürümlerini projenize eklemek için: BootstrapCDN
<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>
Derlenmiş JavaScript kullanıyorsanız, jQuery ve Popper.js‘nin CDN sürümlerini eklemeyi unutmayın.
<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 CSS Yazımı
Bootstrap ile tüm cihazlar için ayrı ayrı davranışların sergileneceği CSS kodları yazabiliriz. Bunu bir örnekler ile açıklayacak olursak:
/* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }
Yukarıdaki örnekte gördüğünüz gibi @media(min-width:1200px){ … } kod satırının içine yazılan CSS kodları sadece en düşük değeri 1200px olan ekranlarda çalışacaktır.
+ Bootstrap CSS ile daha detaylı bilgi edinmek için tıklayın.
Bootstrap Izgara Sistemi
Bootsrap kütüphanesinin bizlere sunduğu bir diğer avantaj ise Izgara Sistemi (Grid system) ‘dir. Bu sistem ekranı 12’li sistemde bölmemize imkan sağlar. Yani 1/12 veya 2/6 + 2/6 veya 3/4 + 3/4 + 3/4 + 3/4 veya 2/6 + 4/3 + 4/3 vb. Izgara sistemi sayesinde HTML kısımları farklı ekranlarda farklı yerlerde konumlandırabiliriz.
Bootstrap Grid System:
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
Yukarıdaki örnekte bulunan <strong>class=”col-md-1″</strong> tanımlaması HTML div’lerin 12’lik ızgara sisteminde 12 parça halinde durmasını sağlar. Burada dikkat edilmesi gereken col-md tanımlamasının orta ölçekli cihazlar için olduğudur. Ancak sadece tek başına kullanılırsa tüm cihazlarda aktif olur. Div’lere farklı cihazlarda farklı davranışlarda bulunmasını söylemek için şu şekilde bir tanımlama yapılması gerekmektedir:
<!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>
Görüldüğü üzere div’e, col-xs-12 ile küçük cihazlarda 12’lik sistemde tek parça, col-md-4 ile orta ölçekli cihazlarda 12’lik sistemde 3 parça halinde durması gerektiğini söylemiş olduk.
+ Izgara sistemi ile daha detaylı bilgi edinmek için tıklayın.
Bootstrap Örnekleri
Burada bulunan adresten bootstrap örneklerini inceleyebilirsiniz.