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