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.