Bootstrap CSS Componentleri

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

Bootstrap CSS Componentleri

 

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

 

Açılır Kapanır Alanlar
$("#GosterACDugmesi").click(function () {
        $(this).text() == '+' ? $(this).text('-') : $(this).text('+') ;
 });

   

<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1" id="GosterACDugmesi">+</a>
<div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Başlangıçta gizlenmiş ama linke tıklanınca açılacak içerik
      </div>
</div>

 

Sayfa İçinde Dinamik Alanlar

Bootstrap CSS Componentleri

<script>
   function SatirSil(No){
       $("#Posta" + No).remove();
       $("#PostaGizli" + No).remove();
   }
   var No=0;
   function MailEkle() {
       if($("#Email1").val()=='') {
           return;
       }
       ++No;
       SilButon = '<button type="button" class="btn btn-danger bg-danger text-white btn-sm" onclick="SatirSil('+ No +')"><i class="{IkonAjanda}" title="Delete"></i> Delete</button>';
       $("#MailListesi").append('<tr id="Posta' + No + '"><td>' + $("#Email1").val() + '</td><td>' + SilButon + '</td></tr>' );
       $("#YeniMailler").prepend('<input type="hidden" name="mailler[]" id="PostaGizli' + No + '" value="'+ $("#Email1").val() +'" />' );
       $("#Email1").val('');
   }
</script>

 

 <div class="form-group row" id="YeniMailler">
     <label class="col-md-3 col-form-label" for="Emai1"></label>
     <div class="col-md-9">
          <table class="table table-hover table-stripped table-sm" id="MailListesi"></table>
     </div>
  </div>
  <div class="form-group row">
      <label class="col-md-3 col-form-label" for="Emai1">Email</label>
      <div class="col-md-7">
          <input id="Email1" type="email" name="email_ekle" class="form-control" maxlength="50" value="" />
       </div>
       <div class="col-md-1">
          <button type="button" class="btn btn-secondary text-white" onclick="MailEkle()"><i class="{IkonAjanda}" title="Add"></i> Add</button>
       </div>
  </div>

 

Kaynaklar

21,110 Okunma Henüz yorum yapılmamış 20/10/2024 23:14:42 20/10/2024 23:15:15

Yorumunuzu Ekleyin
Görsel Liste


Bootstrap Takvim Seçtiricisi (Datetime Picker)

24,477 okuma, 30/11/2014

Bootstrap Takvim Seçtiricisi (Datetime Picker)
Bootstrap Form Elemanları

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

19,518 okuma, 11/09/2018

Bootstrap Form Elemanları
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.

18,485 okuma, 25/10/2014

Bootstrap Grid Sistemi
Bootstrap Class Referansı

Bootstrap v4.3.0 Class Listesi

12,917 okuma, 17/04/2019

Bootstrap Class Referansı
Bootstrap 3 JavaScript Componentleri

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

11,319 okuma, 20/02/2017

Bootstrap 3 JavaScript Componentleri
Bootstrap 4 Navbar Menü Örnekleri

Normal bootstrap 4 navabarı ile fare üzerine gelince açılan, yatayda tüm ekranı kaplayan ve zemininde siyah gölgesi olan menü örnek kodları.

4,650 okuma, 04/06/2020

Bootstrap 4 Navbar Menü Örnekleri
Bootstrap 4 Class Referansı

3,622 okuma, 01/03/2019

Bootstrap 4 Class Referansı
Bootstrap 4 Yardımcı Kısa Kodlar

3,020 okuma, 04/06/2020

Bootstrap 4 Yardımcı Kısa Kodlar
Bootstrap 4 ile Ekranı 4 Eşit Parçaya Nasıl Bölebilirsiniz?

Örnekteki uygulama ile Ekranı 4 eşit parçaya bölebilirsiniz.

2,863 okuma, 26/01/2020

Bootstrap 4 ile Ekranı 4 Eşit Parçaya Nasıl Bölebilirsiniz?
Yükleniyor...
    Yükleniyor...