Bootstrap Framework'ü nasıl kullanılır ?

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

Karşılaştırma

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

Bootstrap Framework’ü nasıl kullanılır ?

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

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

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

4.Aşama nesneleri kullanarak test edelim.

Karşılaştırma

Bu çözüm işine yaradı mı?

Deneyimini paylaş

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

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

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

4.Aşama nesneleri kullanarak test edelim.

Karşılaştırma

Bu çözüm işine yaradı mı?

Deneyimini paylaş

Bir not daha.

IOS 18 ile bizi neler bekliyor?

X Mouse Button Fare Makro Uygulaması

Telegram kanaldan yazılanları gruba yönlendirme