Bootstrap Grid Sistemi Nedir?

Web tasarımı dünyasında bir web sayfasının düzenini oluşturmak ve içeriği düzenli bir şekilde göstermek oldukça önemlidir. Bootstrap, bu konuda tasarımcılara büyük kolaylık sağlayan bir framework’tir. Bootstrap’un sunduğu grid sistemi web sayfalarını hızlı ve etkili bir şekilde düzenlemek için kullanılan güçlü bir araçtır.

Bootstrap Nedir?

Bootstrap Twitter tarafından geliştirilen ve açık kaynaklı bir web framework’üdür. HTML, CSS ve JavaScript’i kullanarak kullanıcı arayüzü geliştirmeyi kolaylaştırır. Temelde bir dizi önceden tanımlanmış stili ve bileşeni içerir, bu da web geliştiricilerinin projelerine hız kazandırmalarına yardımcı olur.

Bootstrap Grid (Izgara) Sistemi Nedir?

Bootstrap’un grid sistemi bir web sayfasının düzenini belirlemek için kullanılan bir yapıdır. Grid sistemi sayfayı satırlar ve sütunlar halinde böler. Her bir sütun sayfa genişliğinin bir yüzdesini temsil eder ve böylece sayfa farklı ekran boyutlarına uyum sağlayabilir.

Bootstrap Grid Sistemi Özellikleri:

Sütunlar ve Satırlar:

Bootstrap grid sistemi sütunlar ve satırlar aracılığıyla sayfayı düzenler. Sayfa genişliği 12 birimden oluşur ve sütunlar bu birimlere göre konumlandırılır.

Duyarlı Tasarım:

Bootstrap grid sistemi duyarlı tasarım ilkelerine uyar. Yani, web sayfanız farklı cihazlarda (bilgisayar, tablet, mobil) uygun bir şekilde görüntülenir.

Offset ve Push/Pull:

Sütunlara ek olarak Bootstrap grid sistemi offset, push ve pull gibi özelliklerle sütunların konumunu daha fazla özelleştirmenizi sağlar.

Sınıf İsimlendirmesi:

Grid sistemi kullanılarak HTML elemanlarına belirli sınıf isimleri ekleyerek, kolayca sütunlar oluşturabilir ve düzeni belirleyebilirsiniz.

Nasıl Kullanılır?

bootstrap-grid-sistemi

Bootstrap grid sistemi kullanmak oldukça basittir. İlk olarak bir konteyner (container) oluşturarak sayfayı içine almalısınız. Daha sonra sırasıyla “row” ve “col” sınıflarını kullanarak satırları ve sütunları ekleyebilirsiniz.

ÖRNEK

<div class=”container”>
<div class=”row”>
<div class=”col-md-6″>İçerik 1</div>
<div class=”col-md-6″>İçerik 2</div>
</div>
</div>

Yukarıdaki örnek ile iki sütunlu bir sayfa oluşturur ve her bir sütunun genişliği yarı yarıya olur.

Bootstrap grid sistemi web tasarımcılarına esneklik ve hız kazandıran güçlü bir araçtır. Her türlü projede kullanılabilir ve sayfa düzenini kusursuz bir şekilde oluşturmanıza yardımcı olabilir.

ilginizi çekebilir ikon İLGİNİZİ ÇEKEBİLİR
Detay >> Web Tasarım Postman Nedir? Kullanım Alanları Nedir?
Geliştiriciler için vazgeçilmez araçlardan biri olan Postman, API (Application Programming Interface) testi ve geliştirme süreçlerini yönetmek için kullanılan bir platformdur. Postman, API’lar arasındaki etkileşimi kolaylaştırarak, geliştiricilere hızlı ve verimli bir şekilde çalışma imkanı sunar. Peki, Postman nedir ve hangi alanlarda kullanılır? İşte Postman’ın temel özellikleri ve kullanım alanları; Postman Nedir? Postman, başta web servisleri olmak...
0 Yorum Yunus H. Parlar · 24 Aralık 2023
Detay >> Web Tasarım Web Tasarımcıları İçin Faydalı Google Chrome Eklentileri
Web tasarım dünyası sürekli olarak gelişim göstermekte ve  işlerini daha verimli bir şekilde yapabilmek için çeşitli araçlara ihtiyaç duyulmakta. Google Chrome’un sunduğu eklentiler web tasarımcıları için önemli araçlar ve kaynaklar sunabilmekte. İşleri hızlandırması, çoğu aracın bir arada kullanılması sebebiyle bu tür browser eklentileri oldukça fayda sağlamakta. Bu yazımda da bu sebeple sıkça kullandığım ve faydalı...
0 Yorum Yunus H. Parlar · 26 Kasım 2023
Detay >> Web Tasarım Kurumsal Web Tasarımı Özellikleri Nelerdir?
Günümüzde bir işletme için çevrimiçi varlık oluşturmak son derece önemlidir. Bu bir kurumsal web sitesinin oluşturulması gerekliliğini doğurur. Ancak bir kurumsal web sitesinin sadece var olması yeterli değildir. Bu web sitesinin etkili bir şekilde tasarlanmış olması da gereklidir. Kurumsal bir web sitesinde olması gereken çeşitli özelliklere bu yazımda yer verdim. Başlıca değinmek gerekirse; 1. Profesyonellik...
0 Yorum Yunus H. Parlar · 22 Ekim 2023
Detay >> Web Tasarım E-Ticaret Web Sitesi Tasarımı İçin Uzman İpuçları
Ziyaretçilerin %78’inin e-ticaret sitelerinin ürün sayfalarına daha fazla resim eklemesini istediğini biliyor musunuz? Alışveriş yapanlar, ürünlerin net görsellerinin yanı sıra düzenli ve ayrıntılı ürün sayfalarına sahip, kullanıcı dostu ve çekici web sitelerini tercih ediyor. Bu yazımda da e-ticaret web sitesi tasarımında nelere dikkat edilmesi gerektiği, nasıl bir tasarımın olması gerektiği konularında bazı ipuçlarına değineceğim. Profesyonel...
0 Yorum Yunus H. Parlar · 9 Ekim 2023
Detay >> Web Tasarım Freelance Web Tasarımcı Nasıl Seçilmelidir?
Dijital çağı yaşadığımız bir dönemde web sitesi bir işletme veya kişisel markanız için vazgeçilmez bir gereklilik haline gelmiştir. Ancak web tasarımı uzmanlığına sahip olmayan biri için etkili bir web sitesi oluşturmak oldukça zorlayıcı bir süreç olabilir. Böylelikle web sitesi projesi için iyi bir freelance web tasarımcı ile anlaşmak işleyiş için oldukça önemli bir hal almakta....
0 Yorum Yunus H. Parlar · 17 Eylül 2023
Detay >> Web Tasarım Web Sitemi Spam Yorumlardan Nasıl Korurum?
Bir web sitesi sahibi olarak spam yorumlarla uğraşmak maalesef can sıkıcı bir durum. Bu durum web sitenizin güvenirliliğini zedelemekle beraber kullanıcı deneyimi için de olmusuz bir durum yaşatmakta. SEO için düşünüldüğünde de web siteniz için sorun teşkil eden spam yorumlardan nasıl kurtulabileceğiniz hakkında bir yazı yazarak yardımcı olmak istedim. Spam Yorumları Nasıl Engellerim? CAPTCHA Kullanımı:...
0 Yorum Yunus H. Parlar · 10 Eylül 2023
Detay >> Web Tasarım Yeni İşletmeler İçin Web Tasarımı Tavsiyeleri
Günümüzde işletmeler için etkili bir web sitesi sahibi olmak, ticari başarının önemli bir unsuru haline geldi. Özellikle yeni işletmeler için, doğru bir web tasarımı, markanızı tanıtmak, müşterilere ulaşmak ve dijital varlığınızı oluşturmak adına kritik bir rol oynamakta. Peki yeni işletmeler için bu denli önemli yer tutan web tasarımı nasıl olmalı? Bu yazımda bu konuya değinmek...
0 Yorum Yunus H. Parlar · 28 Ağustos 2023
Detay >> Web Tasarım Visual Studio Code’da En Çok Kullanılan Eklentiler
VS Code kullanıcı dostu arayüzü, güçlü özellikleri ve genişletilebilir yapısı sayesinde geliştiriciler arasında büyük bir popülariteye sahip. Bu sebeple programa eklenen eklentiler VS Code’u daha da güçlü ve kişiselleştirilebilir hale getiriyor. Benimde kullandığım Visual Studio Code’un (VS Code) en çok kullanılan ve popüler olan eklentilerine bu yazıda yer vereceğim. VS Code’un En Popüler Eklentileri Bracket...
0 Yorum Yunus H. Parlar · 29 Temmuz 2023
Detay >> Web Tasarım Front-End ve Back-End Developer Nedir? Farkları Nelerdir?
Web geliştirme sürecinde web siteleri, uygulamaları ve yazlımları oluşturmak için farklı roller ve görevler bulunmaktadır. Front-end ve back-end developerlar bu görevlerin önemli bir parçasını oluşturmaktadır. Peki front-end ve back-end developerlar kimdir ve aralarındaki farklar nelerdir? Bu yazımda bu iki iş tanımına değineceğim. Front-End Developer Nedir? Front-end developerlar, web sitelerin, uygulamaların ya da yazılımların kullanıcı arayüzünün...
0 Yorum Yunus H. Parlar · 9 Temmuz 2023
yorum yaz YORUM YAZ

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Menü