bootstrap nedir

Bootstrap Nedir?

Web Tasarım

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.

bootstrap nedir

bootstrap nedir

İ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 nedir

bootstrap nedir

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 nedir

bootstrap nedir

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:

bootstrap grid system

bootstrap nedir, bootstrap nerelerde kullanılır, bootstrap örnekleri, bootstrap ızgara sistemi

<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.

bootstrap nedir

bootstrap nedir

,

İlgili Yazılar

css nedir

CSS Nedir?

CSS yani Cascade Style Sheet, HTML‘e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir web teknolojisidir. HTML ile oluşturulan elemanlara stil vermeye yarar. Örneğin HTML içine eklediğimiz…
Devamını Oku
wamp server kurulumu resimli anlatım

Wamp Server Kurulumu

Localhost kurulumu, wamp server kurulumu, apache server kurulumu, localde wordpress çalıştırma, localde php çalıştırma, phpmyadmin kurulumu Merhaba, izmir web tasarım takipçileri. Bu yazımızda, web tasarım, wordpress gibi konulara yeni başlamış…
Devamını Oku
javascript nedir

Javascript Nedir?

Temel web tasarım dersleri yazı dizimizin bu bölümünde yine web tasarımında olmazsa olmaz olan bir konuya değineceğiz. Konumuz, JavaScript Yani bir web sayfasına hareket katan, sayfaları eğlenceli hale getiren, bir…
Devamını Oku
html nedir, html nerelerde kullanılır, html nasıl kullanılır

HTML Nedir?

Web tasarımına yeni başlayanların biraz araştırma yaptıktan hemen sonra ilk tanıştıkları ve en sık karşılaştıkları konu şüphesiz ki HTML‘dir. Buda HTML’in, web tasarımının en temel taşı olmasındandır. Sosyal ağ gruplarında…
Devamını Oku

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Fill out this field
Fill out this field
Lütfen geçerli bir e-posta adresi girin.
You need to agree with the terms to proceed

Menü