Bootstrap 4 İlk Web Sayfam

Bootstrap'ı kullanmak için JS ve CSS dosyalarına ihtiyacımız var, bu dosyaları https://getbootstrap.com/ adresinden alabilirsiniz.
Rar dosyasını açtığımızda css ve js klasörleri içinde birçok dosya bulunduğunu göreceksiniz, bize lazım olanlar bootstrap.min.css ve bootstrap.min.js dosyalarıdır.Ayrıca menü gibi tıklama gerektiren işlemler için jquery.js ve popper.js dosylarını da js klasörü içine indirmek gerekmektedir.

Jquery.js ve popper.js dosyaları için açılan sayfada sağ tuş sayfayı farklı kaydet yaparak dosyaları alabilirsiniz. Klasör yapımızda şu şekilde olmalıdır:
css klasörü ->bootstrap.min.css => link etiketi ile sayfamıza bağlanacak
js klasörü->jquery.min.js =>script src ile sayfamıza bağlanacak(1.sıra)
js klasörü->popper.min.js =>script src ile sayfamıza bağlanacak(2.sıra)
js klasörü->bootstrap.min.js =>script src ile sayfamıza bağlanacak(3.sıra)
Not:js dosyalarında sıralama önemlidir, tüm dosyalar jquery.min.js dosyasını kullandıkları için önce o sayfaya eklenmelidir. Son olarak sayfamızın tam mobil-uyumlu olması için

<meta name="viewport" content="width=device-width, initial-scale=1"> etiketi head etiketleri arasına eklenmelidir.

Artık bootstrap 4 ile ilk uygulamamızı yapmaya hazırız.Ağağıdaki koldarı kullanarak bir html sayfası oluşturun, ve sayfanın içine herhangi bir yazı yazın. Buraya kadar doğru olarak geldi iseniz, yazı türü farklı olacaktır, bu sizin bootstrap'ı düzgün kurduğunuz anlamına gelir. Tebrikler :)

Peki bootstrap 4'ü bu kadar özel kılan, onu bu kadar popüler yapan nedir?
Cevabı çok basit, yalnızca html elemanlarının class parametrelerine değerler vererek çok şık görünümler elde edilebiliyor.
Örneğin aşağıdaki kodu kendi uygulamanıza kopyalayıp yapıştırdığınızda a etiketinin class parametresine btn btn-danger yazın.
Normal bir yazının çok şık bir butona dönüştüğüne şahit olacaksınız :) <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> </head> <body> <a href="#">Merhaba Bootstrap 4</a> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/popper.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </body> </html>


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

İletişim

  • info@frontendokulu.com