BOOTSTRAP NEDİR?

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.

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.

basit bir html sayfası oluşumu

<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>





vurgulu yazılar

<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 örneği

<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

<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.



kullanım alanlarından bazıları



(bootstrap-forms örneği)



GitHub'dayım