Notes
Notes - notes.io |
Bootstrap, Kurduğumuz web sitesini farklı ekran boyutlarına uyarlayabilmek için (tablet, telefon, bilgisayar vb. ) kullanılan bir framework’tür. Tüm cihazlara uygun tasarıma “responsive web design” denilmektedir.
Bootsrap’ın diğer faydaları ise bir web sitesini şekillendirmek için gereken zamanı kısaltmaya, öğeleri düzenlemenin karmaşıklığını basitleştirmeye ve birden çok tarayıcıda (Chrome, Safari, Firefox, Internet Explorer, Opera, Yandex Browser gibi) çalışmaya yarar. Bunu yapmak ise sadece birkaç satır kodu, çalışmamıza eklemek kadar basit!
1. BOOTSTRAP’A GİRİŞ
HTML kodumuza aşağıdaki kodu <head>..</head> etiketinin arasına kopyalayıp yapıştırmalısın.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
Ardından <body>…</body> etiketinde </body> kapanış elementinden hemen önce aşağıdaki kodu kopyalayıp yapıştırmalısınız.
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Böylece Boostrap framework’ünüz kullanımınız için hazır!
2. BOOTSTRAP GRID SISTEMİ
Bootstrap, container-row-column sistemini kullanarak websitesi tasarımını basitleştirir. Aşağıdaki görselde belirtildiği gibi sayfayı iç içe küçük bölümlere bölerek, bileşenleri daha doğru ve rahat yerleştirmemizi sağlar.
Örneğin bir container içerisine 2 adet row sınıfına sahip div blok koyarsak, alt alta iki blok elde ederiz. Ya da bir row içerisine iki adet col sınıfına ait blok koyarsak yan yana iki blok elde edebiliriz. CSS ise bunu div bloklarının sınıf tanımına float etiketi ile yapabiliyorduk ancak bu zor ve zahmetli bir iş. Bootstrap bize aşağıdaki gibi hızlıca blokları yerleştirebilme fırsatını sunuyor.
+++++++++++ 0_8t9rQYbeMH-27v4w.png buraya
<div class="container">
<div class="row">
<div class="col">
<!-- A column inside a row inside a container! -->
</div>
<div class="col">
<!-- A column inside a row inside a container! -->
</div>
</div>
Bu kodu çalıştırdığımızda aşağıdaki gibi bir web sayfası göreceğiz.
+++++++++++++ 1_HsoNTJ2C7lf_gp60ZSfkLQ.png buraya
3. GRID SİSTEMİNİN CSS ÖZELLİKLERİNİ AYARLAMA
Görüldüğü gibi iki adet col isimli sınıf yan yana yer alıyor. Şimdi burada Bootsrap’ın diğer güzel bir özelliği devreye giriyor. Bootstrap açık kaynak kodlu olduğu için; blokların renkleri, sınır çizgileri vb. CSS özellikleri de kolayca güncellenebiliyor. Bunu üç farklı yöntemle yapabiliriz.
Kendi CSS dosyamızı yaratıp, ana dosyamızın içerisine linkleriz. Bu css dosyasında Bootstrap’tan çektiğimiz aynı isimli container, row ve col isimli sınıfları oluşturarak kendi istediğimiz özellikleri aynı isimli sınıflar üzerinde belirtebiliriz. Kısacası Bootstrap’ın sınıflarına overwrite yaparız.
İkinci yöntem olarak ise CSS dosyamızı yine yaratırız ancak bu sefer IDler tanımlayıp bu IDlere istenilen özellikleri veririz. Bunun kötü yanı aynı ise farklı div blokları aynı ID’ye sahip olamaz! Yani aynı özellik için bir sürü ID yaratmak gerekiyor! Çok kullanışlı bir yöntem değil.
Son olarak HTML kodlarımızda div bloklarının yanına style tanımlayarak bunu yine yapabiliriz. Örneğin <div class= “row” style=”background-color:powderblue;”> şeklinde yine özellik atama işlemini yapabiliriz.
Biz birinci yöntemi uygulayalım. Hemen style.css isimli bir css dosyası yaratalım ve container, row, col classlarının özelliklerini belirtelim. Bu css dosyasını ana html dosyasında <link rel=”stylesheet” href=”style.css” type=”text/css”> etiketi ile çekmeyi unutmayalım. Böylece aşağıdaki resimde görüldüğü gibi bu sınıflarımıza CSS özelliklerini tanımlamış oluruz.
.container {
background-color: orange;
border: 5px solid red;
padding: 10px;
}
.row {
background-color: yellow;
border: 5px solid black;
padding: 10px;
}
.col{
background-color: green;
border: 5px solid pink;
padding: 10px;
}
++++++++++++++++ 1_5qxAiKgAfJeN2rvowYCSwA.png buraya
İki row, İkinci row da 3 col tanımlarsak da aşağıdaki gibi olur. Şimdi tarayıcı ekranını büyütüp küçültün ve her ekran boyutuna göre blokların boyutlarının nasıl değiştiğini gözlemleyin. İşte bu bootstrap’ın responsive yapıyı sağlamasından kaynaklı!
+++++++++++++++++ 1_j17eeBR6XXfXkAzEtHB9WA.png buraya
Birincisi sadece class= “container” olarak tanımlanmıştır. Container’ın bütün ekranı kaplamasını istiyorsak class= “container-fluid” şeklinde tanımlanmalıdır. İkinci blok ise bu şekilde tanımlanmıştır.
++++++++++++++ 1_2ZoobBryvEkbHOupUDI2Ow.png buraya
4. BOOTSTRAP İLE GENİŞLİK AYARLAMA
Şimdi gelelim Bootstrap’ın diğer önemli özelliklerine…
Container en alt katmandı. Bunun içerisine row sınıfına ait satırlar ekleyebiliyordur. Row satırlarının içerisine ise col sınıfına ait sütunlar ekleyebiliyorduk. Örneğin iki adet col eklerse o satırı iki eşit sütuna bölebiliyoruz. Bootstrap’ın bu grid yapısında 1 satırı en fazla 12 sütuna/parçaya bölebiliyoruz.
+++++++++++++++++++ 1_Nt29sDjU9kWLwKKsUgCVlA.png burays
Şimdi diyelim ki iki col var. Biz bunlara hiçbir tanımlama yapmazsak ekranda genişlikleri iki eşit parça olarak görülecekler. Ancak biz birinci sütunun genişliği 1x ise, ikinci sütunun genişliğini 2x olarak almak istiyoruz. Yukarıda bir satırı 12 eşit parçaya bölebileceğimizi söylemiştik. Bu durumda birinci sütün 4, ikinci sütun ise 8 birim olmalı ki istenilen oran sağlansın.
Yine Bootstrap özelliğinden yararlanarak bunu hızlıca gerçekleştirebiliriz. Tek yapmamız geren birinci sütun için col-4 sınıfını, ikinci sütun için ise col-8 sınıfını tanımlamamız gerekiyor. CSS özelliklerini getirmek için .col-4 ve .col-8 isim iki sınıf yaratarak istenilen özellikleri belirtmemiz gerekiyor.
<div class="container-fluid">
<div class="row">
<div class="col-4"> First Column </div>
<div class="col-8"> Second Column </div>
</div>
</div>
++++++++++++++++++++ 1_6IglM3DR7KTBTkPGC5j_OQ.png burata
Sütunların genişliği kaç adet kullanıldığına bağlı olarak sayfanın genişliği kadardı. Biz bir satırın içerisindeki elemanın boyutu kadar olmasını istiyor olabiliriz. Bu durumda bu elemanı class= “col-auto” şeklinde tanımlamamız gerekir. Aşağıdaki resimde birinci satırın sütunu auto olarak tanımlandığı için boyutu içerisinde bulunan eleman kadar olmuştur. İkinci satırın sütunu ise auto tanımlanmadığı için içerisindeki elemanın boyutundan bağımsızdır.
<div class="col-auto"> <p>This content determines the width of the parent column</p> </div>
++++++++++++++++ 1_22RXTo_T2TGAspXPLvfWLA.png burRa
5. BOOTSTRAP İLE SAYFAYA GÖRE GENİŞLİK AYARLAMA
Bu özelliği bir örnek üzerinden anlatalım. Sütunu class= “col-6” şeklinde ayarladığımızda tarayıcı ekranını büyütsek de küçültsek de bu sütun her zaman genişliğin yarısını işgal edecektir.
<div class="container">
<div class="row">
<div class="col-6">
<h3>Take advantage of breakpoints!</h3>
<p>This column will have different widths based on screen size</p>
</div>
</div>
++++++++++++ 1__4c1L-tEmxwviKZb7V_vCA.png burata
Ancak biz Bootstrap’ın başka bir özelliğine göz atalım. Bu sütunu class= “col-6 col-sm-12” şeklinde sınıflandıralım. Yani extra small ekran boyutundayken genişliğin yarısını kapsarken, small ekran boyutu ve üzeri için (medium, large, extra large) ekran boyutunun tamamını kaplayacaktır.
Bu özellik ile ekran boyutuna göre sütunun kaplayacağı genişlik kolayca ayarlanabilir.
<div class="container">
<div class="row">
<div class="col-6 col-sm-12">
<h3>Take advantage of breakpoints!</h3>
<p>This column will have different widths based on screen size</p>
</div>
</div>
+++++++++++++++++++ 1_SLdqQQE4H7ORETOVzacONA.png burata
Kısacası Bootstrap responsive design yapmamızı sağlayan yani değişen ekran boyutlarına uygun web siteleri inşa etmemize yarayan bunun yanında grid sistemi ile ekranı sütun ve satırlara bölerek kolayca istediğimiz gibi düzenlememize yardımcı olan kullanışlı bir frameworktür.
|
|
Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 12 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
