The post Iphone Bootstrap modal aktifliği sorunu appeared first on DijitalTurk.
]]>
Bu aşamada Modal’ınıza bu kod ile data-backdrop="false"
aşağıdaki şekilde başlamanız gerekir.
<div class="modal fade" id="createModal" data-backdrop="false">
The post Iphone Bootstrap modal aktifliği sorunu appeared first on DijitalTurk.
]]>The post Bootstrap Framework’ü nasıl kullanılır ? appeared first on DijitalTurk.
]]>Bu yazımda basitçe boostrap framework ‘ünü nasıl sitemize entegre edeceğimizi anlatmaya çalışacağım.
Oldukça kolay olan bu yapı sayesinde mobil uyumlu ve hızlı web sayfaları oluşturabilirsiniz.
İlk olarak standart .html sayfamızı oluşturalım.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>bootstrap Entegrasyonu</title> </head> <body> <div>bootstrap Entegrasyonu</div> <input type="text" id="t1"> </body> </html>
Artık elimizde mobil uyumlu olmayan bir sitemiz var şimdi bu sayfamıza Bootstrap Framework’ünü entegre edelim.
Öncelikle
http://getbootstrap.com/
adresinden gerekli dosyaları indirmemiz gerekiyor.
Sıkıştırılmış olarak dosyaları indirdikten sonra ana klasörün içinde bulunan 3 klasörü web sayfamızın olduğu dizine kopyalıyoruz.
Ve son olarak <head></head> ve <body> </body>
etiketleri arasına aşağıdaki kodları yerleştiriyoruz.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>bootstrap Entegrasyonu</title> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/> </head> <body> <div>bootstrap Entegrasyonu</div> <input type="text" id="t1"> <script type="text/javascript" src="js/bootstrap.min.js"></script> </body> </html>
Şu aşamadan sonra artık sayfamıza Bootstrap entegre edilmiş oldu.
Üst kısıma bir “well” alanı ekleyip alert nesnesi oluşturup inputbox’a da güzel bir görünüm kazandırarak test edelim.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>bootstrap Entegrasyonu</title> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="well"> DENEME </div> <div class="alert alert-success" role="alert">bootstrap Entegrasyonu</div> <input type="text" id="t1" class="form-control"> <script type="text/javascript" src="js/bootstrap.min.js"></script> </body> </html>
Çıktısı:
Öncesi
![]() |
Sonrası
![]() |
İlerleyen günlerde nesnelerin özellikleri ve ızgara yapısı konularını da anlatmaya çalışacağım.
Yorum ve kaynak göstererek yaptığınız Paylaşımlarınız için şimdiden teşekkür ederim.
The post Bootstrap Framework’ü nasıl kullanılır ? appeared first on DijitalTurk.
]]>