boostrap – DijitalTurk https://dijitalturk.com/veysel Dijital Paylaşımlar Mon, 11 Jun 2018 17:05:06 +0000 tr hourly 1 Iphone Bootstrap modal aktifliği sorunu https://dijitalturk.com/veysel/iphone-bootstrap-modal-aktifligi-sorunu/ https://dijitalturk.com/veysel/iphone-bootstrap-modal-aktifligi-sorunu/#respond Tue, 30 Jan 2018 14:12:10 +0000 http://dijitalturk.com/veysel/?p=949 Servicenow portal uygulamasında Bootstrap modal componenti ile çalıştığınızda Iphone cihazlarda modal görülmeme sorunu yaşabilirsiniz. Bu aşamada Modal’ınıza bu kod ile data-backdrop="false"

The post Iphone Bootstrap modal aktifliği sorunu appeared first on DijitalTurk.

]]> Servicenow portal uygulamasında Bootstrap modal componenti ile çalıştığınızda Iphone cihazlarda modal görülmeme sorunu yaşabilirsiniz.

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.

]]> https://dijitalturk.com/veysel/iphone-bootstrap-modal-aktifligi-sorunu/feed/ 0 Bootstrap Framework’ü nasıl kullanılır ? https://dijitalturk.com/veysel/bootstrap-frameworku-nasil-kullanilir/ https://dijitalturk.com/veysel/bootstrap-frameworku-nasil-kullanilir/#respond Thu, 15 Dec 2016 08:26:07 +0000 http://dijitalturk.com/veysel/?p=685 Merhaba, 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

The post Bootstrap Framework’ü nasıl kullanılır ? appeared first on DijitalTurk.

]]> Merhaba,

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.

 1.İlk Aşama (html sayfamızı oluşturalım)

İ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>

 

2. İkinci aşama, gerekli dosyaları indirip sitemizin olduğu dizine kopyalayalım.

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.

 

 

 

3.Aşama sayfamıza bootstrap ‘ı entegre edelim.

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.

4.Aşama nesneleri kullanarak test edelim.

Ü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ı:

mobil uyumlu örnek çıktı

Karşılaştırma

Öncesi

html çıktısı
 Sonrası

boostrap örneği

İ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.

]]> https://dijitalturk.com/veysel/bootstrap-frameworku-nasil-kullanilir/feed/ 0