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

Tokat Teknik ve Endüstri Meslek Lisesi - Bilişim Teknolojileri Alanı Şefi
Bu yazı CSS, Web Tasarım içinde yayınlandı. Kalıcı bağlantıyı yer imlerinize ekleyin.

Bir Yanıt Bırakı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. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s