Konular
Videolar
Sunular
Testler

Bootstrap 3 JavaScript Componentleri

Bootstrap ile kullanılan Javascript destekli Componentlerden bazıları... Makalenin bazı bölümleri ingilizcedir.
Bu yazının sounda Tek bir modülün tüm bu Componentleri (Bileşenleri) nasıl içerdiğini göreceksiniz.
Bu yazıda aşağıdaki bazı Twitter Bootstrap Javascirpt destekli Component (Bileşen) ler açıklanmıştır.
 
  1. Modal
  2. Dropdown
  3. ScrollSpy
  4. Tab
  5. Tooltip
  6. Popover
  7. Alert

Modal (Diyalog Penceresi)

A modal is a dialog prompt just like a traditional alert. It comes with advanced features like modal title, modal body, modal footer, close button and a close symbol at the top right corner. It can be used as a confirmation window in many applications such as before making a payment, or deleting an account, etc.

Bootstrap 3 JavaScript Componentleri

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
 
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <h1>Hello World!</h1>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Bootstrap Modal 3 bölüme sahiptir: header, body ve footer. Bu bölümlere neler geleceğine siz karar verirsiniz.

Modal Dialog penceresi yüklendiğinde sayfayı yeniden yüklemek için:

<script type="text/javascript">
<!--
    $(document).ready(function () {
        $("#Modal").on("click" ,function() {
            location.reload();
        });
    });
//-->
</script>

 

DropDown (Açılır Menü)

Bootstrap 3 ile açılır menü yapmak çok basit. Sadece doğru class nesnesini kullanmalısınız. Açılır menüyü bir navigasyon barı içinde ve herhangi bir DIV tagı içerisinde kullanabilirsiniz.

Bootstrap 3 JavaScript Componentleri

<div class="dropdown">
  <a data-toggle="dropdown" href="#">Show Links <b class="caret"></b></a>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">First Link</a></li>
    <li><a href="#">Second Link</a></li>
    <li role="presentation" class="divider"></li>
    <li><a href="#">Third Link</a></li>
  </ul>
</div>

First, you have to give the class “dropdown” to any parent element that you want to treat as a drop down element. In my case, I have used a div element. You can even make an li element as “dropdown”. Then you have to place an “<a>” tag immediately inside the dropdown element. Add a new attribute “data-toggle” to the link tag and give the value as “dropdown”. Finally add a ul list below the link tag. You have to add class as “dropdown-menu” to the ul tag.

To add a separator between li elements, add a new emplty li element with class as “divider” to the list.

if you are not comfortable with the data-* attributes then you can even trigger drop down using jQuery. Give a unique id to the link element and call the dropdown method as below:

$('#myDropDown').dropdown();

 

 

 

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

Yorumunuzu Ekleyin
Bootstrap CSS Componentleri

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

16,167 Okunma 0 Yorum 12/01/2018 21:43:41 13/01/2018 00:44:45

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,077 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,817 Okunma 0 Yorum 11/09/2018 14:33:20 11/09/2018 14:33:52

Yükleniyor...