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

Bootstrap 4’e Giriş

Bootstrap, web sitelerinin daha hızlı ve daha kolay yanıt vermesi için geliştirilen en popüler ve güçlü front-end (ön yüz) (HTML, CSS ve JavaScript) kodlama yöntemi (framework) dir.

Bootstrap 4

Bootstrap, daha hızlı ve daha kolay web geliştirme için güçlü bir front-end kodlama yöntemidir. Formlar, düğmeler, navigations (gezinmeler), açılır menüler, uyarılar, modeller, sekmeler, accordions (akordeonlar), carousels (karuseller), araç ipuçları vb. gibi ortak kullanıcı arayüzü bileşenleri oluşturmak için HTML ve CSS tabanlı tasarım şablonları içerir.

Bootstrap size çok az çaba ile flexible and responsive (esnek ve mobil uyumlu) web şablonları oluşturma yeteneği verir.

Bootstrap aslen 2010 ortasında Twitter’da bir tasarımcı ve bir geliştirici tarafından oluşturuldu. Bootstrap açık kaynak kodlu bir framework olmadan önce Twitter’ın, Blueprint (Görsel Progralama Aracı) gibi araçları kullandığı biliniyordu.

Bootstrap ile oldukça fazla zaman ve emek tasarrufu yapabilirsiniz.

İpucu: Bootstrap eğitim makalelerimiz, her konunun anlaşılması, kolay açıklamasıyla adım adım Bootstrap’ın temel ve gelişmiş özelliklerini öğrenmenize yardımcı olacaktır. Eğer bir acemi iseniz, temel bilgilerle başlayın ve her gün biraz öğrenerek yavaş yavaş ilerleyin.

Bootstrap İle Yapabilecekleriniz

Bootstrap ile yapabileceğiniz birçok şey var.

  • Kolayca responsive web siteleri oluşturabilirsiniz.
  • Önceden tanımlanmış sınıflarla hızlı bir şekilde çoklu sütun düzeni oluşturabilirsiniz.
  • Hızlı bir şekilde farklı form düzeni türleri oluşturabilirsiniz.
  • Hızlı bir şekilde farklı gezinti çubuğunu oluşturabilirsiniz.
  • Herhangi bir JS kodu yazmadan kolayca accordions, modals vb. gibi bileşenler oluşturabilirsiniz.
  • Büyük miktardaki içerikleri yönetmek için kolayca dinamik sekmeler oluşturabilirsiniz.
  • İpucu metnini göstermek için kolayca araç ipuçları ve açılır pencereler oluşturabilirsiniz.
  • İçeriğinizi sergilemesi için kolayca bir resim slaytı veya carousel oluşturabilirsiniz.
  • Farklı türlerde uyarı kutularını hızlı bir şekilde oluşturabilirsiniz.

Liste burada bitmiyor. Bootstrap ile yapabileceğiniz birçok ilginç şey var. Gelecek makalelerde hepsini ayrıntılı olarak öğreneceksiniz.

Bootstrap Kullanmanın Avantajları

Herhangi bir front-end framework ile ilgili bazı deneyimleriniz varsa, Bootstrap’ı bu kadar özel kılan şeyin ne olduğunu merak ediyor olabilirsiniz. İşte bir web geliştiricisinin Bootstrap framework’unu tercih etmesi için bazı avantajlar:

  • Fazlasıyla zaman tasarrufu: Bootstrap önceden tanımlanmış tasarım şablonlarını ve sınıflarını kullanarak çok fazla zaman ve emek tasarrufu yapabilir. Bu sayede diğer geliştirme çalışmalarına konsantre olabilirsiniz.
  • Responsive özellikler: Bootstrap özelliğini kullanarak, işaretlemede herhangi bir değişiklik yapmadan farklı cihazlarda ve ekran çözünürlüklerinde daha uygun görünen duyarlı web siteleri oluşturabilirsiniz.
  • Tutarlı tasarım: Tüm Bootstrap bileşenleri, aynı tasarım şablonlarını ve stillerini merkezi bir kütüphane aracılığıyla paylaşır. Böylece web sayfalarınızın tasarımı ve düzeni tutarlı olur.
  • Kullanımı kolay: Bootstrap kullanımı çok kolaydır. Temel HTML, CSS ve JavaScript çalışma bilgisi olan herkes Bootstrap ile geliştirmeye başlayabilir.
  • Tarayıcılarla uyumlu: Bootstrap, modern web tarayıcılarını göz önünde bulundurularak oluşturulur. Chrome, Firefox, Safari, Internet Explorer vb. gibi tüm modern tarayıcılarla uyumludur.
  • Açık kaynaklı: Ve en iyi kısmı, indirmek ve kullanmak tamamen ücretsizdir.

Not: Bootstrap 4.3, Bootstrap’ın en son ve en kararlı sürümüdür. Bootstrap 4; Google Chrome, Firefox, Safari, Internet Explorer 10 ve üstü gibi tüm modern tarayıcılarda desteklenir.

Bu Eğitim Makaleleri Neleri Kapsar?

Bu Bootstrap eğitim serisi, Bootstrap framework’ünün tüm özelliklerini kapsar; grid sistemi, typography şekillendirme mekanizması, form şekillendirme yöntemleri gibi tablo, liste, resim vb. başka bir deyişle ortak kullanıcı arayüzü elemanlarının şekillendirme tekniklerinin tümünü kapsar.

Ayrıca; input grupları, düğme grupları, medya nesneleri, gezinti çubuğu (navbar), paneller, sayfalandırma, etiketler ve rozetler (badges), ilerleme çubukları (progress bars) vb. gibi hazır Bootstrap bileşenlerini nasıl kullanacağınızı ve bunların farklılarını oluşturmak için nasıl özelleştireceğinizi öğreneceksiniz.

Son olarak; modal pencere oluşturma, dinamik sekmeler, araç ipuçları, uyarılar, accordion menü, carousel, scrollspy vb. gibi bazı gelişmiş özellikleri keşfedeceksiniz, ayrıca mevcut seçenekleri ve yöntemleri kullanarak bunları nasıl özelleştirebileceğinizi veya genişletebileceğinizi öğreneceksiniz.

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