"Mark Otto" ve "Jacob Thornton" tarafından oluşturulmuş ve hala sürdürülüyor. Twitter, Bootstrap'ı Apache 2 ile lisanslayarak açık kaynak yapmış.
İndirmek için 3 seçenek:
1. git clone git://github.com/twbs/bootstrap.git
2. bower install bootstrap
3. son sürüm için tıklayın.
İçerik:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff Bu dosyalardan yararlanabilmek için oluşturmak istediğimiz HTML sayfasını bootstrap klasörünün içine taşımalıyız. Şimdik basit bir giriş sayfası tasarlayalım. Önce DOCTYPE'ı tanıtalım, html taglarımızı yazalım ve bootstrap'ı kullanabilmek için yolunu ekleyelim.
Head kısmına sayfa başlığını da ekleyelim. <title>Hello Bootstrap</title> Body kısmında bir form oluşturalım. "well" sınıfı Bootstrap'ın içerisinde yer alıyor.Sonra kullanıcı adı ve parolası etiketlerini oluşturuyoruz. Altına bir text alanı oluşturuyoruz. Son olarak da giriş butonu ekliyoruz. Burada "span3" text kutusunun 3 birim olacağını anlatıyor, "placeholder" ise text kutusunun içine kısa bir açıklama için kullanılabilir. <form class="well">
<label>Username:</label>
<br />
<input type="text" class="span3" placeholder="Username" />
<br />
<label>Password:</label>
<br />
<input type="text" class="span3" placeholder="Password">
<br />
<br />
<button class="btn btn-primary">Login</button>
</form>
<br />
<input type="text" class="span3" placeholder="Username" />
<br />
<label>Password:</label>
<br />
<input type="text" class="span3" placeholder="Password">
<br />
<br />
<button class="btn btn-primary">Login</button>
</form>
Son olarak sayfamız:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Hello Bootstrap</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<ul class="nav nav-list">
<li><a href="#"> Home</a></li>
<li><a href="#"> Profil</a></li>
<li><a href="#"> Message</a></li>
<li><a href="#"> Log Out</a></li>
</ul>
<script src="js/bootstrap.js"></script>
</body>
</html>
Son olarak da ızgaralar ile küçük bir uygulama yapalım.
<!DOCTYPE html>
<html>
<head>
<title>Hello Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<style>
.row > div {
background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;
}
</style>
</head>
<body>
<div class="container">
<h1>Hello Bootstrap</h1>
<div class="row">
<div class="col-md-3">
<p>Part 1</p>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-6">
<p>Part 2</p>
</div>
<div class="col-md-6">
<p>Part 3</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>Part 4</p>
</div>
<div class="col-md-6">
<p>Part 5</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Burada farklı olarak style tagları içinde satırların özelliklerini yazdık.Daha sonra <div> tagları ile ızgaraları istediğimiz şekilde ekleyebiliriz. Çıktımız da aşağıdaki gibi olmalı.
faydalı olmuş :)
YanıtlaSil