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

Yayınlayan

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir