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();

 

 

 

11,419 Okunma Henüz yorum yapılmamış 24/11/2014 15:36:14 20/02/2017 23:06:13

Yorumunuzu Ekleyin
Görsel Liste


Bootstrap Takvim Seçtiricisi (Datetime Picker)

24,644 okuma, 30/11/2014

Bootstrap Takvim Seçtiricisi (Datetime Picker)
Bootstrap CSS Componentleri

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

21,278 okuma, 20/10/2024

Bootstrap CSS Componentleri
Bootstrap Form Elemanları

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

19,646 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,599 okuma, 25/10/2014

Bootstrap Grid Sistemi
Bootstrap Class Referansı

Bootstrap v4.3.0 Class Listesi

13,202 okuma, 17/04/2019

Bootstrap Class Referansı
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,781 okuma, 04/06/2020

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

3,710 okuma, 01/03/2019

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

3,116 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,957 okuma, 26/01/2020

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