Bootstrap Mobil Uyumlu Düzen

Bu makalede, Bootstrap frameworkuyla mobil uyumlu (responsive) web sitelerinin nasıl oluşturulacağını öğreneceksiniz.

Mobil Uyumlu Web Tasarım Nedir?

Farklı cihazlar için optimize ederek kullanıcıya daha iyi erişilebilirlik ve optimum görüntüleme deneyimi sağlamak için web siteleri tasarlama ve oluşturma işlemidir.

Akıllı telefonlar ve tabletlerin artan trendiyle, mobil cihazlar için sitelerin optimizasyonunu göz ardı etmek neredeyse kaçınılmaz hale geldi. Daha az çabayla çok çeşitli cihazları hedeflemenin tercih edilen bir alternatifi ve etkili bir yoludur.

Mobil uyumlu düzenler; ister masaüstü, ister dizüstü bilgisayar, tablet veya cep telefonu olsun herhangi bir aygıtın ekran boyutuna göre otomatik olarak ayarlanır ve uyarlanır. Aşağıdaki resme bakın.

Bootstrap Mobil Uyumlu Tasarım Örneği

Bootstrap ile Mobil Uyumlu Düzen Oluşturma

Bootstrap 4 ile güçlü mobil flexbox grid sistemi ile duyarlı ve mobil uyumlu web siteleri ve uygulamalar oluşturmak çok daha kolay hale geldi.

Bootstrap 4, en başından itibaren duyarlı ve mobil uyumludur. Beş aşamalı grid sınıfı; cep telefonları, tabletler, dizüstü bilgisayarlar ve masaüstü bilgisayarlar, büyük ekranlı cihazlar ve benzeri gibi farklı cihaz türlerinde nasıl oluşturulacağının düzeni üzerinde daha iyi bir kontrol sağlar.

Aşağıdaki örnek, ekstra büyük cihazlarda 4 sütun düzeni (viewport ≥ 1200px) ve büyük cihazlarda 3 sütun düzeni (992px ≤ görünüm alanı <1200px) olarak duyarlı bir düzen oluşturacaktır. Orta ölçekli cihazlarda 2 sütun düzeni (768px viewport < 992px), küçük ve çok küçük aygıtlarda 1 sütun düzeni (viewport <768px). Bunun nasıl çalıştığını görelim:

<!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>Bootstrap 4 Örnek Sabit Düzen</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</head>
<body>
	<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
		<div class="container-fluid">
			<a href="#" class="navbar-brand mr-3">Teknoreel</a>
			<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarCollapse">
				<div class="navbar-nav">
					<a href="#" class="nav-item nav-link active">Anasayfa</a>
					<a href="#" class="nav-item nav-link">Hizmetler</a>
					<a href="#" class="nav-item nav-link">Hakkında</a>
					<a href="#" class="nav-item nav-link">İletişim</a>
				</div>
				<div class="navbar-nav ml-auto">
					<a href="#" class="nav-item nav-link">Kaydol</a>
					<a href="#" class="nav-item nav-link">Giriş Yap</a>
				</div>
			</div>
		</div>    
	</nav>
	<div class="container">
		<div class="jumbotron">
			<h1>Web Sitesi Oluşturmayı Öğrenin</h1>
			<p class="lead">Günümüz dünyasında internet insanlarla bağlantı kurmanın en popüler yoludur. <a href="https://www.teknoreel.com" target="_blank"> teknoreel.com </a> adresinde, temel web geliştirme teknolojilerini gerçek hayattaki uygulama örnekleri ile birlikte öğreneceksiniz. Dünyadaki insanlarla bağlantı kurmak için kendi web sitenizi yapın.</p>
			<p><a href="https://www.teknoreel.com" target="_blank" class="btn btn-success btn-lg">Öğrenmeye Başla</a></p>
		</div>
		<div class="row">
			<div class="col-md-6 col-lg-4 col-xl-3">
				<h2>HTML</h2>
				<p>HTML, web sayfalarının yapısını tanımlayan standart biçimlendirme dilidir. HTML makalelerimiz, en son HTML5 dilinin temellerini anlamanıza yardımcı olacaktır, böylece kendi web sayfalarınızı veya web sitenizi oluşturabilirsiniz.</p>
				<p><a href="https://www.teknoreel.com" target="_blank" class="btn btn-success">Daha Fazla Bilgi »</a></p>
			</div>
			<div class="col-md-6 col-lg-4 col-xl-3">
				<h2>CSS</h2>
				<p>CSS, web sayfalarının sunumunu tanımlamak için kullanılır. CSS çok zaman ve emek kazandırabilir. CSS eğitimlerimiz, web sitenizin stilini ve düzenini kontrol edebilmeniz için en son CSS3'ün temellerini öğrenmenize yardımcı olacaktır.</p>
				<p><a href="https://www.teknoreel.com" target="_blank" class="btn btn-success">Daha Fazla Bilgi »</a></p>
			</div>
			<div class="col-md-6 col-lg-4 col-xl-3">
				<h2>Bootstrap</h2>
				<p>Bootstrap, daha hızlı ve daha kolay web geliştirme için güçlü bir front-end frameworkudur. Bootstrap makalelerimiz, en yeni Bootstrap 4 frameworkunun tüm özelliklerini öğrenmenize yardımcı olur, böylece duyarlı web sitelerini kolayca oluşturabilirsiniz.</p>
				<p><a href="https://www.teknoreel.com/category/bootstrap-4-x" target="_blank" class="btn btn-success">Daha Fazla Bilgi »</a></p>
			</div>
		</div>
		<hr>
		<footer>
			<div class="row">
				<div class="col-md-6">
					<p>Copyright © 2019 Teknoreel</p>
				</div>
				<div class="col-md-6 text-md-right">
					<a href="#" class="text-dark">Kullanım Şartları</a> 
					<span class="text-muted mx-2">|</span> 
					<a href="#" class="text-dark">Gizlilik Politikası</a>
				</div>
			</div>
		</footer>
	</div>
</body>
</html>

İpucu: Bu örneğin çıktısını yeni boş pencerede açın (CodeLab düzenleyicideki yeni pencere bağlantısını tıklayın) ve ekranı yeniden boyutlandırın. Görünüm genişliğini geçerken ya da belirli bir sınıra yaklaşırken (yani sınır değerlere) yaklaşırken içerik kutularının yönünün değiştiğini göreceksiniz.

Kaynak: https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-responsive-layout.php

Bootstrap Değişken Düzen

Bu makalede Bootstrap ile değişken düzenler (fluid layouts) oluşturmayı öğreneceksiniz.

Bootstrap ile Değişken Düzen Oluşturma

Bootstrap’da, tüm aygıt boyutlarında (ekstra küçük, küçük, orta, büyük ve ekstra büyük) görünüm çerçevesinin %100 genişliğini kullanmak için değişken düzenler oluşturmak için .container-fluid sınıfını kullanabilirsiniz.

.container-fluid sınıfı yalnızca genişliği uygular. Farklı görünüm boyutları için farklı genişlik yerine genişliği %100 olarak ayarlar. Ancak, düzeni değiştirmek için grid sınıflarını her zamanki gibi kullanabilirsiniz. Grid sınıfları hakkında daha fazla bilgi edinmek için Bootstrap grid sistemi hakkındaki makaleye bakın.

Aşağıdaki örnek, ekranın %100 genişliğini kapsayan bir değişken düzeni oluşturacaktır.

<!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>Bootstrap 4 Örnek Sabit Düzen</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</head>
<body>
	<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
		<div class="container-fluid">
			<a href="#" class="navbar-brand mr-3">Teknoreel</a>
			<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarCollapse">
				<div class="navbar-nav">
					<a href="#" class="nav-item nav-link active">Anasayfa</a>
					<a href="#" class="nav-item nav-link">Hizmetler</a>
					<a href="#" class="nav-item nav-link">Hakkında</a>
					<a href="#" class="nav-item nav-link">İletişim</a>
				</div>
				<div class="navbar-nav ml-auto">
					<a href="#" class="nav-item nav-link">Kaydol</a>
					<a href="#" class="nav-item nav-link">Giriş Yap</a>
				</div>
			</div>
		</div>    
	</nav>
	<div class="container-fluid">
		<div class="jumbotron">
			<h1>Web Sitesi Oluşturmayı Öğrenin</h1>
			<p class="lead">Günümüz dünyasında internet insanlarla bağlantı kurmanın en popüler yoludur. <a href="https://www.teknoreel.com" target="_blank"> teknoreel.com </a> adresinde, temel web geliştirme teknolojilerini gerçek hayattaki uygulama örnekleri ile birlikte öğreneceksiniz. Dünyadaki insanlarla bağlantı kurmak için kendi web sitenizi yapın.</p>
			<p><a href="https://www.teknoreel.com" target="_blank" class="btn btn-success btn-lg">Öğrenmeye Başla</a></p>
		</div>
		<div class="row">
			<div class="col-md-4">
				<h2>HTML</h2>
				<p>HTML, web sayfalarının yapısını tanımlayan standart biçimlendirme dilidir. HTML makalelerimiz, en son HTML5 dilinin temellerini anlamanıza yardımcı olacaktır, böylece kendi web sayfalarınızı veya web sitenizi oluşturabilirsiniz.</p>
				<p><a href="https://www.teknoreel.com" target="_blank" class="btn btn-success">Daha Fazla Bilgi »</a></p>
			</div>
			<div class="col-md-4">
				<h2>CSS</h2>
				<p>CSS, web sayfalarının sunumunu tanımlamak için kullanılır. CSS çok zaman ve emek kazandırabilir. CSS eğitimlerimiz, web sitenizin stilini ve düzenini kontrol edebilmeniz için en son CSS3'ün temellerini öğrenmenize yardımcı olacaktır.</p>
				<p><a href="https://www.teknoreel.com" target="_blank" class="btn btn-success">Daha Fazla Bilgi »</a></p>
			</div>
			<div class="col-md-4">
				<h2>Bootstrap</h2>
				<p>Bootstrap, daha hızlı ve daha kolay web geliştirme için güçlü bir front-end frameworkudur. Bootstrap makalelerimiz, en yeni Bootstrap 4 frameworkunun tüm özelliklerini öğrenmenize yardımcı olur, böylece duyarlı web sitelerini kolayca oluşturabilirsiniz.</p>
				<p><a href="https://www.teknoreel.com/category/bootstrap-4-x" target="_blank" class="btn btn-success">Daha Fazla Bilgi »</a></p>
			</div>
		</div>
		<hr>
		<footer>
			<div class="row">
				<div class="col-md-6">
					<p>Copyright © 2019 Teknoreel</p>
				</div>
				<div class="col-md-6 text-md-right">
					<a href="#" class="text-dark">Kullanım Şartları</a> 
					<span class="text-muted mx-2">|</span> 
					<a href="#" class="text-dark">Gizlilik Politikası</a>
				</div>
			</div>
		</footer>
	</div>
</body>
</html>

Yukarıdaki örneğin çıktısı şunun gibi görünecektir:

Bootstrap 4 Örnek Değişken Düzen

Kaynak: https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-fluid-layout.php

Bootstrap Sabit Düzen

Bu makalede Bootstrap ile sabit düzenler (fixed layouts) oluşturmayı öğreneceksiniz.

Bootstrap ile Sabit Düzen Oluşturma

Bootstrap 4 ile sabit sayıda piksele dayalı web sayfası düzenleri oluşturabilirsiniz, ancak container genişliği görünümün genişliğine bağlı olarak değişir ve düzen de ona göre şekillenir.

Sabit ancak duyarlı düzen oluşturma süreci temelde .container sınıfıyla başlar. Bundan sonra, yatay sütun gruplarını sarmak için .row sınıfıyla satır oluşturabilirsiniz. Satırlar uygun hizalama ve doldurma için bir .container içine yerleştirilmelidir.

.col-*, .col-sm-*, .col-md-*, .col-lg-* ve .col-xl-* gibi önceden tanımlanmış grid sınıfları kullanılarak bir satır içinde başka sütunlar oluşturulabilir. Ancak bu sütunlar 1’den 12’ye kadar olmalıdır. Lütfen grid sınıfları hakkında daha fazla bilgi edinmek için Bootstrap grid sistemi makalesini inceleyin.

Not: Metin, resimler, videolar, tablolar vb. gibi gerçek içerikler sütunların içine yerleştirilmelidir ve sütunlar yalnızca satırların alt öğeleri olabilir.

Aşağıdaki örnek, tabletler 768px‘e eşit veya daha büyük ekran genişliğine sahip orta aygıtlarda 720px piksel genişliğinde sabit genişliğe duyarlı bir düzen oluştururken, küçük dizüstü bilgisayarlar gibi 992px‘e eşit veya daha büyük ekran genişliğine sahip büyük aygıtlarda 960px genişliğinde ve 1140px ekran genişliğine sahip veya 1200px benzeri masaüstüne eşit genişlikte ekstra büyük cihazlarda geniş düzen oluşturur.

Bununla birlikte, cihazın görünüm genişliği 768 pikselden küçük ancak 576 pikselden büyük veya ona eşitse, düzen 540 piksel genişliğinde olur. 576px‘ten daha küçük olan görünüm genişliği için düzen %100 genişliği kapsayacaktır. Ayrıca, sütunlar dikey olarak yığılacaktır. Her iki durumda da navbar daraltılır.

<!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>Bootstrap 4 Örnek Sabit Düzen</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</head>
<body>
	<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
		<div class="container">
			<a href="#" class="navbar-brand mr-3">Teknoreel</a>
			<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarCollapse">
				<div class="navbar-nav">
					<a href="#" class="nav-item nav-link active">Anasayfa</a>
					<a href="#" class="nav-item nav-link">Hizmetler</a>
					<a href="#" class="nav-item nav-link">Hakkında</a>
					<a href="#" class="nav-item nav-link">İletişim</a>
				</div>
				<div class="navbar-nav ml-auto">
					<a href="#" class="nav-item nav-link">Kaydol</a>
					<a href="#" class="nav-item nav-link">Giriş Yap</a>
				</div>
			</div>
		</div>    
	</nav>
	<div class="container">
		<div class="jumbotron">
			<h1>Web Sitesi Oluşturmayı Öğrenin</h1>
			<p class="lead">Günümüz dünyasında internet insanlarla bağlantı kurmanın en popüler yoludur. <a href="https://www.teknoreel.com" target="_blank"> teknoreel.com </a> adresinde, temel web geliştirme teknolojilerini gerçek hayattaki uygulama örnekleri ile birlikte öğreneceksiniz. Dünyadaki insanlarla bağlantı kurmak için kendi web sitenizi yapın.</p>
			<p><a href="https://www.teknoreel.com" target="_blank" class="btn btn-success btn-lg">Öğrenmeye Başla</a></p>
		</div>
		<div class="row">
			<div class="col-md-4">
				<h2>HTML</h2>
				<p>HTML, web sayfalarının yapısını tanımlayan standart biçimlendirme dilidir. HTML makalelerimiz, en son HTML5 dilinin temellerini anlamanıza yardımcı olacaktır, böylece kendi web sayfalarınızı veya web sitenizi oluşturabilirsiniz.</p>
				<p><a href="https://www.teknoreel.com" target="_blank" class="btn btn-success">Daha Fazla Bilgi »</a></p>
			</div>
			<div class="col-md-4">
				<h2>CSS</h2>
				<p>CSS, web sayfalarının sunumunu tanımlamak için kullanılır. CSS çok zaman ve emek kazandırabilir. CSS eğitimlerimiz, web sitenizin stilini ve düzenini kontrol edebilmeniz için en son CSS3'ün temellerini öğrenmenize yardımcı olacaktır.</p>
				<p><a href="https://www.teknoreel.com" target="_blank" class="btn btn-success">Daha Fazla Bilgi »</a></p>
			</div>
			<div class="col-md-4">
				<h2>Bootstrap</h2>
				<p>Bootstrap, daha hızlı ve daha kolay web geliştirme için güçlü bir front-end frameworkudur. Bootstrap makalelerimiz, en yeni Bootstrap 4 frameworkunun tüm özelliklerini öğrenmenize yardımcı olur, böylece duyarlı web sitelerini kolayca oluşturabilirsiniz.</p>
				<p><a href="https://www.teknoreel.com/category/bootstrap-4-x" target="_blank" class="btn btn-success">Daha Fazla Bilgi »</a></p>
			</div>
		</div>
		<hr>
		<footer>
			<div class="row">
				<div class="col-md-6">
					<p>Copyright © 2019 Teknoreel</p>
				</div>
				<div class="col-md-6 text-md-right">
					<a href="#" class="text-dark">Kullanım Şartları</a> 
					<span class="text-muted mx-2">|</span> 
					<a href="#" class="text-dark">Gizlilik Politikası</a>
				</div>
			</div>
		</footer>
	</div>
</body>
</html>

Yukarıdaki örneğin çıktısı şunun gibi görünecektir:

Bootstrap 4 Örnek Sabit Düzen

Öğeler arasındaki boşluğu ayarlamak için .mb-3, .ml-auto, mx-2 vb. gibi kenar yardımcı sınıflarını kullandım. Oysa .text-dark, .text-muted, .text-md-right sınıfları, metnin rengini ve hizalamasını ayarlamak için kullanılan metin sınıflarıdır. Daha sonraki makalelerde onlar hakkında bilgi edineceksiniz.

Kaynak: https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-fixed-layout.php

Bootstrap Grid Sistemi

Bootstrap grid (ızgara) sistemi, duyarlı web sayfası düzeni oluşturmanın en hızlı ve en kolay yoludur.

Bootstrap Grid Sistemi Nedir?

Bootstrap grid sistemi, duyarlı web sitesi düzenleri oluşturmanın hızlı ve kolay bir yolunu sağlar. En yeni Bootstrap 4 sürümü, cihaz veya görünüm alanı boyutu arttıkça 12 sütuna kadar uygun şekilde ölçeklenen yeni ilk-mobil flexbox grid sistemini sunar.

Bootstrap 4, cep telefonları, tabletler, dizüstü bilgisayarlar ve masaüstü bilgisayarlar gibi farklı tür aygıtlar için hızlıca grid düzenleri oluşturmak için önceden tanımlanmış grid sınıfları içerir. Örneğin, ekstra küçük cihazlar için cep telefonları için grid sütunları oluşturmak için .col-* sınıflarını kullanabilirsiniz. Portrait (Portre) modunda, benzer şekilde yatay modda cep telefonu gibi küçük ekranlı cihazlar için grid sütunları oluşturmak için .col-sm-* sınıflarını, tabletler gibi orta ekranlı cihazlar için .col-md-* sınıflarını kullanabilirsiniz. Masaüstü bilgisayarlar gibi büyük cihazlar için lg-* sınıfları ve ekstra büyük masaüstü ekranları için .col-xl-* sınıfları kullanılır

Aşağıdaki tabloda yeni grid sisteminin bazı temel özelliklerini özetlemektedir.

Özellikler
Bootstrap 4 Grid Sistemi
Çok küçük
<576px
Küçük
≥576px
Orta
≥768px
Büyük
≥992px
Çok büyük
≥1200px
Maks. container uzunluğuYok (otomatik)540px720px960px1140px
İdeal platformMobil (Portrait)Mobil (Landscape)TabletlerLaptoplarLaptoplar & Masaüstü Bilgisayarlar
Sınıf öneki.col-.col-sm-.col-md-.col-lg-.col-xl-
Sütun sayısı1212121212
Gutter genişliği30 piksel (bir sütunun her iki tarafında 15 piksel)30 piksel 30 piksel 30 piksel30 piksel
NestableEvetEvetEvetEvetEvet
Sütun sırasıEvetEvetEvetEvetEvet

Yukarıdaki tabloda, bir öğeye herhangi bir .col-sm-* sınıfının uygulanması, yalnızca küçük aygıtlarda ki stilini etkilemeyecek, aynı zamanda, ekran genişliğinin 540 piksele eşit veya daha büyük olması durumunda orta, büyük ve ekstra büyük aygıtlarda da etkilenecektir. Benzer şekilde, .col-md-* sınıfı yalnızca orta aygıtlarda ki öğelerin stillendirmesini değil, aynı zamanda bir .col-lg-* veya .col-xl-* sınıfı yoksa, büyük ve ekstra büyük aygıtlarda da stillendirmeyi etkiler.

Asıl soru, bu 12 sütuna duyarlı grid sistemini kullanarak satırların ve sütunların nasıl oluşturulacağını ortaya koyuyor. Cevap oldukça basit, ilk önce .container sınıfını kullanarak satırlarınız ve sütunlarınız için sarmalayıcı görevi gören bir kapsayıcı oluşturun, bundan sonra .row sınıfını kullanarak kap içinde satırlar oluşturun ve kullanabileceğiniz herhangi bir satırın içinde sütunlar oluşturun (.col-*, .col-sm-*, .col-md-*, .col-lg-* ve .col-xl-*). Sütunlar, içeriğimizi yerleştireceğimiz gerçek içerik alanıdır. Bütün bunları gerçek eyleme koyalım. Gerçekten nasıl çalıştığını görelim:

İki Sütun Düzeni Oluşturma

Aşağıdaki örnek; masalar, dizüstü bilgisayarlar ve masaüstü bilgisayarlar gibi orta, büyük ve ekstra büyük cihazlar için iki sütun düzeninin nasıl oluşturulacağını göstermektedir. Ancak, cep telefonlarında (768 pikselden daha küçük ekran genişliği), sütunlar otomatik olarak yatay hale gelecektir.

<div class="container">
    <!-- İki eşit sütunu olan satır -->
    <div class="row">
        <div class="col-md-6">Sol sütun</div>
        <div class="col-md-6">Sağ sütun</div>
    </div>
    
    <!-- 1:2 oranına bölünmüş iki sütunlu satır -->
    <div class="row">
        <div class="col-md-4">Sol sütun</div>
        <div class="col-md-8">Sağ sütun</div>
    </div>
    
    <!-- 1:3 oranına bölünmüş iki sütunlu satır -->
    <div class="row">
        <div class="col-md-3">Sol sütun</div>
        <div class="col-md-9">Sağ sütun</div>
    </div>
</div>

Not: Bir grid düzeninde, içerik sütunların içine yerleştirilmelidir (.col ve .col-*) ve yalnızca sütunlar satırların (.row) hemen alt öğeleri olabilir. Sıralar uygun dolgu ve hizalama için bir .container (sabit genişlik) veya .container akışkan (tam genişlik) içine yerleştirilmelidir.

İpucu: Grid sütun genişlikleri yüzde olarak ayarlanır, bu nedenle her zaman üst öğelerine göre akışkan olarak boyutlandırılırlar. Ek olarak her sütun, ayrı sütunlar arasındaki boşluğu kontrol etmek için yatay bir dolguya (oyuk adı verilir) sahiptir.

Bootstrap grid sistemi 12 sütuna dayandığından, sütunları tek bir satırda (yani yan yana) tutmak için, tek bir satırdaki grid sütun numaralarının toplamı 12’den büyük olmamalıdır. Yukarıdaki örnek kod dikkatlice her satır için on iki (6 + 6, 4 + 8 ve 3 + 9) eklenmiş grid sütunlarının sayısını (örn. col-md-*) bulacaksınız.

Üç Sütun Düzeni Oluşturma

Benzer şekilde, yukarıdaki prensibi temel alarak başka düzenler oluşturabilirsiniz. Örneğin, aşağıdaki örnek dizüstü bilgisayarlar ve masaüstü ekranları için genellikle üç sütun düzeni oluşturacaktır. Ekran çözünürlüğü 992 piksele (örneğin, Apple iPad) eşit veya daha fazla ise, yatay modda tabletlerde de çalışır. Bununla birlikte, portrait modunda grid sütunları her zamanki gibi yatay olacaktır.

<div class="container">
    <!-- Üç eşit sütunlu satır -->
    <div class="row">
        <div class="col-lg-4">Sol sütun</div>
        <div class="col-lg-4">Orta sütun</div>
        <div class="col-lg-4">Sağ sütun</div>
    </div>
    
    <!-- 1:4:1 oranına bölünmüş üç sütunlu satır -->
    <div class="row">
        <div class="col-lg-2">Sol sütun</div>
        <div class="col-lg-8">Orta sütun</div>
        <div class="col-lg-2">Sağ sütun</div>
    </div>
    
    <!-- Eşit olmayan üç sütunlu satır -->
    <div class="row">
        <div class="col-lg-3">Sol sütun</div>
        <div class="col-lg-7">Orta sütun</div>
        <div class="col-lg-2">Sağ sütun</div>
    </div>
</div>

Not: Tek bir satıra 12’den fazla grid sütunu yerleştirilirse, bir bütün olarak her bir ekstra sütun grubu yeni bir satıra sarılır.

Bootstrap Otomatik Düzen Sütunları

Herhangi bir sütun numarası belirtmeden, .col sınıfını basitleştirerek tüm aygıtlar için eşit genişlikte sütunlar (çok küçük, küçük, orta, büyük ve çok büyük) oluşturabilirsiniz.

Tam olarak nasıl çalıştığını anlamak için aşağıdaki örneği deneyelim:

<div class="container">
    <!-- İki eşit sütunu olan satır -->
    <div class="row">
        <div class="col">Birinci sütun</div>
        <div class="col">İkinci sütun</div>
    </div>
    
    <!-- Üç eşit sütunlu satır -->
    <div class="row">
        <div class="col">Birinci sütun</div>
        <div class="col">İkinci sütun</div>
        <div class="col">Üçüncü sütun</div>
    </div>
</div>

Ek olarak, bir sütunun genişliğini de ayarlayabilir ve kardeş sütunları etrafında eşit olarak otomatik olarak yeniden boyutlandırılmasını sağlayabilirsiniz. Önceden tanımlanmış grid sınıflarını veya satır içi genişlikleri kullanabilirsiniz.

Aşağıdaki örneği denerseniz, .col sınıfının eşit genişliğe sahip üst üste sütunlarını bulacaksınız.

<div class="container">
    <!-- İki eşit sütunu olan satır -->
    <div class="row">
        <div class="col">Birinci sütun</div>
        <div class="col">İkinci sütun</div>
    </div>
    
    <!-- 1:2:1 oranına bölünmüş üç sütunlu satır -->
    <div class="row">
        <div class="col">Birinci sütun</div>
        <div class="col-sm-6">İkinci sütun</div>
        <div class="col">Üçüncü sütun</div>
    </div>
</div>

Kolon Sarma Davranışı (Column Wrapping Behavior)

Şimdi, görünümün boyutuna göre sütun yönünü değiştiren daha esnek düzenler oluşturacağız. Aşağıdaki örnek, dizüstü bilgisayarlar ve masaüstü bilgisayarlar gibi büyük cihazlarda ve yatay modda tabletlerde (örneğin Apple iPad), ancak portrait modunda tabletler gibi orta cihazlarda (768px ekran genişliği <992px) üç sütun düzeni oluşturacaktır. Üçüncü sütunun ilk iki sütunun dibinde hareket ettiği iki sütun düzenine dönüşecektir.

<div class="container">
    <div class="row">
        <div class="col-md-4 col-lg-3">İlk sütun</div>
        <div class="col-md-8 col-lg-6">İkinci sütun</div>
        <div class="col-md-12 col-lg-3">Üçüncü sütun</div>
    </div>
</div>

Yukarıdaki örnekte görebileceğiniz gibi orta grid sütun sayılarının toplamı (yani col-md-*) 3 + 9 + 12 = 24 > 12, dolayısıyla .col-md- sınıfına sahip üçüncü öğesidir. Bir .row‘da maksimum 12 sütunun ötesine ekstra sütunlar ekleyen 12, orta ekranlı cihazlarda bitişik bir birim olarak yeni bir satıra sarılır.

Benzer şekilde, Bootstrap’in grid sütun sarma özelliğini kullanarak web siteleriniz için daha da uyarlanabilir düzenler oluşturabilirsiniz. Bir sonraki makalede, bu özelliğin diğer özelliğini göreceksiniz.

Bootstrap ile Çok Sütunlu Düzen Oluşturma

Yeni Bootstrap 4 mobil ilk flexbox grid sistemi ile web sitesi düzeninizin cep telefonları, tabletler, masaüstleri, vb. gibi farklı ekran veya görünüm boyutlarına sahip farklı cihaz türlerinde nasıl işleyeceğini kolayca kontrol edebilirsiniz.

Bootstrap Grid Sistemi Örneği

Yukarıdaki çizimde, tüm cihazlarda toplam 12 içerik kutusu vardır, ancak yerleşimi, mobil cihazda olduğu gibi, düzeneğin 1 sütun ve üst üste yerleştirilmiş 12 satırdan oluşan bir sütun grid düzeni olarak gösterildiği gibi, cihazın ekran boyutuna göre değişir. Tablette ise 2 sütun ve 6 satırdan oluşan iki sütun grid düzeni olarak işlenir.

Ayrıca, dizüstü bilgisayarlar ve masaüstü bilgisayarlar gibi büyük ekranlı cihazlarda 3 sütun ve 4 sıralı üç sütun grid düzeni ve son olarak büyük masaüstleri gibi ekstra büyük ekranlı cihazlar halinde 4 sütunu ve 3 olan dört sütun grid düzeni olarak satırlar işlenir.

Bir diğer asıl soru, bu Bootstrap yeni grid sistemini kullanarak nasıl duyarlı düzenler oluşturabileceğimizdir. Birincil hedef cihazla başlayalım. Ana hedef cihazımızın dizüstü bilgisayar veya normal masaüstü olduğunu varsayalım. Dizüstü bilgisayar düzenimiz 3 sütun ve 4 satır yani 3×4 grid düzenine sahip olduğundan, bu tür grid yapısını yapmak için HTML kodu buna benzer.

<div class="container">
    <div class="row">
        <div class="col-lg-4"><p>1. Kutu</p></div>
        <div class="col-lg-4"><p>2. Kutu</p></div>
        <div class="col-lg-4"><p>3. Kutu</p></div>
        <div class="col-lg-4"><p>4. Kutu</p></div>
        <div class="col-lg-4"><p>5. Kutu</p></div>
        <div class="col-lg-4"><p>6. Kutu</p></div>
        <div class="col-lg-4"><p>7. Kutu</p></div>
        <div class="col-lg-4"><p>8. Kutu</p></div>
        <div class="col-lg-4"><p>9. Kutu</p></div>
        <div class="col-lg-4"><p>10. Kutu</p></div>
        <div class="col-lg-4"><p>11. Kutu</p></div>
        <div class="col-lg-4"><p>12. Kutu</p></div>
    </div>
</div>

Yukarıdaki örneğin çıktısını 992 pikselden büyük veya 1200 pikselden küçük ekran veya görünüm genişliğine sahip bir dizüstü bilgisayarda veya masaüstünde görürseniz, düzeni her satırın 3×4 grid sonuçlanan 3 eşit sütuna sahip 4 satırı olduğunu göreceksiniz.

Şimdi düzenimizi diğer cihazlar için özelleştirmenin zamanı geldi. İlk önce tablet için özelleştirerek başlayalım. Tabletin içinde düzenimiz 2×6 gridler (yani 2 sütun ve 6 satır) olarak olacak. Öyleyse her sütuna .col-md-6 sınıfını ekleyin.

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6"><p>1. Kutu</p></div>
        <div class="col-lg-4 col-md-6"><p>2. Kutu</p></div>
        <div class="col-lg-4 col-md-6"><p>3. Kutu</p></div>
        <div class="col-lg-4 col-md-6"><p>4. Kutu</p></div>
        <div class="col-lg-4 col-md-6"><p>5. Kutu</p></div>
        <div class="col-lg-4 col-md-6"><p>6. Kutu</p></div>
        <div class="col-lg-4 col-md-6"><p>7. Kutu7</p></div>
        <div class="col-lg-4 col-md-6"><p>8. Kutu</p></div>
        <div class="col-lg-4 col-md-6"><p>9. Kutu</p></div>
        <div class="col-lg-4 col-md-6"><p>10. Kutu</p></div>
        <div class="col-lg-4 col-md-6"><p>11. Kutu</p></div>
        <div class="col-lg-4 col-md-6"><p>12. Kutu</p></div>
    </div>
</div>

İpucu: Kolaylık sağlamak için birincil hedef cihazınızı seçin ve ardından diğer cihazlar için duyarlı hale getirmek üzere sınıflar ekledikten sonra o cihaz için düzen oluşturun.

Benzer şekilde, büyük bir masaüstü ekranı gibi ekstra büyük cihazlar için düzeni, her sütuna .col-xl-3 sınıfını ekleyerek özelleştirebilirsiniz. Çünkü ekstra geniş cihaz düzenimizdeki her satır 4 sütun içerir. İşte tüm süreci birleştirdikten sonraki son kod aşağıdadır.

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-xl-3"><p>1. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>2. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>3. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>4. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>5. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>6. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>7. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>8. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>9. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>10. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>11. Kutu</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>12. Kutu</p></div>
    </div>
</div>

İpucu: Yukarıdaki çizime göre, cep telefonları için düzeni özelleştirmeye gerek yoktur. Çünkü ekstra küçük cihazlardaki sütunlar otomatik olarak yatay hale gelir ve .col-* veya .col-sm-* sınıflarının yokluğunda 1×12 sütun grid düzeni olarak işlenir.

Grid Sütunlarının Yerleştirilmesi

Bootstrap grid sütunları da nesneldir, yani var olan bir sütunun içine satır ve sütun koyabilirsiniz. Bununla birlikte, sütunları yerleştirme formülü aynı olacaktır. Yani, sütun numaralarının toplamı tek bir satırda 12 veya daha az olmalıdır.

<div class="container">
    <div class="row">
        <div class="col-sm-8">Sol sütun</div>
        <div class="col-sm-4">
            <!-- İç içe geçmiş satırlara ve sütunlara sahip sağ sütun -->
            <div class="row">
                <div class="col-12"></div>
            </div>
            <div class="row">
                <div class="col-6"></div>
                <div class="col-6"></div>
            </div>
        </div>
    </div>
</div>

Değişkene Sahip Genişlik Sütunları Oluşturma

col-{breakpoint}-auto sınıflarını, içeriklerinin doğal genişliğine göre sütunları boyutlandırmak için kullanabilirsiniz. Nasıl çalıştığını görmek için aşağıdaki örneği deneyin:

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col-md-3">Sol sütun</div>
        <div class="col-md-auto">Değişkene sahip genişlik sütunu</div>
        <div class="col-md-3">Sağ sütun</div>
    </div>
    <div class="row">
        <div class="col">Sol sütun</div>
        <div class="col-auto">Değişkene sahip genişlik sütunu</div>
        <div class="col">Sağ sütun</div>
    </div>
</div>

Grid Sütunlarının Hizalanması

Bir container içindeki grid sütunlarını dikey ve yatay olarak hizalamak için esnek kutu hizalama yardımcı sınıflarını kullanabilirsiniz. Nasıl çalıştığını anlamak için aşağıdaki örnekleri deneyin:

Grid Sütunlarının Dikey Hizalanması

Grid sütunlarını sırasıyla bir container üstünde, ortasında ve altında dikey olarak hizalamak için .align-items-start, .align-items-center ve .align-items-end sınıflarını kullanabilirsiniz.

<div class="container">
    <div class="row align-items-start">
        <div class="col">Birinci sütun</div>
        <div class="col">İkinci sütun</div>
        <div class="col">Üçüncü sütun</div>
    </div>
    <div class="row align-items-center">
        <div class="col">Birinci sütun</div>
        <div class="col">İkinci sütun</div>
        <div class="col">Üçüncü sütun</div>
    </div>
    <div class="row align-items-end">
        <div class="col">Birinci sütun</div>
        <div class="col">İkinci sütun</div>
        <div class="col">Üçüncü sütun</div>
    </div>
</div>

Bir satır içindeki ayrı sütunlar da dikey olarak hizalanabilir. İşte bir örnek:

<div class="container">
    <div class="row">
        <div class="col align-self-start">Birinci sütun</div>
        <div class="col align-self-center">İkinci sütun</div>
        <div class="col align-self-end">Üçüncü sütun</div>
    </div>
</div>

Not: .col-* grid sınıfındaki sayıyı atlayabilir ve tüm aygıtlar için eşit boyutta sütunlar oluşturmak için .col sınıfını kullanabilirsiniz (çok küçük, küçük, orta, büyük ve çok büyük).

Grid Sütunlarının Yatay Hizalanması

Grid sütunlarını sırasıyla bir container’ın solunda, ortasında ve sağında yatay olarak hizalamak için .justify-content-start, .justify-content-center ve .justify-content-end sınıflarını kullanabilirsiniz. Nasıl çalıştığını görmek için aşağıdaki örneği inceleyelim:

<div class="container">
    <div class="row justify-content-start">
        <div class="col-4">Birinci sütun</div>
        <div class="col-4">İkinci sütun</div>
    </div>
    <div class="row justify-content-center">
        <div class="col-4">Birinci sütun</div>
        <div class="col-4">İkinci sütun</div>
    </div>
    <div class="row justify-content-end">
        <div class="col-4">Birinci sütun</div>
        <div class="col-4">İkinci sütun</div>
    </div>
</div>

Alternatif olarak, grid sütunları her iki ucunda yarı-boy (half-size) boşluklarla eşit olarak dağıtmak için .justify-content-around sınıfını kullanabilirsiniz; başında ve sonunda bulunan son sütun. Nasıl çalıştığını görmek için aşağıdaki örneği deneyin:

<div class="container">
    <div class="row justify-content-around">
        <div class="col-4">Birinci sütun</div>
        <div class="col-4">İkinci sütun</div>
    </div>
    <div class="row justify-content-between">
        <div class="col-4">Birinci sütun</div>
        <div class="col-4">İkinci sütun</div>
    </div>
</div>

Grid Sütunlarının Yeniden Sıralanması

Grid sütunlarınızın görsel sırasını, asıl işaretleme deki sırasını değiştirmeden bile değiştirebilirsiniz. Sütunu en son sıraya koymak için .order-last sınıfını, sütunu ilk sırada sıralamak için .order-first sınıfını kullanın. Bir örnek alalım:

<div class="container">
    <div class="row">
        <div class="col order-last">En son sırada yer alacak</div>
        <div class="col">Sırasız</div>
        <div class="col order-first">İlk sırada yer alacak</div>
    </div>
</div>

Sıra numaralarına bağlı olarak grid sütunlarını sıralamak için .order-* sınıflarını da kullanabilirsiniz. Daha yüksek sıra numarasına sahip grid sütunu, daha düşük sıra numarasına sahip grid sütunundan veya sıra sınıfı içermeyen grid sütunundan sonra gelir. Beş grid katmanının her birinde 1’den 12’ye kadar desteklenir.

<div class="container">
    <div class="row">
        <div class="col order-4">En son sırada yer alacak</div>
        <div class="col">İlk sırada yer alacak</div>
        <div class="col order-1">İkinci sırada yer alacak</div>
    </div>
</div>

Grid Sütunlarını Ofsetleme (Offsett)

Ayrıca .offset-sm-*, .offset-md-*, .offset-lg-* gibi sütun ofset sınıflarını kullanarak grid sütunlarını hizalama amacıyla sağa taşıyabilirsiniz.

Bu sınıflar, yalnızca sol kenar boşluğunu belirtilen sütun sayısı kadar artırarak sütunları dengeler. Örneğin, .col-md-8 sütunundaki .offset-md-4 sınıfı, orijinal konumundan dört sütun üzerinde sağa taşır. Nasıl çalıştığını görmek için aşağıdaki örneği deneyin:

<div class="container">
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-8"></div>
    </div>
    <div class="row">        
        <div class="col-sm-8 col-sm-offset-4">
            <!-- 4 sütunlu ofset sütunu --> 
        </div>
    </div>
</div>

Kenar boşluğu yardımcı sınıflarını kullanarak da sütunları uzaklaştırabilirsiniz. Bu sınıflar ofsetin genişliğinin sabit olmadığı durumlarda kullanışlıdır. İşte bir örnek:

<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4 ml-auto">
            <!-- Bu sütunu sağa kaydır -->
        </div>
    </div>
    <div class="row">
        <div class="col-auto mr-auto"></div>
        <div class="col-auto">
            <!-- Bu sütunu önceki sütundan uzağa taşı -->
        </div>
    </div>
</div>

Not: .col-auto sınıfını, yalnızca gerektiği kadar yer alan sütunlar oluşturmak için kullanabilirsiniz. Yani sütun, içeriğe bağlı olarak kendisini boyutlandırır.

Kompakt (Compact) Sütun Oluşturma

Kompakt düzenler oluşturmak için sütunlar arasındaki varsayılan olukları, .row sınıfının içerisine .no-gutters sınıfını ekleyin. Bu sınıf, negatif kenar boşluklarını satırdan ve yatay dolguyu tüm alt sütunlardan kaldırır. İşte bir örnek:

<div class="row no-gutters">
    <div class="col-4">Birinci sütun</div>
    <div class="col-4">İkinci sütun</div>
    <div class="col-4">Üçüncü sütun</div>
</div>

Sütunları Yeni Bir Satıra İttirme

Sütunların yeni bir satıra ittirilmesini istediğiniz sütuna .w-100 sınıfını ekleyerek birden çok satıra yayılan eşit genişlikte sütunlar da oluşturabilirsiniz. Ek olarak, .w-100 sınıfını duyarlı ekran yardımcı sınıflarıyla birleştirerek bu sonları yanıt verebilir hale getirebilirsiniz.

<div class="container">
    <!-- Tüm cihazlarda sütunları ittir -->
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="w-100"></div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
    <!-- Ekstra büyük cihazlar hariç tüm cihazlarda sütunları ittir -->
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="w-100 d-xl-none"></div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
</div>

Yeni Bootstrap 4 grid sisteminin temellerini anladığınızı umarım. Gelecek birkaç makalede, bu esnek container grid sistemini kullanarak temel web sayfası düzenlerinin nasıl oluşturulacağını öğreneceksiniz.

Kaynak: https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

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

Instagram Botu Nasıl Yazılır?

Bu makalede bir Instagram botunun temelleri nasıl atılır ve nasıl yazılır bunu anlatacağım.

Ben botu yazarken C# dilini ve Visual Studio 2017 programını kullandım. Sizlerde makaleyi takip ederek kendinize bir bot yazmak istiyorsanız temel düzeyde C# bilgisine ve Visual Studio programını kullanmayı bilmeniz gerekmektedir.

Öncelikle yeni bir proje oluşturun. Visual C# dilini ve Windows Form App (.NET Framework)‘ı seçerek projenizi oluşturun.

Not: Ben Framework 4.6.1 kullandım.

Açılan formun dizaynını dilediğiniz gibi tasarlayabilirsiniz.

Form Arayüzü

Artık “Giriş Yap” butonuna tıkladığımızda olacak olayların kodlarını yazabiliriz.

Öncelikle InstaSharper kütüphanesini indirelim ve projemize dahil edelim. Bu kütüphane yazacağımız botun olmazsa olmazıdır. InstaSharper yerine başka kütüphanelerde kullanabilirsiniz. Bu tamamen sizin zevkinize kalmış.

Peki, bu InstaSharper neler içeriyor? Hemen listeleyelim.

InstaSharper Dosyaları

  • API’ler
  • Sınıflar
  • Dönüştürücüler
  • Yardımcılar
  • Log Tutucu

5 klasörden oluşan bu kütüphane, geliştiriciler tarafından yazılan son sürümünde (1.4.0) toplam 281 dosya içermektedir.

Hadi artık şu Instagram botunu kodlayalım!

Form1.cs kodlarına girin ve bize gerekli olan InstaSharper kütüphanelerini ekleyin.

using InstaSharper.API;
using InstaSharper.API.Builder;
using InstaSharper.Classes;
using InstaSharper.Logger;

“Giriş Yap” butonuna tıklandığında olacak olayların kodlarını yazmadan önce Form1 sınıfının başladığı yere iki adet değişken tanımlayalım.

public partial class Form1 : Form
{
    private static UserSessionData user;
    private static IInstaApi api;

    ...

}

Şimdi butona tıklandığında olacak olayları yazalım.

private void button1_Click(object sender, EventArgs e)
{
      user = new UserSessionData();
      user.UserName = textBox1.Text;
      user.Password = textBox2.Text;

      Login();
}

Son olarak Login() fonksiyonunu yazalım.

public static async void Login()
{
     if (user.UserName == "" || user.Password == "")
         MessageBox.Show("Lütfen tüm alanları doldurun.");
     else
     {
         api = InstaApiBuilder.CreateBuilder()
         .SetUser(user)
         .UseLogger(new DebugLogger(LogLevel.Exceptions))
         .Build();

         var loginRequest = await api.LoginAsync();

         if (loginRequest.Succeeded)
            MessageBox.Show("Giriş yaptın!");
         else
            MessageBox.Show("Giriş yapamadın!\n" + loginRequest.Info.Message);
     }
}

Artık botumuz çalışmaya hazır. Derleyelim ve giriş yapalım.

Instagram Botu Yanlış Giriş

Yanlış bilgiler girildiğinde karşımıza bir mesaj kutusu çıkacak ve altında da bu hatanın ne olduğu yazacaktır.

Instagram Botu Doğru Giriş

Doğru bilgiler girildiğinde ise “Giriş yaptın!” yazan bir mesaj kutusuyla karşılaşacaksınız.

Tüm bot kodlarını yazıp anlatmak, size iyilik değil kötülük olur. Eğer makaledeki adımları düzgün bir şekilde yaptıysanız ve başarılı olduysanız botun devamını InstaSharper kütüphanesinin Wiki Sayfası‘ndan araştırarak aşağıdaki özelliklere sahip bir botu kolayca yazabilirsiniz.

  • Giriş yap
  • Çıkış yap
  • Yeni hesap oluştur
  • Kullanıcının keşfet gönderileri
  • Kullanıcının zaman tüneli gönderileri
  • Kullanıcı adına ait tüm medyalar
  • Kullanıcıya ait profil resmi
  • Kullanıcı adına ait bilgiler
  • Etikete ait gönderiler
  • Takipçi listesi
  • Giriş yapan kullanıcının takipçi listesi
  • Takip listesi
  • Son takip aktiviteleri
  • Kullanıcı adına ait kullanıcı etiketleri
  • Gelen kutusu
  • Takip et
  • Takipten çıkar
  • Ve benzeri…

Kendi kütüphanemizi değilde hazır yazılmış bir kütüphaneyi kullanmamın amacı da Kemal Faruk Durhat hocamın dediği gibi:

Amerika’yı yeniden keşfetmeye gerek yok.

Basit SEO Kılavuzu

Yeni bir web sitesi için arama motoru optimizasyonu söz konusu olduğunda, bazı işletmeler oradaki bilgi miktarı nedeniyle göz korkutuyor olabilir. Ve sık sık, deneyimli bir kurum içi SEO veya danışman yardımı yoksa başarılı olamazsınız.

Bugün, web sitenizin SEO’sunu en baştan yapılandırmak için yapabileceğiniz bazı kolay şeylere bakacağız.

1. Yerinde SEO Temelleri

Arama motoru optimizasyonu için en önemli unsurlardan bazıları kendi web sitenizde gerçekleşmektedir. Bağlantı oluşturma hakkında (çok kısa bir sürede ulaşacağımız) çok fazla şey duyabilirsiniz, ancak yerinde iyi arama optimizasyonu yapmadan yapılan bağlantı oluşturma etkili olmayacaktır. İşte web sitenizin ana sayfalarının her birine, özellikle de ana sayfasını da dahil etmeniz gereken en düşük düzeyde en iyi duruma getirme öğeleri.

Yerinde Optimizasyonun Altın Kuralı

Başlamadan önce, aşağıdaki SEO öğelerinden herhangi birini kullanırken aklınızda bulundurmanız gereken bir şey, geçersiz kılmak değildir. Sayfalarınıza çok fazla anahtar kelime göndermeniz istenebilir, ancak amaç bu değil. Aslında Google, bir sayfaya çok fazla anahtar kelime doldurulmuş web sitelerini hedefleyen bir optimizasyon cezasını kaldırmıştır. Bu nedenle, anahtar kelime optimizasyonu söz konusu olduğunda, web sitenizdeki her sayfa için en fazla beş anahtar kelime veya anahtar kelime öbeği düşünün ve bunlar için optimize edin.

Hangi anahtar kelimeleri kullanacağınızdan emin değilseniz, öneriler almak için Google’ın AdWords Anahtar Kelime Aracı’na bazı ön fikirler girmeyi deneyin.

Başlık Etiketi

<title>Teknoreel - Teknoloji ve Yazılım</title>

Web sitenizin sayfalarındaki başlık etiketi, arama motorlarına sayfanın ne hakkında olduğunu gösterir. 70 veya daha az karakter içermeli, işletme veya marka adınızı ve sadece bu sayfa ile alakalı anahtar kelimeler içermelidir. Bu etiket, sayfanın HTML kodunun üst kısmındaki <head></head> etiketleri arasına yerleştirilir.

Meta Açıklaması

<meta name="description" content="Teknoloji ve Yazılım ile ilgili en güncel paylaşımlar için bizi takip edin. Samsun'da Web Yazılım ile ilgili önde gelen firmalardan Teknoreel."/>

Web sitenizin sayfalarındaki meta açıklama, arama motorlarına sayfanızın ne hakkında olduğu hakkında biraz daha fazla bilgi sağlar. Meta açıklamaların anahtar kelime sıralamasında yardımcı olup olamayacağı konusunda hala tartışmalar var. Ne olursa olsun, meta açıklamasının, arama sonuçlarında göründüğü gibi, sayfanın ana anahtar kelimelerini içeren bir kullanıcı kitlesiyle aklınızda bulundurulmasını istersiniz.

Başlık Etiketi ve Meta Açıklaması Arama Sonuçlarında Nasıl Görünüyor?

Teknoreel Arama Sonuçları

Yukarıdaki resim, başlık etiketinin ve meta açıklamanın Google arama sonuçlarında nasıl göründüğünü gösterir. Bir kullanıcı tarafından aranan anahtar kelimelerin Google’ın hem başlık etiketinde hem de meta açıklamasında kalın yazıldığını görebilirsiniz. Bu nedenle işletme veya marka adınızı ve anahtar kelimelerinizi hem başlık hem de meta açıklamada kullanmanız gerekir. Bu, arama terimlerinizin arama yapan kişilere dikkat etmesini sağlar.

WordPress Kullanıyor Musunuz?

WordPress’i kendi alan adınızda kullanıyorsanız, şanslısınız demektir. Sayfalarınıza başlık etiketleri ve meta açıklamaları eklemek, All in One SEO, Platinum SEO ve Yoast tarafından SEO gibi ücretsiz eklentileri kullanmak oldukça kolaydır. Bu tarz eklentilerle SEO önerileri alabilirsiniz.

Ekstra Yerinde SEO Elemanları

Başlık etiketi ve meta açıklama en önemli SEO unsurları olsa da, sadece onlarla bitmiyor. Daha fazla arama optimizasyonu için aşağıdakileri web sitenizin sayfa içeriğine eklediğinizden emin olun.

  • Dahili Bağlantılar: Bağlantı kurma yalnızca web sitenize bağlantı veren dış siteler için geçerli değildir. Web sitenizdeki içeriklerle diğer sayfalara dahili olarak bağlanarak arama motorlarının web siteniz hakkında daha fazla bilgi edinmesine yardımcı olabilirsiniz. Örnek olarak; bu blog makalesi, blogdaki diğer makalelere bağlanırken dahili bağlantılar kullanır.
  • Başlık Etiketleri: Bu blog makalesi, içeriğin bölümlere ayrılmasının yanı sıra arama motorlarının içeriğin her bir bölümü hakkında daha fazla bilgi almasına yardımcı olan üç farklı HTML başlık etiketi kullanmaktadır. <h1></h1> etiketleri yazı başlığını çevreler. Sayfa başına yalnızca bir tane <h1></h1> etiketi olmalıdır. <h2></h2> ve <h3></h3> etiketleri sayfadaki alt başlıkları çevreler. Her ikisinin birden fazla örneği olabilir. Başlık etiketlerinin kullanılması hem okuyucuların hem de arama motorlarının içeriğinizi sindirilebilir bölümlere ayırmasına yardımcı olur.
  • Resim Adı & ALT Etiketleri: Web sitenizde resimler kullanıyorsanız, hem resim adı hem de alt etiketi için iyi anahtar kelimeler düşünmelisiniz. Bu makaledeki ilk görselde, <img src=”teknoreel-search.png” alt=”Teknoreel Arama Sonuçları” /> HTML kodunu kullandık. Bu, arama motorlarının belirtilen anahtar kelimelere dayanarak görsel arama için en iyi görseller bulmasına yardımcı olur.
  • Kalın Yazı: Belki bununla uğraşmak sizi çıldırtabilir. Ancak zaman zaman okuyucunun dikkatini çekmek için bir metin seçimi yapmak, arama motorlarının sayfa içeriğindeki diğer önemli bilgileri ve anahtar kelimeleri ayırt etmesine de yardımcı olabilir.

2. Neden İçeriğe İhtiyacınız Var?

En son çevrimiçi pazarlama haberlerine ayak uyduruyorsanız, içerik geliştirme ve içerik pazarlaması hakkında muhtemelen okumaya başlamışsınızdır. İçerik, web sitenize gelen ziyaretçiler ve arama motorları için mükemmeldir. İçeriğiniz ne kadar fazlaysa, ziyaretçilerinizin web sitenize yapışması o kadar olasıdır. Daha fazla içeriğiniz varsa, arama motorları daha büyük olasılıkla web sitenizin sayfalarının çoğunu arama dizinine koyacaktır.

Hem arama motorlarını hem de ziyaretçileri memnun etmenin sırrı web sitemizde kaliteli içeriğe sahip olmaktır. Kaliteli içerik, bunlarla sınırlı olmamak üzere aşağıdakileri maddeler gibi çeşitli şeyleri içerebilir.

  • Blog Makaleleri
  • İşletme Makaleleri
  • Eğitimler & Nasıl Rehberlik Edilir
  • İnfografikler (Farklı verilerin kullanıcıya grafik destekli sunularak daha kolay ve anlaşılır hale getirmesini amaçlayan dosya türüdür.)
  • Videolar
  • Podcasts (İnternet üzerinden otomatik olarak indirilebilen ve dijital formatta yer alan, müzik veya konuşmadan oluşan programlardır.)

Web siteniz için kaliteli içerik oluşturmak büyük bir yatırım olabilir, ancak buna değer. Arama motorları onu sevecek ve ziyaretçiler onu o kadar çok sevecekler ki, sosyal medyada paylaşacaklar ve daha da fazla ziyaretçi çekecekler. Web sitenizde blog makaleleri oluşturarak başlayabilirsiniz ve izleyicileriniz büyüdükçe, içerik envanterinizi ek medya türlerine genişletebilirsiniz.

Site Dışı Optimizasyon (Bağlantı Oluşturma)

Bağlantı kurma muhtemelen en çok konuşulan (ve tartışılan) SEO görevlerinden biridir. Bağlantı oluşturmanın temel amacı, diğer sitelerin sizin sitenize link vermesini sağlamaktır. Arama sonuçlarının popülerlik yarışması olarak üst sıralarda yer almasını istiyorsanız, web sitenizin yüksek sıralarda yer almayı hak ettiğini söyleyen bağlantılar oylar gibidir. Anahtar kelime bağlantı metni ile bağlantı almak, özellikle bağlantı verilen anahtar kelimeler için sıralama yapmanıza yardımcı olacaktır. Örneğin; Adobe Reader, buraya tıklanan anahtar kelimeler için bir numaradır. Çünkü bağlantı metni kullanan birçok web sitesi Adobe Reader’ı indirmek için buraya tıklar.

Peki nasıl bağlantılar alırsınız? Bunu yapmanın birçok yolu var. Bazıları iyi, bazıları iyi değil. Bağlantı kurma hakkında yeterince okursanız, sonuçta üç çeşit bağlantı ve bağlantı kurma tekniklerini duyarsınız.

  • Organik Bağlantılar: Bunlar, sormanız gerekmeyen en iyi türden bağlantılardır. Özellikle, büyük haberler ve diğer iyi bilinen web siteleri gibi tanınmış sitelere erişebiliyorsanız.
  • Beyaz Şapka: Bu, temel olarak iyi ve kaliteli bir bağlantı kurma (çabalamanız gereken tür) anlamına gelir.
  • Siyah Şapka: Bu, istenmeyen (spam) ve düşük kaliteli bağlantı kurma (kaçınmanız gereken tür) anlamına gelir.

Çoğu web sitesi, arama motorlarındaki sıralamalarını yükseltmek için yeterli organik bağlantı oluşturmakta zorlanır. Bu nedenle bağlantı kurma böyle popüler bir hizmettir. Ancak, aşağıdaki etkinliklerden bazılarını yaparak kaliteli bağlantılar oluşturmaya başlayabilirsiniz.

  • Ziyaretçi blog makalelerini endüstrinizdeki popüler bloglara gönderin. Genel olarak, web sitenize bir bağlantı gönderir ve makalenizin içeriğinin en üstündeki ya da altındaki bir yazar kutusuna gönderilir.
  • Sizinle bağlantı kurup kurmayacaklarını görmek için ilişkili (ancak rekabetçi olmayan) işletmelere ulaşmak. Bunu yapmanın iyi bir yolu, birlikte çalıştığınız işletmelerin sitelerinde ortaklar, satıcılar, tedarikçiler vb. için bağlantı sayfalarının olup olmadığını anlamaktır.
  • Yerel arama profilleri (varsa) ve sosyal medya profilleri oluşturun. Bağlantılar her zaman arama sıralamasına göre sayılmazken, web sitenize daha fazla gelen trafik oluşturan tıklamaları da çekebilir.
  • Web sitenizi geçerli endüstri dizinlerine gönderin veya alternatif olarak reklam satın alın. Örneğin; düğün işletmesinde bulunan herkes, Düğün.com, düğün kanalı ve diğer benzer sitelerdeki web sitelerine bağlantı veren listeleri alabilir. Sektörünüzle veya yetişkin, ilaç veya çevrimiçi kumarhane endüstrilerindeki gölgeli web sitelerine bağlantı verenlerle alakası olmayan düşük kaliteli dizinleri atlayın.
  • Bağlantıya layık içerik oluşturun. İnfografikler harika bir örnektir. Önemli bilgileri temsil eden güzel bir imaj yaratırsınız ve başkalarının bildiriyi kendi web sitelerinde kullanıp krediyi kendinizle bağlantı kurmasına izin verirsiniz.
  • DataForSEO (SEO için veri), özel uygulamanıza doğrudan ham SEO verilerini almak için bu aracı kullanın. Anahtar kelime sıralamasını, SERP (Arama Motoru Sonuç Sayfası) sonuçlarını, anahtar kelime verilerini ve daha fazlasını izlemek için sıra izleyici API’lerini kullanabilirsiniz.

4. Google+ Sıralamaya Nasıl Yardımcı Olabilir?

Bağlantılarınız için sosyal profiller oluşturmaktan bahsetmişken, amacınız Google’ı domine etmekse Google+‘a katıldığınızdan emin olmalısınız. Google’ın kendi sosyal ağı, bağlantı kurduğunuz kişilerin arama sonuçlarında daha iyi sıralanmanıza yardımcı olabilir. Örneğin; Google+’a giriş yapıldığında ve SEO’u aradığınızda, ilk beş arama sonucunda aşağıdaki sonuçlarla karşılaşırsınız. Arkadaş olduğunuz kişileri temel alan kişiselleştirilmiş arama sonuçları, küçük kişi simgesiyle işaretlenir.

Google+ Kişiselleştirilmiş Arama Sonuçları

Google+’a giriş yapmadığınız zaman, daha önce gösterilen iki kişiselleştirilmiş sonucun ilk beşte olmadığını görebilirsiniz. Bunlardan biri ilk sayfada bile değil.

Normal Arama Sonuçları

Kişiselleştirilmiş arama sonuçları, yerel arama sonuçlarını bile etkilediğini gösteriyor. Bu nedenle, kişiselleştirilmiş arama sonuçlarına girmek istiyorsanız, aşağıdakileri yapmalısınız.

  • Bir Google+ kişisel profili ve işletme sayfası oluşturun.
  • Arama sonuçlarına +1 vererek, web sitesini profilinizde ve/veya sayfanızda durum güncellemesi olarak paylaşarak ve önerilen web siteleri altındaki profil bilgilerinize bağlayarak arama sonuçlarında iyi sıralanmasını istediğiniz web sitesini önerin.
  • Başkalarının sizinle bağlantı kurmak istemesini sağlamak için profil bilgilerinizi tamamen doldurun.
  • Ayarlarınızı kontrol edin ve durum bilgilerinizle birlikte profil bilgilerinizin halka açık olduğundan emin olun.
  • Profilinizde diğer ilginç güncellemeler paylaşın. Bunun sayesinde profiliniz bir reklam/reklamcı gibi gözükmeyecektir.
  • Web sitenizi arama sonuçlarında görmek istediğiniz kişilerle bağlantı kurmaya başlayın. Bağlanacak kişileri bulmak ve çevrelerinize eklemek için Google+’daki arama kutusunu kullanın. Umarım çoğu sizi geri ekler.

Temel olarak, Google+’da ne kadar popüler olursanız, sizi izleyenlerle kişiselleştirilmiş arama sonuçlarını etkileme olasılığınız o kadar yüksek olur. Dolayısıyla, faydalardan yararlanmak için bu sosyal ağdan tam anlamıyla yararlanın.

5. Sonuçlarınızı İzleme

Son olarak, sonuçlarınızı izleyerek SEO ilerlemenizi takip etmek isteyeceksiniz. Bu sonuçları izlemek için kullanabileceğiniz en önemli üç araç aşağıdadır.

  • Authority Labs: Pro hesabın 30 günlük deneme sürümünü kullandıktan sonra ücretsiz bir hesap oluşturabilirsiniz. Web sitenizin anahtar kelime sıralamasını izlemek için bu aracı kullanın, böylece arama sonuçlarında yükselip yükselmediklerini görebilirsiniz.
  • Google Analytics: Web sitenize gelen ziyaretçiler hakkında daha fazla bilgi edinmek için Google Analytics’i kullanın. Özellikle, web sitenizi arama sonuçlarında bulmak için hangi anahtar kelimeleri kullandığını görmek için organik arama trafiği kaynaklarınızı izleyin. Hedefleri belirleyerek, hangi anahtar kelimelerin ziyaretçilere yol açtığını, ziyaretçilerin web sitenizde yapmak istediklerini ve yaptıklarını, bir e-posta aboneliğine kaydolma veya bir ürün satın alma gibi işlemleri görebilirsiniz. Bu, SEO kampanyanızla hangi anahtar kelimeleri hedeflemeniz gerektiğini öğrenmenize yardımcı olur.
  • DataForSEO: Özel uygulamanıza doğrudan ham SEO verilerini almak için bu aracı kullanın. Anahtar kelime sıralamasını, SERP sonuçlarını, anahtar kelime verilerini ve daha fazlasını izlemek için sıra izleyici API’lerini kullanabilirsiniz.

Birçok değerli SEO aracı daha var. Ancak bunlar, SEO çabalarınızın bir fark yaratıp yaratmadığı hakkında daha fazla bilgi edinmenize yardımcı olacak en iyileridir.

Bu makaledeki önerileri izleyebiliyorsanız, web sitenizin arama motoru optimizasyonu söz konusu olduğunda kesinlikle sağ ayakla başlayacaksınız. Ve umarım arama motorları aracılığıyla daha fazla ziyaretçi almanın avantajlarından da yararlanmaya başlayacaksınız!

Kaynak: https://neilpatel.com/blog/simple-guide-to-seo