Web uygulamalarını ve web sitelerini daha hızlı,modern bir yapıyla oluşturulmasını sağlayan çok kodlamanın hazırlanmış halidir.
Bootstrap,Twitter’ın Apache 2 lisansıyla açık kaynak yaptığı CSS,HTML araç kiti.
CSS tarafından LESS’i kullanıyor.CSS ve JS hazır halde bulunuyor.
Tasarım dilinde en çok kullanılan framework uygulamasıdır.
Neleri kapsıyor
-Button groups
-Button dropdowns
-Navigational tabs, pills, and lists
-Navbar
-Labels
-Badges
-Page headers and hero unit
-Thumbnails
-Alerts
-Progress bars
-Modals
-Dropdowns
-Tooltips
-Popovers
-Accordion
-Carousel
-Typeahead
ve her geçen gün şaşırtıcı yeniliklerle geliyorlar.
Bootstrap ile CSS’ye tam anlamıyla hakim olabilirsiniz.
Bootstrap GİTHUB tarafından açık kaynak olarak geliştirilmektedir.
Bootstrap HTML5’in tüm özelliklerini destekler.
Bootstrap ile oluşturulmak istenen projeler için özel olarak tasarlanmış JQuery eklentileri vardır.
TARAYICI DESTEĞİ
Modern web tarayıcıları Chrome,Opera,Firefox 4+,Safari ve İnternet Explorer( :’( ) versiyonları destekler.
yapılması gerekenler
Twitter-Bootstrapı GİTHUB sayfasından inidirin ve klasörün içine oluşturmak istediğiniz HTML sayfasını yerleştirin. İndirmiş oldugunuz bu depo içinde Bootstrap’ın önemli dosyaları bulunmaktadır.Bu dosyalardan yararlanabilmek için HTML sayfasına bunların include edilmesi gerekmektedir.
<head> .... </head>
etiketleri arasına
<link rel="stylesheet" href="docs/assets/css/bootstrap.css">
bu ve daha kullanmak istediğimiz diğer css dosyalarını include ediyoruz.(dosya yoluna dikkat ediniz sizinki farklı olabilir.)aynı şekilde js kodlarıda;
<script src="js/bootstrap.min.js"></script>
Twitter Bootstrap, LESS’i (LESS ) destekliyor. LESS daha hızlı ve kolay web geliştirmek için bir CSS önişlemcisidir. O yüzden less css dosyasını ve less JS dosyasını, kendi HTML sayfanızda şu şekilde include edebilirsiniz:
<link rel="stylesheet/less" href="less/bootstrap.less">
<script src="/path/to/less.js"></script>
Hemen birkaç örnek verelim.
<html>
<head>
<link rel="stylesheet" href="docs/assets/css/bootstrap.css">
<link rel="stylesheet/less" href="less/bootstrap.less">
</head>
<body>
<div class="container">
<div class="span9">
<div class="hero-unit">
<p> MERHABA DÜNYA</p>
</div>
</div>
</div>
</body>
</html>
<p class="muted">sessiz.</p>
<p class="text-warning">uyarı.</p>
<p class="text-error">hata.</p>
<p class="text-info">haber.</p>
<p class="text-success">başarı.</p>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
<button type="button" class="btn btn-large btn-primary">Large button</button>
<button type="button" class="btn btn-large">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn">Default button</button>
<button type="button" class="btn btn-small btn-primary">Small button</button>
<button type="button" class="btn btn-small">Small button</button>
<button type="button" class="btn btn-mini btn-primary">Mini button</button>
<button type="button" class="btn btn-mini">Mini button</button>
vs…
daha fazlası için.
Bootstrap’ın resmi internet sitesi buyrun
Bootstrap ile oluşturulmuş temalar buyrun
Bootstrap ile oluşturulmuş web sitelerine buyrun
Daha detaylı bilgi için resmi blog yazısına ulaşabilirsiniz. buyrun
Ayrıca resmi sitesinde bulunan kodları daha sade şekilde yazmaya çalıştım.kodları için github depom (depomun gh-pages dalında) buyrun
Ve demolarını görmek için buyrun
kullanım alanlarından bazıları
Rails ve Bootstrap
Jekyll-Bootstrap buyrun
backbone.js + Boostrap ile Örnek Uygulaması buyrun
Bootstrap ile hazır sistem. http://jetstrap.com/
Bootstrap ile form yardımcıları BootstrapFormHelpers
Kendi formunuzu kendiniz oluşturun bootstrap-forms
(bootstrap-forms örneği)