Bootstrap Nedir

Merhaba arkadaşlar. Ben Uygar. Bu yazımda Bootstrap’dan bahsedeceğim.

Bootstrap Nedir

Eğer web geliştirme ile biraz ilgilendiyseniz Bootstrap terimini duymuşsunuzdur. Bootstrap’ın resmi sitesinde yazanlara göre Bootstrap, mobil öncelikli, duyarlı (ekran boyutu olarak),  en popüler HTML, CSS ve JS iskeletidir (framework). Harika geliyor! Şimdi onu nasıl kullanacağız?

Bootstrap’ın “Getting Started” sayfası, size onu nasıl kullanabileceğiniz hakkında detaylı açıklamayı yapıyor. Öncelikle Bootstrap’ın Getting Started sayfasına buradan bakalım.

Öncelikle Bootstrap’ı indirmeliyiz. Bir web sitesi tasarlarken kullanabileceğimiz iki yöntem var. Bootstrap dosyalarını kendi sunucumuzda barındırmak veya Bootstrap CDN’ini kullanmak. Ben dosyaları indirmenizi tavsiye ederim. Çünkü basit bir örnek vermem gerekirse siteyi çevrimdışı olarak test etmek istediğinizde dosyaları yerel bilgisayarınızdan okuyabilirsiniz. Ancak çevrimdışı bir ortamda CDN yöntemi çalışmayacaktır.

Son sürüm Bootstrap’ı indirdikten sonra onu bir klasöre (örn: Masaüstüne bir klasör açın ve oraya çıkarın) çıkarın. Şimdi çıkardığınız dosyaların görevlerini anlatacağım.

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Klasörlerimiz bu şekilde. Bunlardan js ve css klasörlerini kullanacağız. css klasörünün içerisinde ise bootstrap.css ve bootstrap.min.css gibi dosyalar var. Bu dosyaların hepsini zamanla açıklayacağım ancak şimdilik bu ikisi yeterli olacaktır 🙂

bootstrap.css, Bootstrap’ın ana CSS frameworküdür. bootstrap.min.css ise onun  en minimum halidir diyebiliriz. Minimum halini kullanmamız sayfamızın yüklenme hızı açısından avantajlı olacaktır.

Şimdi ilk örneğimize geçelim. Bu örnekte html belgemize Bootstrap’ı dahil edip geleneğe uyarak ekrana “Hello, world!” yazacağız 🙂

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap Hello World!</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Bu örneği çalıştırdığımızda aşağıdaki gibi bir sayfa bizi bekliyor olacak:

Bootstrap Örneği.
Bootstrap Örneği.

Şimdi üstteki kodu açıklayalım. Bu yazıda sadece Bootstrap ile alakalı olan satırları açıklayacağım. HTML ile olan yazılarımızı okuyabilirsiniz 🙂

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

Bu satır, sayfanın ekran boyutlarına göre otomatik olarak değişmesini sağlıyor.

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

Bu satır ise Bootstrap’ı indirdiğimiz dosyalardan dahil ediyor.

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Bu satırlar, tarayıcı uyumluluğu için var.

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Jquery’yi yüklüyor. Jquery, Bootstrap’ın JS frameworkü için gereklidir.

<script src="js/bootstrap.min.js"></script>

Bu satırda ise Bootstrap JS frameworkünü yükledik.

Bu yazımız da buraya kadar arkadaşlar. Sorularınızı yorum aracılığı ile sormaktan lütfen çekinmeyin 🙂 Bir sonraki yazımda görüşmek üzere, hoşça kalın…

 

HTML’e Giriş

HTML’e Giriş

Merhaba arkadaşlar ben Yağız. Bugün Web tasarım dersimizin ilk dersine başlayacağız. Öncelikle Web tasarım nedir veya ne işe yarar? Web tasarım adı üstünüde bir Web sitesini tasarlamak ve görünüm kazandırmaktır. Biz ilk olarak HTML5 ile başlayacağız, HTML5 son sürümdür ve diğerlerine göre daha basittir. HTML sitemizin iskeletini oluşturur daha sonra bu iskelete güç kazandıracağız. Bazı yazılımcılar HTML’i dil olarak görmez çünkü bir programlama diline nazaran daha basittir. Bunun sebebi ise HTML’in etiketlerden oluşmasıdır. Mesela yazıyı ortaya kaydırmak için bir etiket yazıyı büyütmek için başka bir etiket kullanılır. HTML biraz ezbere dayanır ama biz elimizden geldiğince mantığını öğreneceğiz. Hazırsanız başlayalım şimdi ilk olarak Notepad++’ı indirmemiz gerek Notepad’i kullanmamızın sebebi ise bu program ile mantığı çok daha iyi kavrayacağız.Visual Studio gibi programlar hataları örter bizim hataları görüp öğrenmemiz gerek. Tarayıcımıza Notepad++’ı aratıp 6.9.2 versiyonunu seçiyoruz ve indiriyoruz.Sonra aşağıdaki seçenekleri mutlaka işaretliyoruz.

npinstall1

 

npinstall2

Şimdi biraz dosyalama mantığından bahsedelim. HTML diye bir belge açalım içine 1. ders diye ayrı bir belge açalım sonra notepad’e gelip yukarıda kodlama bölümünden utf-8 olarak kodla diyoruz bunu sebebi Türkçe kelimelerin Web’te gözükmesi. Ardından dosya bölümünde html>1. ders klasörünün içine index.html olarak yazmamız bu şekilde kaydetmemiz çok önemli bunun sebebi çalışmalarımızın nasıl gözükeceğini internetten görebileceğiz.Şimdi

kaydettiğimiz index.html dosyasını chrome olarak açalım karşınıza boş bir sayfa açılacak. Şuan kod yazmadığımız için boş. Son olarak html yapısından bahsedelim ve bitirelim. Şimdi sizde Notepad’inize burada yazdığım kodu yazın.

npinstall3

Şimdi buradaki kodlardan bahsedelim yazdığımız her etiketin bir kapaması olur bunu / işaretini kullanırsak yapabiliriz.Baştaki <!doctype html> etiketi bu etiketin özelliği yazdığımız kodun HTML5 olduğunu söylemek içindir. Ardından direk <html> etiketi gelir bu etiketi açar açmaz hemen kapatınız çünkü ileride uzun kodlar yazacağımız zaman kapatmayı unutabiliriz. Bu etiketin ardında head body gelir. Head zaten anlamıyla baş kısmı yani sekmenin üstünde yazacağımız yerdir biz genelde bütün etiketlerimiz body kısmına yazacağız.Önemli bir unsur ise yine bu etiketleri açtığınız gibi kapatmanızdır. Şu anlık bu kadar konu ile sınırlı kalalım. Yazımızın herkese yayılması için paylaşmayı unutmayın!