BOOTSTRAP NEDİR?

   

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.

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

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.

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

(bootstrap-forms örneği)

 Bu yazı http://tugdev.github.io/bootstrap/ adresinden alıntıdır.

About mehmetakifsonmez

Ikizsoft bilişim hizmetleri ARGE müdürü
Bu yazı CSS, Web Tasarım içinde yayınlandı. Kalıcı bağlantıyı yer imlerinize ekleyin.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s