- Mesajlar
- 458
- En iyi cevaplar
- 0
- Beğeniler
- 434
- Puanları
- 1,130
- Ruh hali
Ö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 -. 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:
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.
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>
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
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)
- 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>
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>
Kod:
a
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 )
PHP:
<a href="#" class="btn btn-primary">Minecraft Türk</a>
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>
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>
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>
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
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">×</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
- <div class="well>...</div> Normal büyüklükteki well nesnesi
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...
Son düzenleme: