Bootstrap nedir? Nasıl kullanılır?

Açık kaynak kodlu, ücretsiz bir CSS frameworktür, tasarım aracıdır. Kolayca telefonlar, tabletler ve masaüstü bilgisayarlar için farklı ve cihaz büyüklüğüne uygun şekilde sitenizin gözükmesini sağlayan temalar/tasarımlar yapabilirsiniz. Bir site için gerekli olan tüm elemenleri (form ögeleri, etiketler, tablolar, uyarı ve bilgi metinleri, navigasyon bar, sayfalandırma modülü, açılan menüler, farklı özellikte butonlar vb bir çok tasarım ögesini) içinde barındıran Bootstrap tasarım yaparken bu hazır elementleri kullanarak bütün cihazlara uygun tasarımlar geliştirmenize yarar. Yani her şeyi hazır olan kodlarla yeni bir tasarım ortaya koymak çok basit ve pratiktir. Stiller, imajlar , js’ler daha önceden sistemin içine monte edilmiştir. Sizin yapacağınız tek şey bunları çağırmaktır.

Bootstrap 3 sürümü, Chrome, Safari, Firefox, Internet Explorer, Opera gibi neredeyse tüm popüler web tarayıcılarının son sürümlerinde sorunsuz çalışıyor.

Bootstarp ile neler yapılabilir?

Bir web sitesi için gerekli olan tüm ögeleri içerdiği için bir siteyi komple bir bütün olarak tasarlayabilirsiniz. Tipografik ögeler, tablolar, imajlar, slider, carousel, modal pencereler, butonlar, dropdown menüler, navigasyon bar, sayfalandırma, etiketler, thumbnaili uyarı ve bilgilendirme balonları, yükleme barları vb gibi bir çok tasarım ögesi hazır olarak sunulmuş ve yapmanız gereken tek şey ihtiyacınız olan kodu kopyala yapıştır yapmak. Aşağıda hazırlanmış örnekleri görebilirsiniz:

 

Bootstrap nasıl kullanılır?

Hazır bir sistem olması dolayısıyla neredeyse her şeyi kopyala yapıştır yaparak kullanabiliyorsunuz. Ama öncelikle ana template dosyanız için bazı olmazsa olmazlar var. Sayfamız Html5 olmalı ve Bootstrap için ana css dosyası ve jquery scriptini de sayfanıza eklemelisiniz.

Sayfanızda kullanacağınız her bir öge için getbootstrap.com sitesi referans siteniz olacak. Siteye girdiğinizde üst menüde yer Getting Started, CSS, Component ve JavaScript alanlarına sıkça başvurup gerekli kodları buralardan kopyala yapıştırla alacağız.

Bootstrap’ın temel tasarım mantığını şöyle özetleyebiliriz. Bir satır 12 eşit sütuna bölünerek bu sütunların genişlikleri farklı cihazlara göre esnetilip daraltılıyor. Böylelikle farklı cihazlara göre bu sütunların görüntülenme şekli değiştiriliyor. Örneğin geniş ekranlı bir cihaz için 3lü sütun bir yapı düşünüyorsunuz. Bootstrap mantığı nasıldı? Satır 12 parçaya bölmek. O zaman 3lü sütun yapabilmek için her bir sütun bu 12li sütunlardan 4er tane kapsamalı. Yani kod ile bunu göstermek gerekirse aşağıdaki gibi olmalı:

<div class="row">

    <div class="col-md-4"></div>

    <div class="col-md-4"></div>

    <div class="col-md-4"></div>

</div>

.col-md-1 class’ı 12ye bölünen satırın her bir sütununu ifade ediyor. Satırımızı kaça bölmek istiyorsak  bu classtan faydalanıyoruz. Farklı bir örnek verecek olursak satırı iki eşit sütuna bölmek istiyorsak ilk sütuna .col-md-6 ve ikinci sütuna da .col-md-6  classlarını veriyoruz. Toplamda 12 yapıyor bu da satırın 2 eşit parçaya bölünmesini sağlıyor. Bu oranları değiştirerek (toplamda 12 olacak şekilde) sütun genişliklerini ayarlayabilirsiniz. Aşağıdaki görselden satırların class’larla nasıl sütunlara bölündüğünü daha iyi anlayabilirsiniz:

Özellikle sütunların cihazlara göre duyarlı olmasını aşağıdaki class’lar ile sağlayabiliriz:

Masaüstü bilgisayarlar için kullanılan class .col-md-

Cep telefonları için kullanılan class: . col-xs-

Tabletler için kullanılan class: .col-sm-

Farklı cihazlar için bu sütunların farklı davranmasını istediğimizde masaüstü için bu şekilde tablet için bu şekilde mobil telefonlar için bu şekilde genişlikte davran diyerek aynı class etiketi içine bu genişlikleri birlikte verebilirsiniz. Mesela masaüstü bilgisayarlar için .col-md-3 class’ı ile 4e böldüğünüz satırları cep telefonlarında 2 tane 2’li sütun şeklinde görünsün isteyebiliriz. Yani masaüstünde 4lü sütun görünen bir satır, cep telefonlarında classlar kullanılarak 2 satıra dönüştürülüp her bir satırda 2li sütun görünecek şekilde davranmasını sağlayabiliriz.

Bunu yapmak için class yapımızı aşağıdaki şekilde yapıyoruz:

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

Sitemizi düşündüğümüz senaryoya göre hazırlamaya başlayalım. Bootstrap için gerekli dosyaları http://getbootstrap.com adresinden indiriyoruz, gerekli tüm .css, .js vb dosyalar burada var.

bootstrap-3.0.1-dist.zip dosyası sayfanız için olmazsa olmazları barındırıyor. bootstrap-3.0.1.zip dosyası ise Bootstrap’ın tüm dosyalarını (tüm script dosyaları, cssler, less dosyaları, font dosyaları vb) barındırıyor. Eğer ana şablonu oluşturmakla uğraşmak istemiyorsanız indirdiğiniz dosyaların içinde örnek sayfalar var. Bu örnek sayfalardan birini alarak kendi şablonunuz olarak kullanabilirsiniz. Tasarımları yaparken zaten bu örnek sayfaları sık sık kullanacaksınız.

Şimdi örnek bir sayfayı birlikte yapalım. Yapacağımız sitemizde senaryo olarak da en üstte header alanında ana menü onun altında carousel, onun altında 3lü sütunda bir alan ve onun altında da footer olsun. bootstrap-3.0.1-dist.zip ve bootstrap-3.0.1.zip dosyalarını zipten çıkaralım. EXAMPLES klasöründeki NAVBAR klasöründeki örneği şablonum olması için index.html dosyasını kopyalayıp bootstrap-3.0.1-dist klasörünün içine yapıştırıyorum. Fakat direk açtığımda düzgün tasarım görünmeyecektir çünkü css dosyası doğru yerde linki değil bunu düzeltmem gerekiyor. Kopyaladığım index.html içindeki css dosyasının ve bootstrap js dosyasının yolunun başındaki iki üst klasörde olduğunu belirten kısmı siliyorum ve kaydediyorum. Dosyaların yolu aşağıdaki gibi olmalı. Bootstarp js dosyası dokümanın sonundadır.

CSS dosyası yolu: <link href=”dist/css/bootstrap.css” rel=”stylesheet”>

Bootstrap js dosyası yolu:    <script src=”dist/js/bootstrap.min.js”></script>

Dosyayı açtığımda şablonu görebilirim artık. Header alanımız hazır. Oradaki .jumbotron divi bizim için gerekli değil onu siliyoruz.

Şimdi carousel i ekleyelim. Carousel’imizi eklemek için getbootsrap.com sitesinde JavaScript bölümüne girip oradan carousel kısmından gerekli scripti kopyala yapıştır ile alıyoruz ve sayfamızda görünmesini istediğimiz yere ekliyoruz

Carousel  için gerekli kod:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->

  <ol class="carousel-indicators">

    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

    <li data-target="#carousel-example-generic" data-slide-to="1"></li>

    <li data-target="#carousel-example-generic" data-slide-to="2"></li>

  </ol>

 

  <!-- Wrapper for slides -->

  <div class="carousel-inner">

    <div class="item active">

      <img src="..." alt="...">

      <div class="carousel-caption">

        ...

      </div>

    </div>

    ...

  </div>

 

  <!-- Controls -->

  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left"></span>

  </a>

  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right"></span>

  </a>

</div>

 

Carousel’de yer alan her bir slide koddaki aşağıdaki kısım içine yerleştirilmeli. Yani her bir slide için aşağıdaki kodu çoğaltmanız gerek. Bu tip düzenlemeleri temek html bilsine sahipseniz çok kolaylıkla yapabileceğiniz düzenlemelerdir.

Her bir slide için gerekli kod aşağıdaki gibidir. Aktif olan slide için gerekli olan .active classı sadece ilk slide divinde olmalıdır diğerlerinden silmeniz gerekir. Ayrıca imajlar için dosya yolunu ve slide içinde kullanılacak metni de kodda düzenlemelisiniz.

 

Her bir slide için gerekli kod:

<div class="item active">

      <img src="..." alt="...">

      <div class="carousel-caption">

        ...

      </div>

    </div>

 

Üç tane slide olan olan bir carousel için kod şu şekilde olmalı:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->

  <ol class="carousel-indicators">

    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

    <li data-target="#carousel-example-generic" data-slide-to="1"></li>

    <li data-target="#carousel-example-generic" data-slide-to="2"></li>

  </ol>

 

  <!-- Wrapper for slides -->

  <div class="carousel-inner">

    <!-- 1nci slide için başlangıç -->

    <div class="item active">

      <img src="img/image01.jpg" alt="image01">

      <div class="carousel-caption">

        Buraya image01 için metin yazabilirsiniz. HTML

      </div>

    </div>

    <!-- // 1nci slide için bitiş -->

    

    <!-- 2nci slide için başlangıç -->

    <div class="item">

      <img src="img/image02.jpg" alt="image02">

      <div class="carousel-caption">

        Buraya image02 için metin yazabilirsiniz. HTML

      </div>

    </div>

    <!-- // 2nci slide için bitiş -->

 

    <!-- 3ncü slide için başlangıç -->

    <div class="item">

      <img src="img/image03.jpg" alt="image03">

      <div class="carousel-caption">

        Buraya image03 için metin yazabilirsiniz. HTML

      </div>

    </div>

    <!-- // 3ncü slide için bitiş -->   

   

  </div>

 

  <!-- Controls -->

  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left"></span>

  </a>

  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right"></span>

  </a>

</div>

 

 

Carousel kodlarımızdan sonra sayfamızın ekran görüntüsü aşağıdaki gibi oldu:

 

Sırada 3lü sütun var. Bunun için Bootstrap’ın sitesindeki Components > Thumbnail > Custom Content kodunu (aşağıdaki) kopyalayıp alıyoruz:

<div class="row">

  <div class="col-sm-6 col-md-4">

    <div class="thumbnail">

      <img data-src="holder.js/300x200" alt="...">

      <div class="caption">

        <h3>Thumbnail label</h3>

        <p>...</p>

        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

      </div>

    </div>

  </div>

</div>

3lü sütun istediğimiz için row div’inin içindeki div’i çoğaltıyoruz ve kodumuz aşağıdaki gibi oluyor:

<div class="row">

    <div class="col-sm-6 col-md-4">

    <div class="thumbnail">

      <img src="img/01.png" alt="...">

      <div class="caption">

        <h3>Thumbnail label</h3>

        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

      </div>

    </div>

  </div>

 

    <div class="col-sm-6 col-md-4">

    <div class="thumbnail">

      <img src="img/02.png" alt="...">

      <div class="caption">

        <h3>Thumbnail label</h3>

        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

      </div>

    </div>

  </div>

 

    <div class="col-sm-6 col-md-4">

    <div class="thumbnail">

      <img src="img/03.png" alt="...">

      <div class="caption">

        <h3>Thumbnail label</h3>

        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

      </div>

    </div>

  </div>

 

</div>

Bootstrap’ta dikkat etmemiz gereken bir konu var. Bu da imajların en boy ölçülerini yazmıyoruz. Bootrap imajları responsive olacak şekilde kendisi yöneterek büyütüp küçültüyor.

3lü sütunlarımız da tamam. Ekran görüntüsü aşağıdaki gibi oldu:

Son olarak footer alanımızı ekleyelim. Bunun için indirdiğiniz EXAMPLES klasöründeki Sticky Footer klasöründeki örnekteki aşağıdaki kodu alıyoruz ve sayfamızda görünmesini istediğimiz yere ekliyoruz:

    <div id="footer">

      <div class="container">

        <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>

      </div>

    </div>

 

 

Vee sayfamız bitti. Çok kolay ve pratik bir şekilde sayfamızı oluşturduk. Sayfamızın son halinin ekran görüntüsü aşağıdaki gibi:

 

Metinleri isteğinize göre uygun şekilde düzenleyip tasarımlarınıza son şeklini verebilir Bootstrap’ın bu kolaylıklarından siz de fayalanabilirsiniz. Yapmış olduğumuz örnek çalışmanın dosyalarını buraya tıklayarak indirebilirsiniz.

Siz de burada anlattığım mantıkla siteniz için gerekli ögeleri kolaylıkla uygulayabilirsiniz. Modal pencereler, dropdown menüler, akordion menüler, uyarı etiketleri, farklı renkte ve özellikteki butonları indirdiğiniz zip dosyasındaki örnekleri inceleyek sitenize ekleyebilirsiniz.

Eğer Bootstrap’in standart renk ve görsel düzenlemeleri sizi tatmin etmiyorsa kendiniz css’lere müdahale ederek renkleri düzenleyebilirsiniz. veya bunlar yerine http://www.bootstrapcdn.com/#bootswatch_tab sitesindeki hazır temaları inceleyerek kendi sitenize buradaki beğendiğiniz Bootstrap css dosyasını kopyalarak kullanabilirisiniz.

Bootstrap nedir? Nasıl kullanılır? ” yazısı için 55 yorum

  1. Selamlar anlatım mükemmel teşekkürler ben bunu yaptım fakat bir sorunum var normal masa üstünde galeri resimleri gözüküyor fakat telefondan girdiğimde slide de resimler gözükmüyor yani o alanda resim yok yada yanlış yol gibi gözüküyor sorun ne olabilir sizce

    • Selam kuybacikselim,
      Telefondan gözükmüyorsa class’ları yanlış kullanmış olabilirsin. veya cep telefonu ile ilgili div’lerin css’lerinde display:none gibi bir düzenleme yapmış olabilirsin. Kodu gönderirsen daha iyi yardımcı olabilirim.

          • mrb ben size sitenin ismini göndereyim bakın isterseniz http://www.elmalikoyu.com.tr/ddr/ normalde galeriye pc den girince hiç bir sorun yok fakat mobilden aynu galeriye girdiğimde resimler yok buna göre ben galeri nin dosyasında index html diye bir dosya da bulamadım kodu yapıştırmak istediğimde de gönderme butonu kayboluyor ne şekilde yapsam acaba yada google drv ekliyim https://drive.google.co**** dosyalar burada akarsan sevinirim teşekkürler.

          • Çözümü mail adresine gönderdim. Problem bootstrap ile alakalı değil, galeri scriptinle alakalı. Kolay gelsin.

  2. Sitemi tamamladıktan sonra farklı inclerdeki ekranlarda uyumsuzluk sorunu -kayma- ile karşılaştım ve ne denediysem olmadı tam ne yapmam gerektiğinide anlayamadım yardımcı olur musunuz bu konuda

    • merhaba, çözünürlüklere uygun class kullanmamış olabilirsin, kontrol etmende fayda var.

  3. elinize sağlık bu şekilde mesela sitemize yan yana 4 resim koyabilir miyiz? Bir de kodları tam olarak hangi tag dan önce sonra koyacağız??

  4. Kelin ilacı derler ya hani, benim için öyle oldu anlatımın sana ne kadar teşekkür etsem az. Rab’bim senden gani gani razı olsun kardeşim.

    Hep düşürdüm bu adamlar bu siteleri nasıl yapıyor diye. Kodlara bakıldığında her site tasarımı için
    “Bu kadar kodun tekrar tekrar yazılmasına imkan yok kesin bir kolay yolu vardır ” diyordum kendi kendime. O da demek ki buymuş. 😀

    Tekrardan çok teşekkür ederim Rab’bim senden gani gani razı olsun kardeşim.

  5. Pingback: Bootstrap Dersleri 1: Bootstrap’a Giriş | Veysel Özdemir

  6. Merhaba,

    Detaylı anlatımınız için teşekkür ederim,
    Size bazı sorularım olacak,

    1. Bootstrapta js dosyaları olmadan işlem yapamıyormuyuz? örnek linki indirdigimizde içerisinde js dosyaları var. bootstrap js dosyaları olmadan sadece css ile çalışmıyor mu?

    2. Bir site tasarlayacağım. Zaman kısıtlı oldugundan ilk önce masaüstü sürümü ve mobil dikey bölümünü tasarlayıp daha sonra diger boyutlarda tasarlamak mantıklı olur mu? sonrasında problem yaşarmıyız?

    3. Yine verdiginiz örnek dosyada 4 adet css dosyası var ve içerisini açınca düzenli bir sekilde kodlar yazılmamıs (bootstrap sitesinde ki dosyalarad bu sekilde). Bu kodlar neden bu kadar karısık? Herkes bu sekilde mi kullanıyor? Örnek olarak css ve html i açtıgımızda hemen kavrayabilecegimiz alıp çıkacagımız örnek kod parçaları paylasmanız mümkün mü?

    Emeginiz için teşekkür ederim

    • Merhaba Süleyman,

      Sorularına sırasıyla cevap vereyim.

      1. JS dosyaları olmadan Bootstrap’ı bir yere kadar kullanabilirsin. Örneğin sütun yapılarını, buton büyüklüklerini vs gibi kısımları JS dosyaları olmadan kullanabilirsin. Ancak slider, modal pencere, mobilde gözüken hamburger menu vs gibi kısımları JS olmadan kullanamazsın.

      2. Tasarladığın site hangi çözünürlüklerde hangi cihaz gibi davranacak konusuna eminsen (bazı soru işaretleri olmakla birlikte) kullanabilirsin. Yani açacak olursak bir tabletten sitene girildiğinde mobil versiyon mu gözükecek yoksa masaüstü versiyon mu gözükecek? Buna karar verirsen elbette daha sonra mobil dikey ve masaüstü haricinde cihazları sonradan yapabilirsin, fakat diğer ara cihazlardaki tasarım durumlarını öngörerek tasarlama yapman gerek. BU durumda .col-xs-* ve .col-md-* classlarını kullanarak siteyi tasarlaman gerekecek. Daha sonra tüm koda tekrar girip ara cihazları eklemen gerekecek. Bana kalırsa biraz daha zaman ayırıp tüm cihazları destekleyecek bişey yaparsan ilerisi için kafan rahat olur.

      3. Evet 4 css dosyası var. Bunlar aslında 2 dosya olarak düşünebilirsin. -min- olanlar bu 2 ana dosyanın minimize edilmiş halidir. Sadece bootstrap.css dosyası yeterli olur. Kodlar aslında karışık değil fakat bir çok senaryo düşünülerek yazıldığı için ve binlerce satır olduğu için karışık bir görüntü vermekte ister istemez :) Örnek olarak http://getbootstrap.com/components/ adresinde bir çok örnek mevcut, burayı bir inceleyin. Özellikle istediğiniz bir konu olursa yardımcı olmaya çalışırım.

    • Abdullah selam,
      Soruyu biraz daha açar mısın? Bu şekilde yardımcı olamayacağım maalesef. Gerekirse kodu gönder, bakayım.

  7. merhabalar bootstrap aynı zamanda responsive mi demek oluyor veya aralarında fark nedir ben çok yeniyim css aleminde ve kendimi ilerletmek geliştirmek istiyorum sadece html ve css bilgim var html 5 bilmiyorum html 5 olmadan bootstrapi kullanamaz mıyım

    • Merhaba Yasin. Bootstrap, responsive tasarım yapabilmek için bir framework. Responsive design/duyarlı tasarım ekran çözünürlüklerine göre özel gösterilen tasarımlar yapmak yerine bu ekran çözünürlüklerine duyarlı olarak görünen tasarımlardır. HTML 5 illa bilmene gerek yok ancak artık html 5 bilmeden ileride epey zorlanacağın kesin.

      Responsive tasarım geliştirmek için Bootstrap haricinde kaynak olarak daha önce yazdığım bir yazıdaki frameworkleri inceleyebilirsin: http://www.ozdemir.info.tr/responsive-designduyarli-tasarim/

  8. Merhaba bootstrap sa layout wide boxed özelliği var ben tüm sayfaların boxed gelmesini istiyorum wide kullanmak istemiyorum bunu nasıl yapabilirim

  9. Merhaba,
    “container” kullanırken, sayfa biraz daha ortalasın/daraltsın istiyorum nasıl yapabilirim?

    • Slm Deniz Kumru,
      Container için istediğin bir width değerini css dosyasına girebilirsin. Bu işini çözecektir.

  10. çok güzel hoş hocam anlatım.. ben de kendim css yazıp boostrapde kendi uyarlamalarımı yapmaya çalışıyorum , ama slider ı küçültemedim yardıma ihtiyacım var

    • Selam Mete. Sliderın bulunduğu div’e bir büyüklük verebilirsin. Bu işini çözecektir. Halledemezsen kodu gönder yardımcı olurum.

  11. Pingback: Bootstrap nedir? Nasıl kullanılır? | Kod5.org

  12. herşey çok güzel hoş hocam da ben kendim css yazıp boostrapde kendi uyarlamalarımı yapmaya çalışıyorum ama slider ı küçültemedim class açıyorum .slider{height: 893 px; (altına) width:100%; } ama html de bu css i nereye çektiysem yüksekliği küçülmedi resimleri photo shopta küçülttüm 1920 px e 893 px yinede yapamadım

  13. Bootstrap’ın yazı karakterleri ve renklerini kullanmak istemiyorum bunun için kolay bir şekilde ne yapabilirim? Css dosyasında çok fazla özelliklere değer atanmış.

    • Evet daha mikro siteler için genel css dosyası bootstrapın gerçekten büyük. Tabi bunun için de bir çözüm var. http://getbootstrap.com/customize/ adresine gidiyorsun. Oradaki bütün checkleri kaldır. Sadece istedikleirni işaretle. Mesela butonlar, responsive utilities, forms vs seçerek sayfanın sonundan COMPILE and DOWNLOAD’a tıklayarak sadece istediklerini indirebilirsin.

  14. Pingback: Bootstrap Nedir? | erolakgul

  15. Hocam bazı siteler cep telefonunda açtığımızda yakınlaştırılamıyor. İki parmakla büyütmek istesek de büyümüyor. Bunu nasıl yapıyorlar?

    • Slm Mehmet.
      Dokunmatik büyütme özelliklerini geçersiz kılmak için aşağıdaki aşağıdaki meta etiketini head tagları arasında kullanırsan büyütme küçültme yapamazsın:

      <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>

  16. Bootstrap çok kolaymış. Yazı biraz uzun gibi ama çok basit ve kolay anlaşılır anlatışsın hocam. Eline sağlık. Bootstrapi çok sevdim :)

Bir Cevap Yazın