Grid System for Mobile and Desktop Devices
We talked about Bootstrap's full support for mobile devices, and nowadays webpages have a lot of room to be accessed from mobile phones and tablets, and that's why it's available, so you can use Bootstrap to make this access easier.
Thanks to the Grid system for mobile devices, the position of items will be positioned in accordance with mobile devices.
Mobil Cihazlar ve Masaüstü Cihazlar için Grid Sistemi
Bootstrap'ın mobil cihazlara tamamıyla destek verdiğinden bahsetmiştik ve artık günümüzde web sayfaları mobil telefon ve tablet cihazlardan erişime açık olması ve bunun kullanılabilir olması oldukça büyük bir yer kaplıyor, işte bu yüzden Bootstrap kullanarak bu erişimi daha kolay bir şekilde yapılmasını sağlayabilirsiniz.
Mobil cihazlar için gelen Grid sistemi sayesinde, öğelerin konumu mobil cihazlara uyumlu olarak konumlandırılacaktır.
Kullanacağımız mobil grid kodları ise aşağıdaki gibidir:
<div class="col-x5-6 col-md-4">Deneme</div>
<div class="col-x5-12 col-md-8">İçerik</div>
Bu iki kod yarım ve tam genişlikte olan çalışmalar için kullanılacak mobil ve masaüstü cihazlar için geçerli olan kod bloğudur.
<div class="col-x8-6 col-md-4">Deneme</div>
<div class="col-x5-6 col-md-4">Deneme</div>
<div class="col-x8-6 col-md-4">Deneme</div>
Bu üç satır kod ise %50 oranında mobil cihazlara, %33.3'lük oranla ise masaüstü cihazlara oranlama yapar.
<div class="col-xs-6">Mobil & Masaüstü</div>
Bu kod sayesinde her zaman %50 oranından daha büyük bir oranla masaüstü ve mobil cihazlara oranlama yapılabilir.
Ayrıca bunların "row" içinde kullanılması daha verimli sonuç verecektir.
Aşağıdaki resimde bunların ekrana nasıl çıktı verdiğini görebilirsiniz.
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body style="padding: 50px;">
<div class="row">
<div class="col-xs-6 col-md-4">Deneme col-xs-6 col-md-4</div>
<div class="col-xs-12 col-md-8">İçerik col-xs-12 col-md-8</div>
<div class="col-xs-6 col-md-4">Deneme col-xs-6 col-md-4</div>
<div class="col-xs-6 col-md-4">Deneme col-xs-6 col-md-4</div>
<div class="col-xs-6 col-md-4">Deneme col-xs-6 col-md-4</div>
<div class="col-xs-6">Mobil & Masaüstü col-xs-6</div>
</div>
</body>
</html>
Col-sm- ile Mobil, Tablet, Masaüstü Uyumluluğu
Bir önceki sayfada mobil ve masaüstü cihazlar için uyumluluktan bahsetmiştik ve birçok kod bıoğunda "col-sm" ile başlayan kodlar gözünüze takılmış olabilir. Bu kodlar nereden geliyor diyecek olursanız; bunlar Bootstrap'in bize sunduğu CSS kütüphanesinden gelmektedir ve "col-sm" sayesinde daha dinamik sayfalar oluşur ve aksi bir durumda gelebilecek hataları minimuma indirger.
Diğer sayfadan alıştığımız gibi kodların farklı pozisyon durumları bulunuyor.
Orantı için:
<div class="container-fıuid">
<div class="co1-XS-12 co1-5-6 co1-md-8">Uzun Div</div>
Bu kod en uzun genişliğe sahip kod'dur ve %60'lık alan kaplamaktadır.
<div class="col-x6-6 co1-md-4">Kısa Div</div>
Bu kodun genişliği ise daha kısadır ve %40'Iık alan kaplamaktadır. Kodlar uygulandığında aşağıdaki gibi olacaktır:
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body style="padding: 50px;">
<div class="container-fıuid">
<div class="co1-XS-12 co1-5-6 co1-md-8">Uzun Div</div>
<div class="col-x6-6 co1-md-4">Kısa Div</div>
</div>
</body>
</html>
Responsive İçin Sütun Resetleme
İlk olarak responsive mantığı ile tasarım yapılacak ise sütunları, bir kaç kod ile kolayca resetleyebiliriz, bu sayede görünüm diğer etmenlerden etkilenmeyecektir. Bu resetleme olmaz ise, boyutlarda sorun çıkar ve elementlerin uzunluğu veya genişliği birbirinden farklı olabilir.
Resetlemek için ilk etapta her zaman yardımcımız olan "row" elementini "div" ile kullanmamız gerekiyor. Row'u her yerde kullanabiliriz. Çünkü row tasarımlara oldukça duyarlı bir biçimde oluşturulmuştur. Bununla birlikte "container" sınıfını da kullanabilirsiniz.
Gerekli olan kodlarımız ise şu şekilde;
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Responsive Sütun Resetleme</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="clearfix visible-xs"></div>
<div class="colxs-6 col-sm-3">Deneme İçerik Buraya Gelecektir</div>
<div class="colxs-6 col-sm-3">Deneme İçerik Buraya Gelecektir</div>
<div class="colxs-6 col-sm-3">Deneme İçerik Buraya Gelecektir</div>
</div>
</body>
</html>
Resimde görüıdüğü gibi üç bileşen halinde ekrana çıktısı geldi ve bu kod genelde blog tasarımı yapanlar için oldukça başarılı bir kod'dur. İlerleyen kısımlarda diğer elementlerle birlikte tasarımlar daha da şekillenecektir.
Farklı Konumda Olan Sütunlar
Bootstrap sayesinde kolayca HTML kodları ile oynama yaparak farklı konumlarda olan sütunlar oluşturabilirsiniz. Bu sayede CSS'de konumlandırma yapmadan HTML ile işlemlerinizi daha hızlı hale getirebilirsiniz. Ayrıca Bootstrap'in konumlandırma kodlarını kullanarak daha uyumlu ve sorun çıkarmayan tasarımlar oluşturmuş olacaksınız.
Kodlarımız aşağıdaki gibidir:
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Farklı Konumda Olan Sütunlar</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="col-md-4 col-md-offset-6">Deneme İçerik</div>
<div class="col-md-6 col-md-offset-4">Deneme İçerik</div>
</body>
</html>
<div class="col-md-4 col-md-offset-6">Deneme İçerik</div>
Yukarıda bulunan kodun ilk kısmı olan "col-md-4" kısmını hatırlıyorsunuzdur. Bu kod bloğunda "offset" sınıfı sayesinde taşıma işlemi yaptık. Yani; "offset" ile istediğiniz gibi sütun taşıma işlemlerinizi yapabilirsiniz.
<div class="col-md-6 col-md-offset-4">Deneme İçerik</div>
Aynı şekilde farklı col-md'ler üzerinde de "offset" yapabilirsiniz.
Kodlarımızın ekran görüntüsü ise şu şekildedir:
Artık bu sayede CSS ile konumlandırma yapmak yerine, "offset" değerleri ile oynayarak kolayca konumlandırma yapabileceğimizi görmüş olduk.
Ters col-md
Birçok örnekte; "col-md" ile yapılan kısımlarda sol kısmın daha geniş sağ kısmın ise daha kısa olduğunu görmüştük. Bu sefer ise, tam tersinin nasıl yapılabileceğini öğreneceğiz. Bununla beraber bir diğer sayfada "offset" ile kolayca ayarlama yapmıştık. Burada da, buna benzer bir yapı olan "PUSH" ve "pull" yapılarına değineceğiz.
Gerekli olan kodlarımız şu şekilde:
<!doctype html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>Ters Col-Md</title>
(html comment removed: Bootstrap Dosyaları )
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="col-md-9 col-md-push-11">Deneme - Deneme - Deneme - Deneme - Deneme - Deneme - Deneme</div>
<div class="col-md-3 col-md-pull-8">Denemedir</div>
</div>
</body>
</html>
<div class="col-md-9 col-md-push-11">Deneme - Deneme - Deneme - Deneme - Deneme - Deneme - Deneme</div>
11 sayisı sağ tarafa kaymayı etkiler. 11 değerini ne kadar büyütürseniz sağ tarafa o kadar kayar. push ile sayfaya kayma yapılır.
<div class="col-md-3 col-md-pull-8">Denemedir</div>
8 sayısı Push değerine yakınlaşmak için kullanılır. Sayfaya herhangi bir kayma etkisi yapmaz onun yerine üstteki "div" elementine kayma yapmaktadır.
Github: https://github.com/twbs/bootstrap
Posted on Utopian.io - Rewarding Open Source Contributors
Your contribution cannot be approved yet. See the Utopian Rules. Please edit your contribution to reapply for approval.
You may edit your post here, as shown below:
You can contact us on Discord.
[utopian-moderator]
Edited. Please check again
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @enderman I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x