YazılımBootstrap

Bootstrap Dersleri 2 – Başlıyoruz!

Rabia Yılmaz fotoğrafı Rabia YılmazGüncelleme 13 Ekim 2021
2 1.667
bootstrap dersleri
Bootstrap derslerimize hoş geldiniz…

Bootstrap Derslerimize Başlayalım

Teknotower çatısı altında ve adminimizin de teşvikiyle, Bootstrap dersleri adında güzel bir seriye başlangıç yaptık. Bootstrap dersleri serimizi, ben olmasam bile  devam ettirebilecek başarılı ekip arkadaşlarımız var. Verimli bir şekilde Bootstrap’i sizlere aktarmaya çalışacağız. Takıldığınız ,anlamadığınız  ve hata aldığınız yerlerde iletişime geçebilirsiniz. Tavsiyem takipte kalmanız…

bootstrap dersleri
Bootstrap

Bu Dersin İçeriği:

  • Çalışmalarımızı yapacağımız ortamın oluşturulması.
  • Kurulumdan sonra tarayıcımızdan sonuç almak için eklememiz gereken paket/paketler.
  • Tarayıcan sonuç almak için tarayıcımızı nasıl çalıştıracağız?
  • Projemize kütüphaneleri ekleme.
  • Karşılaşılabilecek hata/hatalar.

Şeklinde olacaktır. Bunları sizlere en uygun dille aktarmaya çalışacağız.

Kurulum

Bootstrap derslerimizde Atom editörünü kullanacağız. İndirmek için tıklayabilirsiniz.

atom.io
atom.io da karşılaşacağımız ekran kesiti.İndirmek için tıklayabilirsiniz.

Atomu indirdikten sonra, atom eklentisi ekleyeceğiz.

Atom-> file-> setting-> install dan atom-live-server’i  aratıp indiriyoruz.

atom live server paketi
Bu ekranda görünen paketi yükleyeceğiz. Sizlerde install seçeneği olcaktır.

Atom Live Server Nedir?

Yaptığımız değişiklikleri anında tarayıcımızda görebilmemizi sağalayacak bir atom paketidir.

Projemizi Nasıl Çalıştıracağız?

Derse başlamadan önce hazır halde bulunması gereken Bootstrap kütüphanesinin 4.1 sürümünü buradan indirelim. İndirdiğimiz .zip dosyasını klasöre çıkartalım ve çıkarttığımız klasör içerisinde index.html dosyası oluşturalım.

Örnek:

bootstrap-1

Oluşturduğumuz html dosyası içerisinde html yazıp tab tuşuna basalım. Html gerekli etiketlerin direkt olarak oluştuğunu göreceğiz. Aşağıdaki gibi.

Örnek:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    
  </body>
</html>

Çalıştırmak için yapmamız gereken aşağıdaki ekran görüntüsünde olduğu gibi, Packages’e basıp gelen listede atom-live-server ve ardından start server e basmak olacaktır. Bununla birlikte tarayıcınız açılacak ve kodunuzun ekran çıktısını alabileceksiniz. Ve her bir değişiklik için farenizi geçerli sayfayı yenile tuşuna götürmek yerine CTRL+R yapmanız yeterli olacaktır.

bootstrap dersleri 2 - başlıyoruz! 1 bootstrap dersleri

Birkaç değişiklik yapalım( lang=”tr”, title eklemek) ve bootstrap derslerimize devam edelim.

Örnek:

<!DOCTYPE html>
<?- Var sayılan dili türkçe yaptık... -->
<html lang="tr" dir="ltr">
  <head>
    <?-Tüm tükçe karekterelrin desteklendiği "utf-8"i ekledik... -->
    <meta charset="utf-8">
    <?-Sayfamızın tarayıcı kısmında görünecek ismi ayarladık... -->
    <title>Bootstrap</title>
  </head>
  <body>
    <?-Ekran çıktılarımız bu kısımda yazdığımız yazılar olacak... -->
    Merhaba Dünya!
  </body>
</html>
bootstrap kodumuzun ilk örneği
Ekran çıktısı.

Projemize Bootstrap 4’ü Dahil Etme

Bu iki şekilde gerçekleştirilebilir.

  1. Yerel olarak ekleme:

Proje sayfamıza eklememiz gereken kütüphaneler var. Bunlar:

  • Css
  • jQuery,
  • Popper,
  • Bootstrap ‘dir.
<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">

CSS için …

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

jQuery, popper ve bootsrap kütüphaneleri için…

2. Dosya olarak ekleme:

  • CSS ve bootstrap dosyaları indirmiş olduğunuz .zip dosyasında var.
  • jQuery dosyamızı indirmek için jQuery.com’ a gidiyoruz. Oradan indir seçeneğine tıklıyoruz.
jquery.com sitesi
jQuery sayfasında karşılaşacaımız ekran kesiti.

Yönleneceğimiz sayfada Download the compressed, production jQuery 3.4.1 linkine tıklayıp karşılaştığımız dokümanı CTRL+S ile bootstrap proje dosyamıza kaydediyoruz.

jquery.com sitesi
Görüntü bu şekilde olacaktır.

Direkt indirme sayfası için tıklayabilirsiniz.

  • Popper için de popper.js.org sitesinden indirme işlemimizi yapıyoruz.
popper.js.org sitesi
popper.js.org sitesinden bir kesit

Install seçeneğine tıklıyoruz ve popperin githup sayfasına yönleniyoruz. Installation başlığı altında, unpkg linkine tıklayıp karşımıza gelen sayfası bootstrap dosyamızın içerisine kaydediyoruz.

https://github.com/fezvrasta/popper.js#installation sitesi
Popperin githup sayfasından.

Direkt kaydetme linki için tıklayabilirsiniz.

Böylelikle kütüphanelerimizi dosyamızda da tanımlamış olduk.

bootstrap dersleri 2 - başlıyoruz! 2 bootstrap dersleri
Proje dosyamız böyle olacaktır. Sol taraf dosya olarak eklenmiş kütüphaneyi içerirken sağ taraf yerel olarak eklenmiş kütüphaneleri içermektedir.

Bootstrap deslerimiz için önemli bilgilendirme:

Bootstrap kütüphanesini dahil etmeden önce ilk olarak jQuery kütüphanemizi çağırmak zorundayız. Neden? Bootstrap; CSS, HTML ve JS ile çalıştığı için bir alt eleman olarak kabul edilebilir. Bunun için jQuery önceliklidir. Aksi taktirde, Bootstrap kütüphanesini tanımayacaktır. Ve hata ile karşılaşırız.(jQuery, JS frameworklerinden biridir.)

NOT: Bu kütüphaneleri tek tek kopyalayıp yapıştırmak yerine, Bootstrap sitesine giriş yapıyoruz. Get strated düğmesine basıyoruz. “Starter template“ başlığı altında var olan hazır kodu kopyalayıp proje dosyamıza yapıştırarak dersimize devam ediyoruz. Bahsettiğim kodu buraya da ekliyorum. Ya da dosya şeklinde ekleyip tüm projelerimize ekleyebiliriz.

<!doctype html>
<html lang="tr">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <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">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then 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>

Kısa Bilgilendirme:

  • utf-8 nedir? : Unicode Transformation Format kavramının kısaltılmış halidir. Ve utf-8′ karakter kodlaması olarak kabul edebiliriz.
  • Viewport : Boyutlandırma ve ölçeklendirmede kullanılır.
  • Width=device-width nedir? : Web sayfası genişliğini sitenin açıldığı ekrana eşitler.
  • Initial-scale=1 nedir? : Yakınlaştırma derecesinin “1” olarak ayarlar.
  • Shrink-to-fit=no nedir? : Ekrana sığdırmak için yakınlaştırma ya da küçültmek yapılmasını sağlar.

Bootstrap Derslerimiz İçin Live Server Çalışmıyorsa

Atom Live Server Hatası: Proje açtığınız halde “Proje açınız” hatası alıyorsanız yapmanız gereken, projenizin olduğu dosyayı atom editörü ile açmak olacaktır.

Peki ya nasıl? Dosyayı birlikte aç kısmında atom editörü yok? Nasıl yapacağım?

Windows kullanıyorsanız: cmd ekranından proje klasörünüze girip, bulunduğunuz klasörü atomda açmanız gerekecektir.

Linux ya da Mac kullanıyorsanız: Dosyanızın üzerine gelip sağ tıklayarak atom editöründe açabilirsiniz. Ya da Terminal ekranında proje klasörünüzü atom ile açmanız gerekecektir.

Bir sonraki dersimizde Grid sistemi ile karşınızda olacağız.

Telegram’ da TEKNOTOWER yazılarımı takip etmek ve bildirimleri almak için tıklayınız…

Ders içerik yazımızı okuduğunuz için teşekkürler…Ders içerik beklentilerinizi ve yorumlarınızı bekliyoruz. İyi dersler, iyi çalışmalar…

Rabia Yılmaz fotoğrafı Rabia YılmazGüncelleme 13 Ekim 2021
2 1.667
Rabia Yılmaz fotoğrafı

Rabia Yılmaz

Yorum

2 Yorum

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir


Başa dön tuşu