Konular

EBooklar

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
  • Bootstrap Grid Sistemi ~ 10,218

    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.