Bir önceki yazımızda bootstrap nedir? İçerdiği başlıca bileşenler nedir onlardan bahsettim. Şimdi sizlere Bootstrap nasıl kullanılır yeni bir arayüz nasıl geliştirilir.
Öncelikle getbootstrap.com web sitesinden Bootstrap kütüphanesini indirin.
İndirdiğiniz zip dosyasını açın ve içinden sadece dist klasörünü alınız. (Bootstrap 4.0 için geçerlidir.)
ve localhost üzerinde veya uzak sunucunuzda dosyalarınızı aşağıdaki ekran görüntüsündeki gibi düzenleyiniz. Ek olarak bir de index.html dosyası oluşturacağız.
index.html dosyası için kodlarımız;
<!doctype html> <html lang="tr"> <head> <title>Merhaba Dünya!</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <h1>Merhaba Dünya!</h1> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Mobil cihazlara uyumluluk sağlamak için mutlaka aşağıdaki kodu eklemeniz gerekmektedir.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Sonuç:
Bu yazı yorumlara kapalı.