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

Yayınlayan

Bir cevap yazın

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