Bu konu süresiz olarak sabitlenmiş.

Waffleinstein

şüşko insan
Emektar Üye
Mesajlar
458
En iyi cevaplar
0
Beğeniler
434
Puanları
1,130
Ruh hali

Günümüzde HTML5 ve CSS3'ün gelişi ile web platformu çok hızlı bir yükselişe geçti. Hayal gücümüzün yettiğince istediğimizi ortaya çıkarır olduk. Artık portfolyo sitelerinden tutun, ticari kurum ve kuruluşların sitesine kadar yüz binlerce değişik içeriklerde site mevcut. Bu kadar site varken, bir o kadar da geliştirici var haliyle. İşte tam bu noktada framework dediğimiz olay devreye giriyor. Benim Waffle adını verdiğim yere başka bir geliştirici Tulumba Tatlısı diyebilir; geliştiricilerin, diğer geliştiriclerin kodlarını daha rahat anlaması ve kodlarda karışıklılığıa yol açmamak için framework denilen olayı keşfetti insanlar. Sizlere bu konuda derinlemesine inceleyeceğim Bootstrap de bunlardan bir tanesi.

Öncelikle, Bootstrap Mark Otto (mdo) ve Jacob (fat) isimli iki adet geliştirici tarafından Twitter'da kullanılmak üzere 2010'da ortaya çıkarıldı. Başta sadece Twitter'ın kullanımına sunulsa da, Twitter dayanamayıp aynı yıl içerisinde bir Hack Event düzenleyip kullanıcıların kullanımına günümüze kadar popülaritesini koruyacak Bootstrap'i sundu.

Bootstrap; HTML, CSS ve JavaScript dillerini içeren birçok geliştiricinin kullandığı hazırlanmış, paketlenmiş bir kodlama dizinidir - ayrıca Bootstrap'in kelime anlamı ayakkabı çekeceğidir (kerata der büyüklerimiz :D -. Bootstrap, JavaScript için jQuery JavaScript kütüphanesini, CSS için ise less ve scss ile yazıldıktan sonra sadeleştirilen vanilla CSS'i kullanır.

Ve evet, sihirli yolculuğumuza başlıyoruz...

Bootstrap nasıl yüklenir?
Bootstrap'i yükleyebilmek için bir değil iki değil, onlarca yolunuz var. Gelin onlara bir göz atalım:

1. MaxCDN aracılığıyla
CDN (Content Delivery System), dosyaları dünyanın dört bir yanında kullanıcıları maksimum hız, minimum kesinti ve hata ile aktarabilmek için çoğu büyük toplulukların kullandığı bir yöntemdir. Bootstrap de aynı şekilde MaxCDN'deki dosyaları aracılığıyla <head> etiketi içine yerleştirilerek kolayca kullanılabilir.
PHP:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  • Yukarıdaki ilk kod, en son yayınlanan ve minified (tüm kodları tek bir satıra, boşluk bırakmadan toplanarak oluşturulan en düşük boyuttaki dosya) edilerek sunulan CSS dosyası var.
  • Altındaki kod ise yine aynı şekilde en son yayınlanan ve minified edilerek sunulan JavaScript dosyası.
UYARI:
Bootstrap'in JavaScript özelliklerinin kullanılabilmesi için jQuery kütüphanesi gerekmektedir. Kendisinin de kodu şu şekildedir:
PHP:
<script   src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"></script>
Yalnız hatırlatmamda fayda var, yeni olanlar için belirteyim Bootstrap jQuery gerektirdiğinden ve internet tarayıcıları da kodu en üstten en alta doğru okuduğundan jQuery'nin kodu HER ZAMAN Bootstrap'in JS kodundan üstte olmalıdır.

2. Composer aracılığıyla
Bootstrap'in Less, CSS, JS ve yazı tipi dosyalarını, bilgisayarınıza Composer'ı yükledikten sonra Komut İstemcisi'nden:
Kod:
$ composer require twbs/bootstrap
komutunu girerek indirebilirsiniz ancak bu yolu tercih ederseniz Less dosyaları için Autoprefixer yüklemeniz gerekecektir. Autoprefixer'ı indirmek için ve hakkında daha fazla bilgiye sahip olmak için Github proje sayfasına bakabilirsiniz.

3. Kaynak Kodları ile
Bootstrap'in kendi sayfasından kaynak kodlarını indirerek dökümanları ile daha ayrıntılı inceleyebilirsiniz. Ayrıca kaynak kodlarını indirince Ana Less, JS ve yazı tiplerini de indirmiş olacaksınız, ancak Less dosyaları için bir Less Compiler kullanmanız gerekmektedir.


Bootstrap Bize Neler Sağlıyor?
Artık webin dili haline gelmiş olan Bootstrap, indirdiğimizde bize hazır olarak kullanabileceğimiz birkaç bileşen sunuyor. Bunlara tek tek değineceğim ancak öncesinde bi' tanıtayım size bunları.

CSS BİLEŞENLERİ
  • Glyphicons
  • Sayfa Bölmeleri (Grid)
  • Açılır Menüler (Dropdowns)
  • Butonlar
  • Veri girişleri (Inputs)
  • Menüler (Navbars)
  • Sayfa Yolu Belirteçleri (Breadcrumbs)
  • Etiketler (Labels)
  • Büyük Duyuru Alanı (Jumbotron)
  • Uyarılar (Alerts)
  • İlerleme Çubukları (Progress Bars)
  • Listeler (List Groups)
  • Well Nesneleri (Wells)
  • ve Gönüllerimizin Kahramanı Paneller (Panels)
JAVASCRIPT BİLEŞENLERİ (Bunlar maalesef başka bir konuya )
  • Açılır Sayfa İçi Pencereler (Modals)
  • Kaydırma İzleyicileri (Scrollspy)
  • Bilgi kutucukları (Tooltips)
  • Gelişmiş Bilgi Kutucukları (Popovers)
  • Slayt (Carousel)


Derinlemesine CSS Bileşenleri
Şimdi de sizlerle yukarıda saydığım bu CSS bileşenleri daha yakında göz atalım.

1.Glyphicons
Bootstrap'in tüm bileşenleriyle mükemmel bir uyum içerisinde çalışan glyph ikonları belki de Boostrap'in FontAwesome olmasaydı en büyük nimetlerinden biri sayılabilecekti.

KULLANIMI:
Glyphicons'ı kullanabilmek için öncellikle bir elementimizin olması gerekmektedir, tercihen çok işlevi olmayan <i> elementi kullanılır. Bu elementimizin classına öncelikle glyphicons'ı kullanabilmek için ana classımızı çağırıyoruz, yani class parametremize glyphicon yazıyoruz. Ardından da kullanmak istediğimiz ikonun ismine bakarak class parametremizde bir boşluk bıraktıktan sonra glyphicon-ikonadı şeklinde yazıyoruz. Mesela ben bir artı işareti çıkarmak isteseydim:
PHP:
<i class="glyphicon glyphicon-plus"></i>
şeklinde bir kod girmem gerekirdi.

Diğer tüm ikonları görmek için bu adresi veya pro sürümünün satıldığı bu adresi ziyaret edebilirsiniz.

2.Sayfa Bölmeleri (Grid)
Türkçe'ye kabaca "ızgara sistemi" olarak çevirebileceğimiz Bootstrap'in en büyük nimeti olan Grid sistemi, birçok web geliştiricisinin Bootstrap kullanmasının sebeplerinden biridir.

KULLANIMI:
Bu özelliğin kullanımı gerçekten çok basit. Grid sistemini kullanabilmek için önce bir <div> elementinin class parametresine container tipimizi seçerek başlıyoruz. Eğer ki container tipi olarak boxed, kutu tercih edecek olursak şu şekilde başlıyoruz:
PHP:
<div class="container">
</div>

Ancak eğer ki sayfanın genişliğinin %100'ünü kullanmak istiyorsak, container-fluid tercih ediyoruz:
PHP:
<div class="container-fluid">
</div>

Ardından şu şekilde başlıyoruz... Bootstrap Grid sisteminde sayfa 12 eş parçaya bölünmüştür. Bu eş parçalar şu şekilde kullanılır:

Fotoğraftaki .col-md-1 yazıları class parametrelerine gelecek class isimlerini temsil etmektedir.
Yalnız sadece col-md-* şekilde kullanılmaz. İşte Bootstrap'in responsive grid sistemi:


Yukarıda verilen col-xs-* , col-sm-* , col-md-* ve col-lg-* parametreleri ekran boyutun göre çalışmaktadır. Örneğin siz tüm siteyi col-xs-* kullanarak yazarsanız siteniz ekran genişliği 768'te küçük olan tüm cihazlardan, ekran genişliği 1200'den büyük olan tüm cihazlara kadar aynı gözükecektir (ki bu responsive olması anlamına gelmez).

Grid sisteminde ayrıca boşluk bırakmanıza imkan sağlayan col-md-push-* ve col-md-offset-* yapıları da bulunmakta. İkisi de teknik olarak soldan boşluk bıraksa da arasında çok ince bir nüans var. Buna burada değinmeyeceğim ancak merak edenler arkadaşlar gidip araştırabilirler. Mesela siz:
PHP:
<div class="col-md-offset-1 col-md-1>
a
</div>
yazarsanız sayfada şu şekilde görünecektir.
Kod:
                           a
Gördüğünüz gibi offset sayesinde a harfini ileriye doğru aldık.

3.Butonlar
Bootstrap'in şahsen en sevdiğim özelliği butonları. Gerçekten butonları kendi elementleriyle o kadar uyum içine çalışıyor ki hayran kalmamak elde değil.

KULLANIMI:
Bir elementin buton olarak gözükebilmesi için öncelikle btn sınıfında olması gerekir. Class parametresine btn yazdıktan sonra btn-{buton rengi} tarzında bir yol izliyoruz. Peki buton renklerimiz neler bizim? Bootstrap'in kendisinden gelen birkaç buton rengimiz mevcut, bunlar:
    • Varsayılan Renk ( btn-default )
    • Öncelikli Renk ( btn-primary )
    • Başarılı Rengi ( btn-success )
    • Bilgi Rengi ( btn-info )
    • Uyarı Rengi ( btn-warning )
    • Tehlike Rengi ( btn-danger )
Şöyle örnek bir kod verelim:
PHP:
<a href="#" class="btn btn-primary">Minecraft Türk</a>
Bu kod bize böyle bir görüntü verecektir:

Rengimizi de belirledikten sonra birkaç ince detaya girebiliriz. Mesela şimdi btn-block sınıfına bakalım... Bu sınıfımızın aslında butona kazandırdığı özellik çok basit. Sadece butonun genişliğini o an bulunduğu coloumn ya da başka bir elementin genişliğiyle aynı yapıyor ayrıca display: block şeklinde bir özellik de ekliyor onu ileride tartışırız.

Ayrıca buton grupları denilen bir özelliği daha getiriyor bize Bootstrap. Bu buton grupları butonların birbirine yapışık ve düzenli durmasını sağlıyor.

Yukarıda bir örneği görüyoruz. Böyle bir görüntü elde edebilmek için yapmamız gereken butonların hepsini bir <div> elementi içine alıp btn-group sınıfını atamalıyız elemente, hemen bir örnekle pekiştireyim bunu:
PHP:
<div class="btn-group">
  <button type="button" class="btn btn-default">Sol</button>
  <button type="button" class="btn btn-default">Orta</button>
  <button type="button" class="btn btn-default">Sağ</button>
</div>

4.Açılır Menüler (Dropdowns)
Bazen bir butondan daha fazlasını bekleriz, bizi alıp istediğimiz yere götürmesini... İşte açılır menüler sayesinde bir butona istediğimiz kadar görev ekleyebiliyoruz açılır menüler ile.

KULLANIMI:
Açılır menüler kod yapısı şu şekildedir:
PHP:
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Aksiyon <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Aksiyon</a></li>
    <li><a href="#">Başka bir aksiyon</a></li>
    <li><a href="#">Başka şeyler</a></li>
    <li class="divider"></li>
    <li><a href="#">Ayrılmış kısayol</a></li>
  </ul>
</div>
Şimdi yukarıdaki kodu inceleyecek olursak ilk <div> elementine gördüğünüz gibi btn-group classı gelmiş. Bunu sebebi ise bu butonların bir arada grup olarak durması, hiçbiri bir yere kaymıyor bu sayede. Açılımı yapabilmek için ana bir butonumuz olması lazım onu da <button> elementinde görüyoruz. Hemen altında ise dropdown-menu classlı açılır menümüzü görüyoruz. Çalışma mantığı ise <button> aktif edildiğinde dropdown-menu sınıfını içeren elementi görünür yapıyor.


5.Veri Girişleri (Inputs)
Veri girişinin yanındaki küçük simgelerden tutun, tarih seçimine kadar birçok "hoj" özellik katıyor Bootstrap bu konuda bize. Hemen şöyle bir göz atalım bakalım bize neler getirmiş:

KULLANIMI:
Kullanımı için malzemeler şu şekilde:
  • 1 adet <input /> elementi
  • 100 gram class parametresi
  • 1 çay bardağı placeholder parametresi
  • ve son olarak 1.5 çay bardağı form-control classı

Örnek kod dizini:
PHP:
<form>   
<input class="form-control" type="text" placeholder="Gamer.com.tr Kullanıcı Adınız" />
</form>
Ancak üstte belirttiğim veri girişi sadece bir adet input açar ve içine bir şeyler yazmanızı sağlar. Bunun dışında sağına soluna "şekil şukül" ekleyebilmek için bunları bir input-group içine almalıyız. Mesela şöyle bir şey yapalım: bir veri girişi oluşturalım kullanıcılar buraya yüklemek istedikleri miktarı girsinler (aynı biraz üstteki resimdeki gibi).
PHP:
<div class="input-group"> <!-- Burada bir input-group oluşturduk, bu sayede iki elementi arada boşluk olamadan aynı height değerlerinde olacaklar -->
  <input type="text" class="form-control" placholder="Miktarı girin"><!-- Burada bir adet veri girişi oluşturduk miktarı girmeleri için -->
  <span class="input-group-addon">TL</span><!-- Burada ise üzerine tıklanmayan ve yanda hoş bir şekilde TL yazan bir kutucuk oluşturduk ^^ -->
</div>
Bu şekilde de çok hoş formlar hazırlayabiliyoruz sevgili Bootstrap beyciğimiz sayesinde.

6.Menüler (Navbars)
Pek hoş menüler olmasa da, menüdeki elementlerin sıralanması, hizalanabilmesi gibi çok hoj özellikler sunuyor.

KULLANIMI:

Tam kodumuz şu şekilde:
HTML:
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Daha iyi mobil görüntü için marka ve aç/kapa gruplanıyor -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Navigasyonu aç/kapa</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Marka</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Kısayol <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Kısayol</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Aksiyon</a></li>
            <li><a href="#">Başka bir aksiyon</a></li>
            <li><a href="#">Başka şeyler</a></li>
            <li class="divider"></li>
            <li><a href="#">Ayrılmış kısayol</a></li>
            <li class="divider"></li>
            <li><a href="#">Başka bir ayrılmış kısayol</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Ara">
        </div>
        <button type="submit" class="btn btn-default">Gönder</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Kısayol</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Aksiyon</a></li>
            <li><a href="#">Başka bir aksiyon</a></li>
            <li><a href="#">Başka şeyler</a></li>
            <li class="divider"></li>
            <li><a href="#">Ayrılmış kısayol</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Gördüğünüz gibi ana div elementimize navbar classını ve navbar-default ile de varsayılan temada bir navbar yapmak istediğimizi belirtiyoruz.

Ondan sonra menü içeriğimizin tüm genişliği kaplayacağını belirtiyoruz.

Ardından da navbar-header classını kullanarak, brand-icon dediğimiz küçük ikon veya yazı yazabilmeyi sağlıyoruz.

class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" ile mobil tasarımda collapse işleminin yapılacağı yeri belirtmiş oluyoruz. Buranının hemen ardından nav navbar-nav classı ile menü elementlerimizin olacağı yeri belirtmiş oluyoruz. Bunun birkaç varyasyonu var. Örneğin:

HTML:
<div class="nav navbar-nav navbar-right>...</div>

kullandığımızda menü elementlerimizi sağa yaslamış oluyoruz. Ayrıca menülerde:

    • form,
    • buton,
    • glyphicon ve
    • dropdown
olaylarını kullanabiliyoruz.

Elde ettiğimiz görüntü ise şu şekilde:




7.Sayfa Yolu Belirteçleri (Breadcrumbs)
Türkçesine kabaca ekmek kırıntılar diyebileceğimiz, çok aktif kullandığımız bir element olmasa da çalışma mantığıyla çok hoş şeyler ortaya çıkarılabilir.


KULLANIMI:

HTML:
<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>


Kullanımı aslında çok basit, öncelikle bir <ol> elementi açıyoruz ve ona class olarak "breadcrumbs" veriyoruz. Ardından içerisine bir <li> açıyoruz. Bu elementimizi ana element yapalım, bunu yapmak için yukarıdaki gibi bir <a> ekliyoruz içeriye. Ardından en son elementi de şu anda olduğumuz sayfa gibi düşünüp ona <a> eklemiyoruz ve yukarıdaki gibi <li> elementine "active" classını ekliyoruz.


8.Etiketler (Labels)
Elementlerin istediğimiz noktalarına küçük renkli notlar düşmemizi sağlayan çok hoş bir özellik.

KULLANIMI:

HTML:
<span class="label label-{etiket_tipi}">...</span>



Genellikle <span> elementini kullanırız çünkü <span> elementi HTML'de element tanımlamasında çok da işlevi bulunmayan ayrıca block olmayan bir element.

Kendi sitemde kullandığım örnek bir kullanım:


9.Büyük Duyuru Alanı (Jumbotron)
Bu bileşenin kullanıldığına çok rastlamasak da güzel yerlerde kullanıldığında, çok hoş görüntüler ortaya çıkartan bir bileşendir.


KULLANIMI:
HTML:
<div class="jumbotron">
  <h1>Merhaba dünya!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="http://gamer.com.tr" role="button">Gamer.com.tr</a></p>
</div>

Örneğin, yukarıda gördüğünüz kod şu şekilde bir çıktı verecektir bize:


Sizden özellikle kenarlardaki gri alana dikkatinizi vermenizi isteyeceğim çünkü asıl jumbotron alanı bu gri alan olmaktadır.


10.Uyarılar (Alerts)
Oradan buradan fışkıran "Şifre veya kullanıcı adı yanlış" şeyleri var ya, ha işte onlar tam da bu oluyor...


KULLANIMI:
HTML:
<div class="alert alert-{alert-tipi}" role="alert">Şifrenizi yanlış girdiniz</div>

Yukarıda kodumuz şöyle bir çıktı verecektir:



Ayrıca Bootstrap Javascript sayesinde bu uyarıların dismissible yani görmezden gelinebilir olmasını sağlayabiliyoruz. Onun içinse kodumuzu şu hale getirmemiz yeterli olacaktır.

HTML:
<div class="alert alert-danger alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Dikkat!</strong> Şifreniz veya kullanıcı adınız yanlış!
</div>

Yukarıda ana div elementine gelen "alert-dismissible" sınıfına dikkat çekmek istiyorum, ayrıca hemen altına da tıklandığında kapatacak olan işareti <button> elementi içerisinde verdik.

Bu konunun devamı javascript'e girdiğinden devamını Bootstrap Javascript konumda devam ettireceğim.


11.İlerleme Çubukları (Progress Bars)
Her türlü animasyon, şekil ve şûkülle bir çubuk üzerinde % dilimiyle ilerlemeyi göstermemizi sağlayan çok yararlı bir bileşen...


KULLANIMI:
HTML:
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">%60 Tamamlandı</span>
  </div>
</div>

Yukarı kodun çıktısı şu şekilde oluyor:


Yukarıda aria-valuenow parametresi yüzde kaçının dolu olacağını belirlememizi sağlıyor. Buna yüzde üzerinden değer verebilmemizi ise aria-valuemax parametresine 100 değerini girmemiz.

Ama diyelim ki biz, hem ekran okuyucuları hem de normal insanların orada %10'u duymasını/görmesini istiyoruz. Bunun için ise:

HTML:
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
     ....
    <span class="sr-only">%60 Tamamlandı</span>
  </div>
</div>

.... ile belirttiğim yere istediğimizi yazıyoruz mesela oraya %60 Tamamlandı yazarsak, böyle bir görüntü ortaya çıkar.




Şimdi size şunu da açıklamak istiyorum. Yukarıda <span> elementi içerisinde sr-only sınıfını eklediğimizi görüyoruz ve elementin içinde yazı olmasına rağmen o yazı çıktıda gözükmüyor:


Maalesef ki doğuştan ya da sonradan kazalarla görme yetisini kaybeden insanlar var, onlar yazıları okuyamadıklarından, onlar için geliştirilen Screen Reader teknolojisi ile ekrandaki yazıları dinliyorlar. Buradaki sr, Screen Reader anlamına geliyor. Yani o yazı ekran okuyucu çalıştığında okuyucu tarafından okunuyor.


12. Liste Grupları (List Groups)
Belirli şeyleri bir list halinde göstermemizi sağlayan -benim oldukça fazla kullandığım- bir elementtir.

KULLANIMI:
HTML:
<ul class="list-group">
  <li class="list-group-item">Liste Elementi</li>
  <li class="list-group-item">Liste Elementi</li>
  <li class="list-group-item">Liste Elementi</li>
  <li class="list-group-item">Liste Elementi</li>
</ul>

Yukarı kodun çıktısı şu şekilde olmaktadır:



Bir de şunu yapabiliyoruz: Diyelim ki bu bir liste ve biz listenin ikinci elementindeyiz (okuyoruz). İkinci sıradaki elementin <li> elementine active sınıfı ekliyoruz. Yani şöyle yapıyoruz:

HTML:
<li class="list-group-item active">Liste Elementi</li>

Çıktısı ise şöyle gözüküyor (Arkaplanın kazanacağı renk kullandığımız temadaki primary yani birincil renk oluyor, varsayılan Bootstrap'te bu renk mavi renktir) :



Ayrıca elementlere bir de badge (Türkçeye hoş bir çevirisini bulamadım) dediğimiz şeyi ekleyebiliyoruz:

HTML:
<ul class="list-group">
        <li class="list-group-item">Liste Elementi <span class="badge">14</span></li>
        <li class="list-group-item">Liste Elementi <span class="badge">14</span></li>
        <li class="list-group-item">Liste Elementi <span class="badge">14</span></li>
        <li class="list-group-item">Liste Elementi <span class="badge">14</span></li>
      </ul>

Çıktısı:



Bu liste elementine ayrıca anchor elementi (<a>) ekleyerek bağlantı haline de getirebiliyoruz.

HTML:
<ul class="list-group">
        <a class="list-group-item"><b>Anchor </b>Liste Elementi <span class="badge">14</span></a>
        <a class="list-group-item"><b>Anchor </b>Liste Elementi <span class="badge">14</span></a>
        <a class="list-group-item"><b>Anchor </b>Liste Elementi <span class="badge">14</span></a>
        <a class="list-group-item"><b>Anchor </b>Liste Elementi <span class="badge">14</span></a>
      </ul>

Çıktısı:



Görüntüsü neredeyse aynı, tek farkı üzerine gelindiğinde arkaplandaki küçük değişim ile bir bağlantı elementi olduğunu belli etmesi.


12. Well Nesneleri (Wells)
Well nesnelerini, o elemente birazcık önem kazandırmak için kullanabilirsiniz, aynı bizim forumda alıntı şeysini kullandığımız gibi, yani:

Ben buraya yazmak istediklerimi yazıyorum, ama
Burası benim yazdıklarımdan daha önemli şeyler içeriyor.

Bu mâkul bir örnek olur sanırsam.

KULLANIMI:
HTML:
<div class="well>
   .....
</div>

Bu nokta arasına istediğimiz her şeyi koyabiliyoruz.

Sadece şunu bilmemiz gerek, well nesneleri içerisindeki elementlerin yaklaşık %5'lik bir padding değeri bulunmaktadır.

Ayrıca well nesneleri için üç farklı büyüklük seçeneği vardır:



    • <div class="well>...</div> Normal büyüklükteki well nesnesi
    • <div class="well well-sm">...</div> Küçük well nesnesi
    • <div class="well well-lg">...</div> Büyük well nesnesi
Elementler arasındaki padding farkını anlayabilmişsinizdir umarım.


13. Paneller (Panels)
Hepimizin severek yahut sevmeyerek kullandığı ve tasarım ve işlevselliği nedeniyle birçok web geliştirici tarafından sıklıkla tercih edilen bu panellere biraz değinelim bakalım.

KULLANIMI:

HTML:
<div class="panel panel-{panel-tipi}">
</div>

Yukarıdakinin çıktısı şöyle olmaktadır.



Gördüğünüz gibi belli bile değil şeklin ne olduğu. Bu nedenle içine bazı şeyler ekliyoruz. Bunlar panel-heading ve panel-body.


Panel-heading adından da anlaşılacağı üzere panelimizin heading'ini yani başlığını belirliyor. Panel-body ise panelimizin gövdesine hangi içeriklerin yer alacağını belirtiyor.

BİLGİ panel-heading ve panel-body'de yaklaşık %3-4 padding bulunur. İçeriğin hiç padding almamasını istiyorsanız, panel-body değil direk panel classının bulunduğu elementin içine yazın.

HTML:
<div class="panel panel-primary">
  <div class="panel-heading">
    Panel Başlık
  </div>
  <div class="panel-body">
    Panel İçerik
  </div>
</div>

Çıktısı:



Buna ek olarak bir de panellerimiz en altına footer eklememizi sağlayan bir özellik de bulunmakta bunun için aynı koda bir de panel-footer ekliyoruz.

HTML:
<div class="panel panel-primary">
  <div class="panel-heading">
    Panel Başlık
  </div>
  <div class="panel-body">
    Panel İçerik
  </div>
  <div class="panel-footer">
    Panel Footer
  </div>
</div>




SON SÖZ
Dilim döndüğünce sizlere, web geliştiricilerin hayat kurtaran framework'ü Bootstrap'i anlatmaya çalıştım. Bilgilendirmem boyunca ne çok terimsel ne de çok basit anlatmaya çalıştım, umarım ki tam ayarında sizlere açıklayabilmişimdir.

Benim uzun bir süredir forumda canımı sıkan bir olay vardı. A kişi bir çalışmasını paylaşıyor ve B kişisi ise "Bootstrap ile yapılmış, boş!" tarzında yorumlar atıyordu. Bir şeyin bootstrap ile yapılmış olması anlayacağınız kadarıyla yanlış bir şey değil, aksine bir kütüphaneye/framework'e hakim olabilmek çok hoş bir şey.

Sizlerden gelen geri bildirimler doğrultusunda konumu güncel tutacağım. Okuduğunuz için teşekkürler...


Bootstrap | Bootstrap Türkçe | Bootswatch
Bootstrap MIT lisansı altındadır.
 


Son düzenleme:

AtomyTR

Atomart - En büyük Discord Türk Sanat topluluğu.
Grafiker
Emekli
Mesajlar
1,671
En iyi cevaplar
19
Beğeniler
1,746
Puanları
5,090
Ruh hali
Hiçbirşey anlamadım.Ama konu gayet güzel.Emeğe saygı.
 

ElitIceNW

♛[ElitIceNW]♛ >Ödüllü Sunucu<
Mesajlar
188
En iyi cevaplar
0
Beğeniler
248
Puanları
310
Tamamını anlamasam da gerçekten çok emekle hazırlanmış, tebrikler. Yakında lazım olacak bana da :D
 

Waffleinstein

şüşko insan
Emektar Üye
Mesajlar
458
En iyi cevaplar
0
Beğeniler
434
Puanları
1,130
Ruh hali

ElitIceNW

♛[ElitIceNW]♛ >Ödüllü Sunucu<
Mesajlar
188
En iyi cevaplar
0
Beğeniler
248
Puanları
310
Web ile bir alakanız yoksa içindeki çoğu terimi anlamanız zor. Yazarken hedef kitlem daha çok Bootstrap kullanmayı isteyen arkadaşlar ya da bu ortamlara yeni girmiş kişilerdi
Hayır alakam yok demedim, sadece tamamını anlamadım. Yoksa uzun süredir web ile ilgileniyorum :)
 

AtomyTR

Atomart - En büyük Discord Türk Sanat topluluğu.
Grafiker
Emekli
Mesajlar
1,671
En iyi cevaplar
19
Beğeniler
1,746
Puanları
5,090
Ruh hali
Hocam bi soru sormak istiyorum.Youtubeden baktım bi program değilmiş gaba direk indiriyormuşuz.İçinde dosyalar var.Hazır kodlar var hazır kodları biz düzeniyoruz.

Benim anladığım bu :D
Yanlış anladıysam daha detaylıca rica etsem pm yoluyla veya burdaki diğer arkadaşlarımızda görsün diye burdan yazarmısınız?
 

Waffleinstein

şüşko insan
Emektar Üye
Mesajlar
458
En iyi cevaplar
0
Beğeniler
434
Puanları
1,130
Ruh hali
Hocam bi soru sormak istiyorum.Youtubeden baktım bi program değilmiş gaba direk indiriyormuşuz.İçinde dosyalar var.Hazır kodlar var hazır kodları biz düzeniyoruz.

Benim anladığım bu :D
Yanlış anladıysam daha detaylıca rica etsem pm yoluyla veya burdaki diğer arkadaşlarımızda görsün diye burdan yazarmısınız?

Şöyle oluyor, bu Bootstrap denen framework sana hazır bir tema vs. vermiyor ancak bir tema yapmanı sağlayacak bileşenleri ve altyapıyı sağlıyor. Onları ne ölçüde değiştirip kullandığın veya ona ait bileşenleri hiç kullanmaman sana kalmış. Yukarıda bahsettiğim CSS bileşenlerine bak. Sadece menü veya ilerleme çubuğu şeklinde paylaşıyor seninle Bootstrap, yaratıcılığını kullanarak ne yaptığın senin eserin.
 

Berk

Kızıltaş Madencisi
Mesajlar
600
En iyi cevaplar
0
Beğeniler
558
Puanları
1,240
Css in temellerini bilmeyen bir kişinin doğrudan bootstrap başlamasını asla önermem. Nedeni ise css kendi başına özgür olabileceğiniz bir platform. Bootstrap ile en fazla sana verdiği modeller ile ilerleyebilirsin ama css bilgin var ise bootstrap alt yapı olarak kullanarak hem birçok platforma kolayca uyumlu hem de özgün bir şey çıkartabilirsin.

Ama onun dışında güzel konu olmuş eline sağlık Alper :)
 

PIKO_SALA

Zombi Katili
Mesajlar
162
En iyi cevaplar
0
Beğeniler
68
Puanları
780
Herşeyin Başlangıcı
Merhaba Dünya! :)
Yararlı bir konu olmuş anlatımda sade ve öğretici teşekkürler
 

acrossfire

Demir Madencisi
Mesajlar
267
En iyi cevaplar
0
Beğeniler
78
Puanları
540
hiçbir şey anlamasamda ayakkabı çekeceği ni sevdim .
 

McWeb

Kızıltaş Madencisi
Mesajlar
467
En iyi cevaplar
0
Beğeniler
120
Puanları
610
Bilmeyenler için yararlı bir konu olmuş teşekkürler
 

dikodoksit

Kömür Madencisi
Mesajlar
141
En iyi cevaplar
0
Beğeniler
222
Puanları
310
Tamamını incelemedim genel bir göz attım, lakin incelediğim kadarı ile oldukça yararlı ve açıklayıcı bir konu olmuş. Eline sağlık hocam.
 

Üst