Bootstrap Responsive Tasarım

Hazırlayan: Muhammet Ali Furkan Karamert

RESPONSİVE TASARIM NEDİR?

Responsive site, web tasarımında kullanılan bir tekniktir ve web sitelerinin farklı cihazlarda (mobil, tablet, masaüstü) farklı boyutlarda ve özelliklerde görüntülenebilmesini sağlar. Bu yaklaşım, web sitesinin içeriğinin cihaza ve tarayıcı boyutuna göre otomatik olarak ayarlanmasını sağlar ve kullanıcılara daha iyi bir kullanıcı deneyimi sunar.

Responsive site, mobil cihazların kullanımının artmasıyla birlikte daha popüler hale gelmiştir. Mobil cihazların ekran boyutları diğer cihazlardan farklı olduğu için, mobil kullanıcılar web sitelerinin mobil cihazlarda rahatça görüntülenebilmesini beklerler. Responsive site bu sorunu çözer ve web sitesini her cihazda optimize eder.

Responsive site oluşturmak için bir araç olan Bootstrap, Twitter tarafından geliştirilen bir CSS ve JavaScript çerçevesidir ve web tasarımcılarına responsive site oluşturmak için birçok önceden tanımlanmış bileşen sunar.

Responsive site, mobil cihaz kullanımının artması nedeniyle daha da önemli hale gelmektedir. Günümüzde, web sitelerinin çoğu responsive site olacak şekilde tasarlanmaktadır. Bu sayede, kullanıcılar web sitelerini her cihazda kolayca kullanabilir ve web sitesinin kullanıcı deneyimi artar.

Bootstrap responsive tasarımla oluşturulmuş birçok site mevcut. Burada bazı örnekler veriyorum:

Bu sitelerin tümü Bootstrap kullanarak oluşturulmuş ve tamamen responsive tasarıma sahip. Bu örneklerden ilham alarak kendinize uygun bir tasarım oluşturabilirsiniz.

Aşağıdaki adımları izleyerek Bootstrap ile responsive bir web sitesi oluşturabilirsiniz:

Bootstrap'in son sürümünü indirin veya CDN üzerinden çağırın.
HTML belgenize Bootstrap'in CSS ve JavaScript dosyalarını ekleyin.

<head>

</head>

3.Sayfanızdaki herhangi bir öğeyi Bootstrap'in grid sistemine göre yerleştirin. Grid sistemini kullanarak, sayfanızdaki öğeleri farklı boyutlarda ve farklı cihazlarda nasıl görüntüleyeceğinizi ayarlayabilirsiniz.

Bootstrap, 12 sütunlu bir grid sistemi kullanır. Bu, sayfayı 12 eşit parçaya böler ve bu parçaların her biri bir sütunu temsil eder. Bu sütunlar, sayfada farklı genişliklerdeki içerikleri sığdırmak için kullanılabilir. Örneğin, bir sütun genişliği %25 ise, sayfa genişliğinin %25'ini kaplar.

Bootstrap'un 12'lik grid sistemi, sayfayı farklı cihazlara uyacak şekilde ölçeklendirmeyi kolaylaştırır. Örneğin, bir masaüstü bilgisayar ekranında 12 sütun kullanılabilirken, bir mobil cihazda sadece 4 sütun kullanılabilir. Bu, sayfanın farklı cihazlarda düzgün görüntülenmesini sağlar.

Bootstrap'un 12'lik grid sistemi, sütunların yanı sıra sütun aralarını da içerir. Bu aralıklar, sayfanın daha okunaklı ve estetik görünmesini sağlar. Ayrıca, sütun aralıkları da ölçeklenebilir, böylece farklı cihazlarda sayfanın düzgün görüntülenmesini sağlar.

Bootstrap'un 12'lik grid sistemi, responsive tasarımın temelini oluşturur ve sitenin farklı cihazlarda düzgün görüntülenmesine yardımcı olur. Bu sistem, sayfanın içeriğinin ölçeklenmesi, yerleştirilmesi ve düzenlenmesi için esnek bir yapı sağlar ve web geliştiricilerin responsive tasarımlarını daha kolay bir şekilde yapmalarına yardımcı olur.

Birkaç örnek ile Bootstrap grid sistemi :

Buraya sütun içeriği gelecek

</div>

Buraya sütun içeriği gelecek.

</div>

+ Bir sütun oluşturmak için şu kodu kullanabilirsiniz:

<div class="col-md-6">Kolon 1</div>

<div class="col-md-6">Kolon 2</div>

</div>

+ İki kolonlu sayfa düzeni:

4.CSS3 geçişleri ve animasyonları: CSS3 geçişleri ve animasyonları, sayfaların etkileşimli ve çekici olmasına yardımcı olur. Bu özellikler, sitenin kullanıcı deneyimini geliştirirken, site hızını da korumak için optimize edilir.

5.Yazı tipleri: Responsive tasarımda, yazı tipleri de cihaz boyutlarına göre optimize edilir. Bu, sayfanın okunabilirliğini artırır ve kullanıcı deneyimini geliştirir.

6.Mobil özellikler: Responsive tasarımda, mobil cihazlara özel özellikler kullanmak önemlidir. Bu özellikler, sayfaların mobil cihazlarda hızlı yükleme, dokunmatik ekranlara uyumlu olma, navigasyonun kolay olması ve diğer mobil cihaz özelliklerini desteklemesi gibi özellikleri içerir.

7.Responsive tasarım için medya sorgularını kullanın. Medya sorguları, farklı cihazlarda farklı CSS kurallarını etkinleştirmenizi sağlar.

Bootstrap, responsive web tasarımları yaparken kullanılan medya sorguları ile farklı ekran boyutlarına göre stil ve özellikleri değiştirme olanağı sağlar. Bu sayede, web siteniz farklı cihazlarda (mobil, tablet, masaüstü vb.) uyumlu bir şekilde görüntülenebilir.

Bootstrap, dört adet medya sorgusu kullanır:

Bu sorgular, CSS'in @media kuralı ile birleştirilerek kullanılır.

1.XS (Extra Small): Bu medya sorgusu, ekran boyutu 0px ile 575.98px arasındaki cihazlar için geçerlidir. Bu boyutlardaki cihazlar genellikle akıllı telefonlar ve küçük tabletlerdir. XS medya sorgusu, max-width ile belirtilir.

2.SM (Small): Bu medya sorgusu, ekran boyutu 576px ile 767.98px arasındaki cihazlar için geçerlidir. Bu boyutlardaki cihazlar genellikle büyük telefonlar ve tabletlerdir. SM medya sorgusu, min-width ve max-width ile belirtilir.

3.MD (Medium): Bu medya sorgusu, ekran boyutu 768px ile 991.98px arasındaki cihazlar için geçerlidir. Bu boyutlardaki cihazlar genellikle tabletler ve küçük dizüstü bilgisayarlar için kullanılır. MD medya sorgusu, min-width ve max-width ile belirtilir.

4.LG (Large): Bu medya sorgusu, ekran boyutu 992px ve üzeri olan cihazlar için geçerlidir. Bu boyutlardaki cihazlar genellikle büyük dizüstü bilgisayarlar ve masaüstü bilgisayarlar için kullanılır. LG medya sorgusu, min-width ile belirtilir.

@media (max-width: 575.98px) {

.my-class {

font-size: 12px; } }

Örneğin, yandaki kod bloğu, XS medya sorgusunda geçerli olacak ve ekran boyutu 0 ile 575.98px arasında olan cihazlarda çalışacaktır:

@media (min-width: 576px) and (max-width: 767.98px) {

.my-class {

font-size: 14px; } }

Yandaki kod bloğu ise SM medya sorgusunda geçerli olacak ve ekran boyutu 576px ile 767.98px arasında olan cihazlarda çalışacaktır:

@media (min-width: 768px) and (max-width: 991.98px) {

.my-class { font-size: 16px; } }

Yandaki kod bloğu, MD medya sorgusunda geçerli olacaktır:

@media (min-width: 992px) {

.my-class { font-size: 18px; } }

Yandaki kod bloğu, LG medya sorgusunda geçerli olacaktır:

Telefon İçin Responsive Tasarım Örneği

<h1 class="text-center">Benzersiz Bir Yolculuk: Çöldeki Macera</h1>

<p class="text-center">Yol boyunca çöl manzaraları, dağlar ve nehirlerle dolu görkemli manzaralarla karşılaşacaksınız.</p>

<p class="text-center">Yolculuğunuzu zorlu kılan, yolun bazı kesimlerinde doğal afetlerin yanı sıra yerel çetelerin saldırılarına da maruz kalabileceğinizdir.</p>

</div></div></div>

Bilgisayar İçin Responsive Tasarım Örneği

<h1 class="text-center">Benzersiz Bir Yolculuk: Çöldeki Macera</h1>

<p class="text-center">Yol boyunca çöl manzaraları, dağlar ve nehirlerle dolu görkemli manzaralarla karşılaşacaksınız.</p>

<p class="text-center">Yolculuğunuzu zorlu kılan, yolun bazı kesimlerinde doğal afetlerin yanı sıra yerel çetelerin saldırılarına da maruz kalabileceğinizdir.</p>

</div> </div></div>

Tablet İçin Responsive Tasarım Örneği

<h1 class="text-center">Benzersiz Bir Yolculuk: Çöldeki Macera</h1>

<p class="text-center">Yol boyunca çöl manzaraları, dağlar ve nehirlerle dolu görkemli manzaralarla karşılaşacaksınız.</p>

<p class="text-center">Yolculuğunuzu zorlu kılan, yolun bazı kesimlerinde doğal afetlerin yanı sıra yerel çetelerin saldırılarına da maruz kalabileceğinizdir.</p>

</div></div></div>

Bootstrap responsive tasarım ekran boyutuna bağlı öğeler

Bootstrap ile yapılan responsive tasarımlarda, ekran boyutuna bağlı olarak farklı öğelerin görüntülenmesi veya gizlenmesi mümkündür. Böylece, farklı ekran boyutlarına sahip cihazlarda sayfanın düzgün bir şekilde görüntülenmesi sağlanır.

Bootstrap, responsive tasarım için dört farklı ekran boyutu sınıfı sunar: xs, sm, md ve lg. Ekran boyutuna bağlı olarak, farklı sınıf adları kullanarak belirli öğelerin görüntülenmesini veya gizlenmesini sağlayabilirsiniz. Aşağıdaki örneklerde, belirli boyutlarda öğelerin nasıl görüntülendiğini veya gizlendiğini görebilirsiniz:

<div class="visible-xs">Bu öğe sadece xs boyutunda görüntülenecek.</div>

<div class="hidden-xs"> Bu öğe xs boyutunda gizlenecek.</div>

Bu kod bloğunda, visible-xs sınıfı, öğenin sadece xs boyutunda görüntülenmesini sağlar. hidden-xs sınıfı ise, öğenin xs boyutunda gizlenmesini sağlar.

<div class="visible-xs visible-sm">Bu öğe xs ve sm boyutlarında görüntülenecek.</div>

<div class="hidden-md hidden-lg"> Bu öğe md ve lg boyutlarında gizlenecek.</div>

Bu kod bloğunda, visible-xs visible-sm sınıfı, öğenin xs ve sm boyutlarında görüntülenmesini sağlar. hidden-md hidden-lg sınıfı ise, öğenin md ve lg boyutlarında gizlenmesini sağlar.

Bu öğe farklı boyutlarda farklı genişliklerde görüntülenecek

</div>

Bu kod bloğunda, col-xs-12 sınıfı öğenin xs boyutunda tam genişlikte görüntülenmesini sağlar. col-sm-6 sınıfı öğenin sm boyutunda yarım genişlikte görüntülenmesini sağlar. col-md-4 sınıfı öğenin md boyutunda 1/3 genişlikte görüntülenmesini sağlar. col-lg-3 sınıfı öğenin lg boyutunda 1/4 genişlikte görüntülenmesini sağlar.

Bootstrap'un bu özellikleri, farklı ekran boyutlarına sahip cihazlarda sayfanın düzgün bir şekilde görüntülenmesini sağlamak için oldukça kullanışlıdır.

Page updated

Report abuse