Bootstrap Carousel Slide Örneği

Aşağıda bulunan kodları standart bootstrap linkleri eklenmiş her hangi bir sayfada rahatlıkla kullanabilirsiniz.

<div class="container"> <!-- container class ına atayacağınız özellik ile slide alanınızın en oranını ayarlayabilirsiniz. -->

<div id="benimbannerim" class="carousel slide" data-ride="carousel">  <!--benimbannerim olarak adlandırdığımız id daha sonra ilişkilendirmek istediğimiz alanlarda kullanacağız -->

<ol class="carousel-indicators">       <!--slide alanın en altında bulunan daire ikonlarının konumunu ayarlayacağınız class -->

<li data-target="#benimbannerim" data-slide-to="0" class="active"></li> <!-- slide alanının en altında bulunan daire ikonları, active sayfa ilk yüklendiinde aktif olacak ikonu belirtir-->

<li data-target="#benimbannerim" data-slide-to="1"></li>             

<li data-target="#benimbannerim" data-slide-to="2"></li>

<li data-target="#benimbannerim" data-slide-to="3"></li>

</ol>

<div class="carousel-inner">       <!-- resimlerin sıralı bir şekilde görünmesini sağlar, bu class olmadığı taktirde resimler ekranda alt alta işlem yapmadan durur -->

<div class="item active">   <!-- item resim alanına ait özellikler atanabilecek class, active sayfa ilk yüklendiğinde aktif olacak resimi belirtir -->

<img src="img/1.jpg" alt="resim"/> <!-- eklenecek resim -->

<div class="carousel-caption"> <!-- slide alanına ekleyeceğiniz yazılara ve alanına ait özellikleri ayarlayabileceğiniz class-->

<h2>birinci başlık </h2>  <!-- slide alanına ekleyeceğiniz yazı-->

<h3>ikinci başlık </h3>  <!-- slide alanına istediğiniz kadar yazı alananı ekleyebilirsiniz -->

<p>ücüncü başlık </p>

</div> 

</div>

<div class="item">

<img src="img/2.jpg" alt="resim"/>

<div class="carousel-caption">

<h2>başlık </h2>

<p>alt başlık </p>

</div> 

</div>

<div class="item">

<img src="img/3.jpg" alt="resim"/>

<div class="carousel-caption">

<h2>başka deneme yazısı </h2>

<p>başka deneme </p>

</div> 

</div>

<div class="item">

<img src="img/4.jpg" alt="resim"/>

<div class="carousel-caption">

<h2>bu yazı deneme </h2>

<p>bu yazı </p>

</div> 

</div>

</div>

<a class="left carousel-control" href="#benimbannerim" role="button" data-slide="prev"> <!-- slide alanında sol ok ikonu, left ile sola yasla, button ile buton özelliği verme ve prev ile geri gitme özelliği verilmiştir  -->

<span class="glyphicon glyphicon-chevron-left"></span> <!--buradaki glyphicon glyphicon-chevron-left class adı ikonun adıdır  -->

<span class="sr-only">Previous</span>

</a>

<a class="right carousel-control" href="#benimbannerim" role="button" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span>

<span class="sr-only">Next</span>

</a>

</div>

</div>

banner bootstrap carousel silide

Bootstrap Navbar Örneği

       Aşağıda bulunan kodları standart bootstrap linkleri eklenmiş her hangi bir sayfada rahatlıkla kullanabilirsiniz.

<!-- buraya ekleyeceğiniz container (</div> menü sonunda kapatılmak kaydıyla) menüyü ekranın sol ve sağ kısmını sıfır alarak başlatmak yerine, bootstrap ölçülerinde ortalar -->

<nav class="navbar navbar-default navbar-static-top">
<!--navbar-default siyah memü, navbar-inverse gri menü seçeneği sunar -->
<!--navbar-static-top  bar ın alt divle mesafesini ayarlar, bunun yerine navbar-fixed-bottom yazarsanız menü sayfa altında yer alır, navbar-fixed-top menü sayfanın üstünde yer alır  -->

     <div class="container-fluid">
 <!-- container-fluid menüyü içindekiler dahil ekranın solundan ve sağdan sıfır başlatır, sadece container ise menünün çerçevesini ekranın soldan ve sağdan sıfır başlatır fakat menü içeriği bootstrap standarlarında orta alanda kalır--> 

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navekle">
<!--  #navekle ile aşağıdaki navekle birbirleri ile bağlantı kurar, bu şekilde sağdaki icona tıkladığınızda açılır menü haline gelir. burada isimlerin aynı olması gerekmekte id veya class olabilir-->

                            <span class="icon-bar"></span> <!--sağ menüdeki ikonlar -->
                               <span class="icon-bar"></span>
                               <span class="icon-bar"></span>
                      </button>

  <a class="navbar-brand" href="#"> logo</a>
                             <!-- menünün solundaki sabit alan, isteğe bağlı kaldırılabilir -->
</div>

<div class="collapse navbar-collapse" id="navekle">
          <!-- navekle böylece yukarıdaki #naveklenin nereyi etkilediği belirlenir-->

<ul class="nav navbar-nav navbar-right">
                       <!-- navbar-right menüleri sağa yaslar, kullanmadığınız taktirde solda kalır -->
<li> <a href="#"> anasayfa </a></li>
<li> <a href="#"> hakkımızda </a></li>
<li> <a href="#"> referanslar</a></li>
<li> <a href="#"> iletişim </a></li>
</ul>
</div>
</div>
</nav>

bootstrap navbar