Gönderen Konu: Bootstrap Nedir  (Okunma sayısı 1224 defa)

Çevrimdışı orhan

  • Yönetici
  • Trade Sayısı: (0)
  • *
  • İleti: 384
  • Karma +19/-1
  • Cinsiyet: Bay
    • Profili Görüntüle
    • webtiryaki.com
Bootstrap Nedir
« : 16 Nis 2014, 16:11:45 »
[h1]

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
Alıntı
-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.

Kod: [Seç]
<head> .... </head>
etiketleri arasına

Kod: [Seç]
<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;

Kod: [Seç]
<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:

Kod: [Seç]
<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

Kod: [Seç]
<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>
    <>
   <>
  <>
 </body>
</html>



vurgulu yazılar

Kod: [Seç]
<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

Kod: [Seç]
<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 class="control-group">
     <label class="control-label" for="inputPassword">Password</label>
     <div class="controls">
   <input type="password" id="inputPassword" placeholder="Password">
     <>
   <>
   <div class="control-group">
     <div class="controls">
   <label class="checkbox">
     <input type="checkbox"> Remember me
   </label>
   <button type="submit" class="btn">Sign in</button>
     <>
   <>
  </form>



button

Kod: [Seç]
<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>


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
buyrun
Ve demolarını görmek içinbuyrun

kullanım alanlarından bazıları
Rails ve Bootstrap

twitter-bootstrap-rails
railscasts
railscasts_indirmek_icin
twitter-bootstrap-rails
temalar


Jekyll-Bootstrap buyrun
backbone.js + Boostrap ile Örnek Uygulaması buyrun
demosu buyrun
github deposu buyrun
Bootstrap ile hazır sistem. http://jetstrap.com/
Bootstrap ile form yardımcıları BootstrapFormHelpers
Kendi formunuzu kendiniz oluşturun bootstrap-forms

Bootstrap CMS Website temaları incelemenizi tavsiye ederim Bootstrap temaları[/h1]
« Son Düzenleme: 10 Eyl 2014, 07:40:26 Gönderen: Ata »

Çevrimdışı snrj

  • Trade Sayısı: (0)
  • Yeni Üye
  • *
  • İleti: 19
  • Karma +1/-0
  • Cinsiyet: Bay
  • Smf Forumun Kralı
    • Profili Görüntüle
    • smf destek
Ynt: Bootstrap Nedir
« Yanıtla #1 : 10 May 2014, 21:00:36 »
gerçekten faydalı bir kaynak olmuş elinize sağlık orhan bey