Jasny Bootstrap

Bootstrap'ı araştırdıkça içinden bootstrap için çalışmalar içinde kayboldum. İnsanlar tasarım altyapısını kullanarak farklı farklı şeyler yapıyorlar. Sanırım bir kişi Jasny adıyla ufak bir paket oluşturmuş. İnput Masked Text'i araştırıken karşıma çıktı. Fazla bir aktivitesi yok fakat textboxı kendimiz maskedlemesi için basit olabilir diye düşünüyorum.

"http://jasny.github.io/bootstrap/getting-started/" adresine ziyaret ederek inceleme yapabilirsiniz. Uygulamasına geçtiğimizde alt yapısı bootstrap olduğu için daha önce anlattığımız konu dan inceliyebilirsiniz diye düşünüyorum. Daha şu an buldugum için web sitesini inceleme yapmadım. Okuduğum kadarıyla aktaracağım size..



İlk önce jasny yazdıgı css ve js klasörünü projemize kayıt ediyoruz. Çünkü adam bunların üzerinde oynama yaptığı için değişimler olmuştur. Head kısmına

<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css"> <!-- Latest compiled and minified JavaScript --><script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>

bunu eklediğimizde Css sayfasını çağırıyoruz diyor. jasny-bootstrap  veya jasny-bootstrap.min.jsolarak isimlendirdiği kısım internetten kişinin web sitesinden çektiğimiz css ve js dosyasıdır.

1- Button





<!-- Standard button with label --><button type="button" class="btn btn-labeled btn-default"><span class="btn-label"><i class="glyphicon glyphicon-arrow-left"></i></span>Left</button>
<!-- Standard button with label on the right side --><button type="button" class="btn btn-labeled btn-default">Right<span class="btn-label btn-label-right"><i class="glyphicon glyphicon-arrow-right"></i></span></button>
<!-- Success button with label --><button type="button" class="btn btn-labeled btn-success"><span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>Success</button>
<!-- Danger button with label --><button type="button" class="btn btn-labeled btn-danger"><span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>Danger</button>

Body kısmımıza gelecek kodlar yukarıda belirtilmiştir.

NavMenu ve Alert kısmı var. Bunu bu adresten sizde inceliyebilirsiniz..

Bu yazıyı input masked text için yazdım. Bu yüzden hemen konuma geliyorum.  İlk önce bu 
olayda js oldugu için aşağıdaki kodu head'a ekleyeceğiz.


 <!-- Latest compiled and minified CSS --><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
<!-- Latest compiled and minified JavaScript --><script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
Body kısmına aşağıdaki kodla çağırıyoruz.

<input type="text" class="form-control" data-mask="999-99-999-9999-9" placeholder="ISBN">

Yukarıdaki tagımızı ekleyerek işlemi bitiriyoruz. Böylece maskedlemiş olmaktayız.

Şimdi gelelim işin civcivli haline. Data-mask kısmını görüyoruz. 999-99-999-9999-9 
bulunmakta. Bunu eğer örneğin telefon olarak değiştirmek istiyoruz. O zaman yazacağımız 
satırımız da şöyle olacak. data-mask="(999)999-99-99" yaparsak çıktı örneğin;
(598)123-45-67 olarak gözükür. Buradaki 9 olarak belirttiğiz olay rakam olacağını gösterir
orada..


9   Number
a   Latter
w  Alphanumeric
*   Any character
?   Optional - Any characters following will become optional


Yukarıdaki haritada neleri nasıl kullanıcağımızda belirtilmiştir..