Bootstrap'ın Getirdiği Grid Sistemi, Turkish Tutorial
utopian-io·@enderman·
0.000 HBDBootstrap'ın Getirdiği Grid Sistemi, Turkish Tutorial
### Bootstrap Css File Inspection
We will discuss the basic bootstrap CSS code under this heading, and we will look at the enhanced global Bootstrap code in this area.
First of all, you can easily design a website for Bootstrap without writing CSS code in other pages. Under this heading we will look at what kind of code the CSS file is made of and how it is structured.
### Bootstrap's Grid System
Bootstrap comes with a 12-component grid system that allows you to easily adapt to all browsers and devices, and thanks to the already configured Bootstrap grid system, you can benefit from this compatibility without writing CSS code.
### Horizontal Grid System
Thanks to the horizontal grid system that comes with Bootstrap, you can resize according to the size of the main div by applying in-div div rule. With this resolution you can scale according to the devices.
### Fluid Grid System
"Fluid", another grid system, is generally used for full-size web projects called full-screen. Designers who do not design "box" style can make more successful designs using this system.
### Bootstrap Css Dosyasının İncelenmesi
Bu başlık altında temel bootstrap CSS kodlarını ele alacağız ve bununla beraber bu alanda gelişmiş global Bootstrap kodlarını inceleyeceğiz.
İlk olarak Bootstrap için diğer sayfalarda CSS kodları yazmadan kolaylıkla web sitesi tasarlayabileceksiniz demiştik. Bu başlık altında ise CSS dosyasının ne gibi kodlardan oluştuğuna ve ne türden yapılandırmalar bulunduğuna bakacağız.
.size-adjust 100%: Boyutlandırma 100% oramnda yaplımaktadır.
.font-size 80%: Yazı tiplerinin %80 oranında boyutlandırmasını sağlar.
.height: auto: Boyutlandırmayı otomatik olarak yapmaktadır.
.margin-left 75%: Sola doğru margin oranını %75 oranında boyutlandırır.
.navbar-fixed-bottom: Alta doğru navigasyonların fix'lenmesini, yani; belirli bir şekilde oturmasını sağlar.
.navbar-ıink: {color: #777} : Navigasyon menüsüne eklenmiş linklerin"#777" renginde yani gri tonlarında olmasını sağlamaktadır.
.a.Bg-SUccess: hover{background-color: #c1 e2b3} : işlem hover olunca rengin yeşil tonlarında gözükmesini sağlamaktadır.
Aslında yukarıda bunları vermenin temel amacı bir fikir sahibi olabilmenizdir. Zaten bir çok kod genelde boyutlandırma, padding, margin gibi ve bununla birlikte görsellik için yazılmış kodlardır, bu yüzden fazla örnek vermeye gerek duymadığımı söyleyebilirim.
Biraz daha detaylandırmak istiyorum. Kodlara baktığımızda "@media" gibi kodlar dikkatinizi çekecektir, bunlar sayesinde mobil uyumluluğu ve diğer cihazlara uyumluluğu ayrıca Bootstrap ile gelen boyutlandırma, yani "resize" olayını sağlamaktadır. Bu kodlar olmasaydı kendimiz mobil ve diğer tarayıcılara göre uyumluluk sağlamak zorunda kalacaktık.
Yukarıda Bootstrap'ın CSS kütüphanesinde barınan bazı kodlardan bahsettik ve açıklamalarını yaptık fakat Bootstrap kullanırken Bootstap'ın CSS dosyası ile çok fazla işimiz olmayacak. Bunun nedeni ise, Bootstrap ile HTML kodlarının özelleştirilip hepsinin şekillendirilmesinden kaynaklanmaktadır. Eğer kendi CSS dosyamzda colors, border-radius ve benzeri kodları değiştirmek isterseniz başlangıç yaptığımız sayfadaki CSS dosyasının indirilip, düzenleme yapılabileceğinden bahsetmiştik. Bir diğer yol ise, ekstra CSS oluşturup Bootstrap'ın oluşturmuş olduğu sınıflara CSS kodlarınızı yazabilirsiniz.
### Bootstrap'ın Getirdiği Grid Sistemi
Bootstrap ile gelen 12 bileşenli grid sistemi sayesinde kolaylıkla tüm tarayıcı ve cihazlara uyumluluk sağlayabilirsiniz ve zaten otomatik olarak yapılandırılmış Bootstrap grid sistemi sayesinde CSS kodu yazmadan bu uyumluluktan yararlanabilirsiniz.
iık olarak bir HTML projesine başladığımız zaman genelde her zaman ana bir "div" açarız ve bu ana "div" üzerinden çalışmalarımızı yapmaya devam ederiz, Bootstrap ile gelen "Container" adlı "div" sayesinde çalışmalarımızı çok daha başarılı bir şekilde boyutlandırılmasını sağlayabiliriz.
```
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale-1">
</head>
<body>
<div class="container"></div>
</body>
</html>
```
kodunu kullanıp ara elementleri bu "div" içinde toplamamız gerekmektedir. Grid sistemi "row" sınıfını da kullanabilirsiniz.
Kullanmak için ise aşağıda bulunan kod gereklidir;
```
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale-1">
</head>
<body>
<div class="row"></div>
</body>
</html>
```
Aşağıda verilen boyutlar Grid sistemi için gerekli boyutlardır ve büyüklüklerin farklı olmasının sebebi günümüzün cihazla çözünürlüklere sahip olmasıdır.
#### Ekstra Küçük Mobil Cihazlar İçinGerekli Çözünürlük
768px'in altında olan boyutlardir.
Bu boyutun sınıfı yani Class'ı: .col-x8-
Container boyutu: Burada otomatik yapılandırma olduğu için ek bir boyuta gerek duyulmamaktadır.
Sütun genişliği: Otomatik yapılandırıldığı için genişliğe gerek yoktur.
#### Küçük Boyutlu Cihazlar ve Tabletler için Gerekli Çözünürlük
**768p×** dahil olmak üzere ve bundan daha büyük olan boyutlardır.
**Bu boyutun sınıfı:** .col-sm-
**Container boyutu:** 750px
**Sütun genişıiği:** 60px
#### Orta Boyutlu Cihazlar ve Masaüstü Cihazlar İçin Gerekli Çözünürlük
**992p×** dahil olmak üzere ve bundan daha büyük olan boyutlardır.
**Bu boyutun sınıfı:** .col-md-
**Container boyutu:** 970px
**Sütun genişıiği:** 78px
Büyük Çözünürlük ve HD, Retina Ekrana Sahip Cihazlar için Gerekli Çözünürlük
**1200p× dahil olmak üzere ve bundan daha büyük olan boyutlardir.
**Bu boyutun sınıfı:** .col-lg-
**Container boyutu:** 1170px
**Sütun genişliği:** 95px
Bu boyutlar temel kullanım için gerekli olan boyutlardır ve tabi ki bunların dışında diğer başlıklar etrafında column ve container yapısı daha da ilerıeyecektir.
Özet geçmek gerekirse, bu grid yapısı ve oranlanmış çözünürıükler sayesinde mobil uyumluluk ve tüm tarayıcılara uyumluluk sağlanmaktadır. Ayrıca hazır Bootstrap kullanacaksanız bunları çok detaylı olarak bilmenize gerek yok. Bunun yerine oluşumların nasıl çıktılar verdiklerine göre prjelerinizi hazırlayabilirsiniz.
### Yatay (Horizontal) Grid Sistemi
Bootstrap ile gelen yatay grid sistemi sayesinde, div içi div kuralı uygulayarak ana div'in boyutuna göre boyutlandırma yapabilirsiniz. Bu sayede oranlanmış çözünülürlük ile cihazlara göre ölçeklendirme yapabilirsiniz.
İlk olarak bu kısımda "div" için kullanılacak kodları vermek istiyorum ve ardından bunların ne tür çıktılar verdiğini resimler ile göreceğiz.
Yatay olan "div" kodlarını şu şekilde sıralayabiliriz:
```
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Yatay Grid Sistemi</title>
<!-- Bootstrap Dosyaları -->
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="col-md-1">Deneme Deneme</div>
<div class="col-md-1">Deneme Deneme</div>
<div class="col-md-1">Deneme Deneme</div>
<!-- Yan yana gelen ve bitişik olan kısım "col-md-1" kısmıdır. -->
</div>
<div class="container">
<div class="col-md-4">Deneme Deneme</div>
<div class="col-md-4">Deneme Deneme</div>
<div class="col-md-4">Deneme Deneme</div>
<!-- Geniş olarak birbirinden ayrılmış kısım "col-md-4 kısmıdır." -->
</div>
<div class="container">
<div class="col-md-6">Deneme Deneme</div>
<div class="col-md-6">Deneme Deneme</div>
<!-- En geniş aralık mesafesine sahip kısım "col-md-6 kısmıdır." -->
</div>
<div class="container">
<div class="col-md-8">Deneme Deneme</div>
<div class="col-md-8">Deneme Deneme</div>
<!-- Alt alta sıralanmış kısım "col-md-8" kısmıdır -->
</div>
</body>
</html>
```
Şimdi resimde görüldüğü gibi çıktıları ekrana yansıyacaktır.
Bu kodların ne işe yaradığım özetlemek gerekirse, bu kodlar sayesinde öğe yerleşimlerinin nasıl yapılacağını "div" elementlerini kullanarak sağlayabilirsiniz.
### Fluid Grid Sistemi
Bir diğer grid sistemi olan "Fluid" genellikle tam boyutlu yani full-screen olarak isimlendirilen web çalışmaları için kullanılır. "Box" tarzı tasarım yapmayacak tasarımcılar bu sistemi kullanarak daha başarılı tasarımlar yapabilirler.
Kullanımı:
```
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale-1">
</head>
<body>
<div class="container-fluid"> </div>
</body>
</html>
```
Açıklama olarak yapılacak pek fazla bir şey bulunmuyor, çünkü; Fluid sadece tam boyutıu tasarımlar için yapılmış bir grid sistemidir ve ek bir kullanım metodu bulunmamaktadır. Bu kodu tek başına tanımlayarak kolaylıkla kullanabilirsiniz.
<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@enderman/bootstrap-a-giris-2">Utopian.io - Rewarding Open Source Contributors</a></em><hr/>