Konular

Bootstrap CSS Componentleri

Bootstrap ile kullanılan CSS destekli HTML Componentlerden bazıları..

Başlıklar

Bootstrap CSS Componentleri

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Sayfa Başlığı

Bootstrap CSS Componentleri

<div class="page-header">
    <h4>Elektronik Posta</h4>
</div>

 

Bootstrap CSS Componentleri

Panel

Yukardan %15 boşluk verip, ekranı ortalayan bir panel örneği

<div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-sm-12" style="float: none; margin: 15% auto;">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel title</h3>
                    </div>
                    <div class="panel-body">
                        Panel content
                    </div>
                </div>
            </div>
        </div>
    </div>

 
Bootstrap Componentleri
Navbar

Bootstrap Componentleri

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

 

Navbar Başlangıcındaki Brand Kısmına Resim Eklemek İçin

Bootstrap Componentleri  

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

  Navar Üzerine Form Elemanı Eklemek İçin

Bootstrap Componentleri

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

  Navar Üzerine Buton Eklemek İçin  

Bootstrap Componentleri

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Navbar Üzerine Metin Eklemek İçin

Bootstrap Componentleri

<p class="navbar-text">Signed in as Mark Otto</p>

Navbar Üzerine Link Eklemek İçin

 Bootstrap Componentleri

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p> 

.navbar-default Normal Navbar (Beyaz Renkli Bar) Eklemek İçin

Bootstrap Componentleri

<nav class="navbar navbar-default" role="navigation">

 

.navbar-static-top Navbarı Sayfanın En Üstünde Fakat Ekranla Beraber Kaymayacak Şekilde Tüm Sayfaya Yaymak İçin

Bootstrap Componentleri

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

 

Siyah Renkli Navbar İçin

Bootstrap Componentleri

<nav class="navbar navbar-inverse" role="navigation">

 

Badges

Bootstrap Componentleri

<a href="#">Inbox <span class="badge">42</span></a>

Bootstrap Componentleri

<ul class="nav nav-pills nav-stacked">
  <li class="active">
    <a href="#">
      <span class="badge pull-right">42</span>
      Home
    </a>
  </li>
  ...
</ul>

Bootstrap Componentleri

<a class="btn">
    <span class="glyphicon glyphicon-user"></span>
    <span class="badge badge1">5</span>
</a>

Butonlar

<a class="btn btn-success btn-product btn-xs" href="#">
   <span class="glyphicon glyphicon-shopping-cart"></span>
   Sepete At
</a>

Bootstrap CSS Componentleri

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Bootstrap CSS Componentleri

 

Tooltip:

Bootstrap CSS Componentleri

  Öncelikle tooltip'i harekete geçirecek kodları sayfaya eklemelisiniz.

$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});

$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});

   

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<a href="#" data-toggle="tooltip" title="Example tooltip">Hover over me</a>

 

Çok satırlı Tooltip için:

<a href="#" class="tooltip-test" data-toggle="tooltip" data-html="true" data-original-title="Alış Fiyatınız Kdv Hariç : <span class='pull-right'>20</span><br>Alış Fiyatınız Kdv Dahil : <span class='pull-right'>23.6</span>">
25
</a>

 

 List Kullanımı:

Yatay List

<ul class="list-inline">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Bootstrap CSS Componentleri

 

Rekli Kutular

<div class="alert alert-success ">
    <h5>Teslimat Şekli</h5>
</div>

Bootstrap CSS Componentleri

Butonlar

<a class="btn btn-success btn-product btn-xs" onclick="SepetEkleAc('FKK-1106')" href="#">
    <span class="glyphicon glyphicon-shopping-cart"></span>
    Sepete At
</a>

Bootstrap CSS Componentleri

 

Büyük Menü

 

<div class="input-group-btn" style="position:static">
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="MarkaListesiDugmesi">
          <span id="AramaKonsepti">Marka Listesi</span> <span class="caret"></span>
     </button>
     <ul class="dropdown-menu" role="menu" style="width:100%">
         <li>
             test
         </li>
     </ul>
</div>

Bootstrap CSS Componentleri

 

Kaynaklar

 

 

 

Yorumunuzu Ekleyin
Bootstrap Grid Sistemi

Bildiğiniz gibi Bootstrap ile responsive tasarımlar yapmak çok basit ve hızlı. İstediğimiz her öğe için birer yapılmış ve kopyala yapıştır yaparak hızlıca sitemizi Bootstrap ile şekillendirebiliriz.

14,053 Okunma 0 Yorum 25/10/2014 19:05:47 25/10/2014 19:06:28

Bootstrap Form Elemanları

Bootstrapın temel form mantığı ve bir kaç örnek...

12,777 Okunma 0 Yorum 11/09/2018 14:33:20 11/09/2018 14:33:52

Bootstrap 3 JavaScript Componentleri

Bootstrap ile kullanılan Javascript destekli Componentlerden bazıları... Makalenin bazı bölümleri ingilizcedir.

8,528 Okunma 0 Yorum 24/11/2014 15:36:14 20/02/2017 23:06:13

Yükleniyor...