Bootstrap’a Başlarken

Bu makalede, Bootstrap frameworkunu kullanarak bir web sayfasının nasıl oluşturulacağını öğreneceksiniz.

Bootstrap kullanarak bir web sayfası oluşturmanın ne kadar kolay olduğunu öğreneceksiniz. Ancak başlamadan önce, bir kod editörüne ve bazı HTML ve CSS çalışma bilgilerine sahip olduğunuzdan emin olun.

Hadi, ilk Bootstrap destekli web sayfasını oluşturmaya başlayalım.

Bootstrap ile İlk Web Sayfanızı Oluşturma

Bootstrap CSS ve JS dosyalarını CDN üzerinden jQuery ve Popper.js gibi diğer JavaScript bağımlılıklarını dahil ederek temel bir Bootstrap şablonu oluşturacağız.

Projenize CDN (İçerik Dağıtım Ağı) üzerinden Bootstrap eklemenizi öneririz. Çünkü CDN, yükleme süresini azaltarak performans avantajı sunar. Dosyaları dünyaya yayılmış birden fazla sunucuda barındırır, böylece bir kullanıcı dosyayı istediğinde sunucuya kendilerine en yakın olan sunucudan verir. Ayrıca örneklerde CDN bağlantılarını kullanacağız:

Aşağıdaki adımları takip edin. Bu makalenin sonunda, web tarayıcınızda “Merhaba dünya” mesajını görüntüleyen basit bir Bootstrap destekli web sayfası hazırlamış olacaksınız.

1. Adım: Temel bir HTML dosyası oluşturma

Favori kod düzenleyicinizi açın ve yeni bir HTML dosyası oluşturun. Boş bir pencereyle başlayın ve aşağıdaki kodu yazın ve masaüstünüzde “temel.html” olarak kaydedin.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Basit HTML Dosyası</title>
</head>
<body>
    <h1>Merhaba, dünya!</h1>
</body>
</html>

İpucu: Mobil cihazlarda düzgün görüntülemeyi sağlamak için belgenizin bölümünün içine her zaman <meta> etiketini ekleyin.

2. Adım: Bu HTML Dosyasını Bootstrap Şablonu Yapma

Bu düz HTML dosyasını Bootstrap şablonu yapmak için, Bootstrap CSS ve JS dosyalarını, ayrıca CDN bağlantılarını kullanan gerekli jQuery ve Popper.js dosyalarını ekleyin.

Web sayfalarınızın performansını artırmak için; aşağıdaki örnekte gösterildiği gibi, sayfanın sonuna kapanış </body> etiketinden hemen önce JavaScript dosyalarını eklemelisiniz:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Basit Bootstrap Şablonu</title>

    <!-- Bootstrap CSS dosyası -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
    <h1>Merhaba, dünya!</h1>

    <!-- JS dosyaları: ilk jQuery, sonra Popper.js ve Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Ve artık hazırız! Bootstrap CSS ve JS dosyalarını ve gerekli jQuery ve Popper.js kütüphanesini ekledikten sonra Bootstrap frameworkuyla herhangi bir site veya uygulama geliştirmeye başlayabiliriz.

integrity (bütünlük) ve crossorigin (çapraz kökenli) öznitelikleri, Subresource Integrity – SRI (Alt Kaynak Bütünlüğü) CDN bağlantılarına eklenmiştir. Web sitenizin getirdiği dosyaların (bir CDN’den veya herhangi bir yerden) beklenmedik veya kötü amaçlı değişiklik yapılmadan teslim edilmesini sağlayarak, tehlikeye atılmış CDN’lerden kaynaklanan saldırı riskini azaltmanıza olanak sağlayan bir güvenlik özelliğidir. Alınan bir dosyanın eşleşmesi gereken bir şifreleme karma sağlamanıza izin vererek çalışır.

İpucu: Web sitenizi ziyaret eden kişi, diğer siteleri ziyaret ederken Bootstrap CSS ve JS dosyalarını zaten aynı CDN’den indirmişse, yeniden yüklemek yerine tarayıcının önbelleğinden yükler ve bu da daha hızlı yükleme süresi sağlar.

3. Adım: Dosyayı Kaydetme ve Görüntüleme

Şimdi dosyayı masaüstünüzde “bootstrap-sablonu.html” olarak kaydedin.

Bu dosyayı bir web tarayıcısında açmak için üzerine gidin, ardından sağ tıklayın ve favori web tarayıcınızı seçin. Alternatif olarak, tarayıcınızı açıp bu dosyayı ona sürükleyebilirsiniz.

Not: .html uzantısının belirtilmesi önemlidir. Windows’daki not defteri gibi bazı metin editörleri otomatik olarak .txt olarak kaydeder.

Bootstrap Dosyalarını İndirme

Alternatif olarak, Bootstrap CSS ve JS dosyalarını da resmi web sitelerinden indirebilir ve projenize dahil edebilirsiniz. İndirilebilir iki derleme Bootstrap ve Bootstrap kaynak dosyaları vardır. Bootstrap 4 dosyalarını buradan indirebilirsiniz.

Derlenmiş indirme, daha hızlı ve daha kolay web geliştirme için derlenmiş ve küçültülmüş CSS ve JavaScript dosyaları içerir. Ancak derlenmiş sürüm, jQuery ve Popper.js gibi isteğe bağlı JavaScript bağımlılıklarını içermez. Oysa, kaynak indirme tüm CSS ve JavaScript için orijinal kaynak dosyaları ile birlikte belgelerin yerel bir kopyasını içerir.

Derlenmiş Bootstrap’i indirin ve açın. Şimdi, klasörlerin içine bakarsanız, derlenmiş ve küçültülmüş CSS ve JS dosyalarını (bootstrap. *) Ve derlenmiş ve küçültülmüş CSS ve JS’yi (bootstrap.min. *) içerdiğini göreceksiniz. bootstrap.min.css ve bootstrap.min.js dosyalarını kullanın.

CSS ve JS dosyalarının küçültülmüş sürümünü kullanmak, web sitenizin performansını iyileştirecek ve daha az HTTP isteği ve indirme boyutu nedeniyle değerli bant genişliğinden tasarruf sağlayacaktır.

İpucu: Bootstrap’ın JavaScript eklentilerinin jQuery’nin dahil edilmesini gerektirdiğini lütfen unutmayın. JQuery formunun en yeni sürümünü buradan indirebilirsiniz https://jquery.com/download. Ayrıca araç ipuçlarının çalışması için Bootstrap JS’sinden önce Popper.js kodunu da eklemeniz gerekir!

Kaynak: https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-get-started.php