Bootstrap kullanımı

Bootstrap

Twitter Bootstrap Uygulamasını buradan indirebilirsiniz.

Dosyaları rar’dan çıkarttıktan sonra karşımıza 3 klasör çıkacaktır..Aslında bu klasörler projemizi hazırlarkende oluşturduğumuz klasörlerle aynıdır..

IMG-CSS-JS klasörlerini projemizin ana dizine attıktan sonra sadece yapmamız gereken;

CSS ve JS Dosyalarınızı projemize dahil etmek. Tabi bu bildiğimiz JS ve CSS dosyalarını include etme mantığıyla aynı.

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>

Şeklinde ekledikten sonra artık bootstrap uygulamalarını kullanmaya başlayabiliriz. Detaylı olarak buradan bakabilirsiniz.

Eğer eski bir HTML dili kullanıyorsanız öncellikle HTML dilimizi HTML5 olduğunu tanımlayalım. Çünkü bootstrap HTML5 dili için hazırlanmıştır.

<!DOCTYPE html>
<html lang="en">
..
</html>

DOCTYPE html değeri artık HTML5 kodlarının kullanılması gereken bir kod.

HEAD AYARLAMA

Uygulamaya başlamadan önce ufak bir hatırlatma yapmak istiyorum. Öncellikle bir RESET.CSS yada diğer ismiyle Normalize.CSS kullanmamız gerekiyor..Bu bütün tarayıcılarda sorun çıkartmadan kullanmak için gereklidir.

Benim kullandığım RESET.CSS yada daha gelişmiş olarak Normalize.CSS indirmeniz gerekmektedir.

Reset uygulamasını da indirdikten sonra elimizde 2 adet CSS dosyası olmalı. Ardından bir de kişisel olarak tasarımlarımızı topladığımız stil.css yada size özel ismi neyse 3 CSS dosyasını aşağıdaki sıralamaya göre eklememiz gerekmektedir.

<!DOCTYPE html>
<html lang="en">
<head>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/stil.css" rel="stylesheet" type="text/css" />
</head>
<body></body>
</html>

Sıralamaya neden dikkat etmemiz gerektiğini söylerseniz. RESET.CSS de tarayıcının tanımlı olduğu tüm CSS kodlarını temizledik. Bunu Bootstrap’dan sonra yapsaydık bootstrap kodlarını da temizlemiş olacaktık ve sorun olacaktı. Yine aynı şekilde bootstrap kodlarını stil.css den sonra ekleseydik tarayıcımız bizim özelleştirilmiş CSS kodlarımızı Bootstrap ile çakışmasını algılamayacaktı.

BODY AYARLAMA

Öncelikle Stil.CSS dosyamızı sanki bootstrap kullanmıyormuş gibi tasarımını yapmaya başlıyabiliriz ve aynı şekilde HTML kodlarını kullanabiliriz.

Tabi burada istediğiniz bootstrap kodunu yada fonksiyonunu kullanabilirsiniz. Fakat tamamen bootstrap’a bağlı kalmamanız için ve özelleştirilmiş ayarlar için açıkcası ben pek bootstrap kullanmadım..

Yine de bootstrap alt yapısını anlatacak olursak;

Bootstrap 940 Grid sistemini kullanmaktadır. Yani tüm bilgisayarlarda ortak çözünürlük birimi olarak kullanılan 940 pixel genişliğini kullanmaktadır.

Fakat 940 sistemine bağlı kalmamak içinde yine fluid özelliği olduğundan dolayı kolaylıkla kullanabiliriz.

GENEL YAPI

<!DOCTYPE html>
<html lang="en">
<head>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/stil.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="genel">
...
</div>
</body>
</html>

Öncelikle body ve ardından genel isminde iki kodu özelleştirilmiş olarak Stil.CSS tanımlamamız gerekiyor.

body {
	background-color: #F2F2F2;
	background-image: url('bg.png');
}
.genel {
	width: 960px;
	margin: 0px auto 0px auto;
}

Yapısında ekliyoruz. Burada BODY kısmında bildiğiniz gibi background, font gibi tercihleri ayarlıyabiliriz. Tabi bu tercihler bootstrap üzerinde de olduğu için font – line-height gibi özellikleri tek tek tanımlamaktan kurtuluyoruz. Siz yine de bootstrap alt yapısındaki o değerler hoşunuza gitmediyse tekrar kendi CSS’inizde tanımlayabilirsiniz.

GRID KULLANIMI

Bootstrap sütun sisteminde (Column Grid) tüm Arayüz tasarımcıları tarafından kullanılan 960 Grid sistemini kullanmaktadır.

Bu sistemi kullanmak için iki farklı kullanım açımız var. ROW ve ROW-FLUID özellikleri. Fluid’in row’dan farkı ROW değerinde grid sistemindeki gibi sabit piksel değerleri kullanırken, ROW-Fluid değerinde yüzdelik değerler kullanılır. Yani GENEL class’daki değer eğer farklı bir boyutta olacaksa ve Bootstrap Grid özelliğini kullanacaksanız fluid kullanmanız gerekmektedir. Yada özelleştirilmiş 500 pixel bir alt bölümde de grid kullanacaksanız fluid seçeneğini kullanmanız en doğrusu olur. Aksi takdirde pixel olarak hesapladığından kaymalar olacaktır.

<!DOCTYPE html>
<html lang="en">
<head>
<title>...</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/stil.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="genel">
<div class="row">
<div class="span9">Sol</div>
<div class="span3">Sag</div>
</div>
</div>
</body>
</html>

GENEL sınıfımızın içinde ROW kullanıp GRID sistemini kullanacağımız açıkladık. Grid sistemi bildiğiniz gibi 960 pixelin 12’ye bölünmesiyle oluşur. Yani spandeğeri 80 pixellik bir griddir. Span 9 değeri ise 720 pixellik bir alana sahiptir. Span 3 ise 240 pixelliktir.

Burada unutmamız gereken bir özellik ise; row içerisinde kullandığımız spanX değerlerinin yani X değerlerinin toplamının 12 Olması gerçeğidir…

<div class="genel">
<div class="row">
<div class="span1">+1</div>
<div class="span3">+3</div>
<div class="span2">+2</div>
<div class="span3">+3</div>

<div class="span3">+3</div>
</div>
</div>

Yani span id değerlerinin toplamı 12 yapmalıdır..Yukarıdaki gib 1 + 3 + 2 + 3 + 3 = 12 yapmalıdır.

Diğer bir açıklamayla 960 Pixellik bir pastamız olduğunda bunu farklı şekillerde bölmek istiyoruz. Bunu span değerleriyle rahatlıkla bölebiliyoruz.

Eğer 960 Pixel genişliği size çok fazla yada az geldiyse ve genel tablonuzun değeri 960 pixel değilse

class=”row” yerine class=”row-fluid” kullanmanız gerekmektedir.

Yada hiç grid sistemini kullanmadan da direk olarak kendi kodlarınızla ve uzunluk ölçüleriyle yazabilirsiniz.

DİĞER KULLANIMLAR

Tek tek tüm bootstrap kodlarını anlatmak yorucu olacağından kaynak sitesinde zaten tüm kullanım şekilleri anlatılmış durumda.

Buradan buton, form gibi seçenekleri yada buradan alternatif menü, tab gibi bileşenlerin kullanımını görebilirsiniz.

  • Bootstrap özelliklerini kullanmak istediğimizde (yani buton rengi, form gibi) HTML kodlarımıza sadece class değerine kullanmak istediğimiz değeri eklememiz yeterli olacaktır.
  • Unutmadan hatırlatmak isterim bir class değerine yani div class=”sss” değerine alternatif değerleri de boşluk bırakıp ekleyebiliriz..Yani div class=”sss aaabbb”  değeri bize 3 tane farklı CSS tablosunun da bu tablo üzerinde etkili olacağını gösterir.B u sayede bootstrap sınıflarını kullandıktan sonra kendi özel CSS tablolarımızı da en sona ekleyerek Varsayılan Bootstrap sınıflarında müdahale hakkımız bulunuyor.
  • Eğer tasarımlar kapsayamama gibi bir sorun olursa div class=”clearfix”> </div> olayını kullanabilirsiniz. Clearfix değeri bootstrap üzerinde tanımlıdır.

Yanıt Gönder