Bootstrap Nedir? 12’li Girid Yapısı

Gold

Furkan Kaya

ABONE OL

News

0 yorum

5,291 okunma

Okunuyor Bootstrap Nedir? 12’li Girid Yapısı

Bootstrap Nedir ?, Bootstrap Nasıl Kullanılır? ve Bootstrap’ ta Yazılması Gereken Bazı Kodlar Nelerdir? sorularını yanıtlayacağız umarım sizin için faydalı olur.

İçindekiler

Bootstrap Nedir?

Bootstrap nedir, ücretsiz olarak kullanabileceğiniz bir CSS kütüphane (framework)‘ üdür. Bootstrap, pc, tablet, telefon gibi teknoloji cihazlarında girdiğimiz herhangi bir web sitenin karşımıza çıkacak olan görüntüsünü mobil uyumlu hale gelmesini sağlayan yani kullandığınız cihaza göre farklılık göstermesini sağlayan bir framework – kütüphanedir .

Yani; Bootstrap ile yapılmış bir siteye girdiğinizde girdiğiniz websitesi kullanıcının kullandığı teknoloji cihazına göre nasıl görüneceğini, site ızgara sistemi ve site teması ayarlamaları gibi çok fonksiyonlu seçeneklerle hem kullanıcının gözüne hitap edecek bir çok tasarım göz önüne serilmekle beraber developer (yazılımcı) için de bir çok kolaylık sağlanmış oluyor. Kısaca Bootstrap, HTML5ve CSS3 ile yapılmış, hazır HTML ve CSS şablonları içermekle beraber JavaScript ve JQuery ile desteklenmiş bir açık kaynak kodlu bir kütüphanedir.

Bootstrap, Twitter tarafından geliştirilmekte olan bir uygulama olmakla beraber bir websitesi için tüm elementleri (form öğeleri, hazır menüler, etiketler, mobil uyumlu navigasyon barları, uyarı ve bilgi metinleri, sayfalandırma modülü, grafikler, iconlar, açılan menüler farklı özelliklere sahip butonlar, tablolar) içinde barındırarak esnek yapılı bir site tasarlama imkanı sağlıyor. Ayrıca https://getbootstrap.com/docs/4.1/getting-started/download/ linkinden Bootstrap‘ ı indirebilirsiniz.

Bootstrap Nasıl Kullanılır?

Bootstrap Kütüphanesi’ni projemize eklemek için iki yol bulunmaktadır. Bu yöntemlerden bir tanesi Bootstrap Download bölümünden kaynak dosyaları indirip proje dizinimize dahil etmek ve daha sonra sayfa içinden bu kodları ekleyerek çağırmak, bir diğer yöntem ise direkt olarak Bootstrap CDN üzerinden kaynak kodları projemize dahil ederek kullanmaktır. Bootstrap Nedir?

Bootstrap’ın derlenmiş CSS ve JS dosyalarının önbelleğe alınmış sürümlerini projenize eklemek için: BootstrapCDN

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Derlenmiş JavaScript kullanıyorsanız, jQuery ve Popper.js‘nin CDN sürümlerini eklemeyi unutmayın.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

Bootstrap CSS Yazımı

Bootstrap ile tüm cihazlar için ayrı ayrı özellikler sergileyen CSS kodları yazabiliriz. Bunu birer örnek ile açıklayacak olursak:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Yukarıdaki örnekte gördüğünüz gibi @media(min-width:1200px){ … } kod satırının içine yazılan CSS kodları en düşük değeri 1200px olan ekranlarda çalışacaktır(sadece en küçük 1200px).

+ Bootstrap CSS ile daha detaylı bilgi edinmek için tıklayın.

Bootstrap Izgara Sistemi

Bootstrap kütüphanesinin bizlere sunduğu bir diğer avantaj ise Izgara Sistemi (Grid system) ‘dir. Bu sistem ekranı 12’li sistem halinde bölmemize imkan sağlar. Yani 1/12 veya 2/6 + 2/6 veya 3/4 + 3/4 + 3/4 + 3/4 veya 2/6 + 4/3 + 4/3 vb. Izgara sistemi sayesinde HTML kısımları farklı boyutlarda ekranlarda farklı yerlerde konumlandırabiliriz.

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Bootstrap Grid System:

Yukarıdaki örnekte bulunan <strong>class=”col-md-1″</strong> tanımlaması HTML div’lerin 12’lik ızgara sisteminde 12 birimlik parçalar halinde durmasını sağlar. Burada dikkat edilmesi gereken col-md tanımlamasının orta ölçekli cihazlar için olduğudur. Ancak sadece tek başına kullanılırsa tüm cihazlarda aktif olur. Sitemizde yer alan div’lere farklı cihazlarda farklı davranışlarda bulunmasını söylemek için şu şekilde bir tanımlama yapılması gerekmektedir:

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Bugün sizlere Bootstrap Nedir? Bootstrap Nasıl Kullanılır? ve Yazılması Gereken Bazı Kodlar Nelerdir? sorularına elimizden geldiğince cevap vermeye çalıştık umarım bootstrap nedir başlıklı yazımız faydalı olmuştur.

Konu hakkında daha fazla bilgi almak istiyorsanız aşağıda bıraktığımız linklerden ulaşabilirsiniz 👇👇👇#EVDEKALIN (,) sağlıcakla. Bootstrap nedir? webodasi.com da hertürlü bilgiyi bulabilirsiniz.