Bootstrap Hakkında Birkaç Soru

Merhaba arkadaşlar. Bootstrap hakkında birkaç soru sormak istiyorum.

1) Normalize.css kullanmak zorundamıyız, mutlaka kullanılmalı mı, Reset.css'lerden farkı nedir? Reset.css kullanabilir miyim? Bootstrap.css dosyasından önce mi sayfaya dahil etmeliyim sonra mı?

2) JavaScript dosyaları neden sayfa sonu sayfaya dahil ediliyor?

3) Aşağıdaki script dosyalarını dahil etmemiz için mutlaka başında https olmalı mı yoksa kendi dizinimize dosyaları indirip oradan dahil edebilir miyiz? Bu dosyaların görevi nedir?

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

 

1- Normalize.css ve Reset.css tarayıcı tarafından html elementlerine verilen varsayılan değerleri sıfırlıyor. Bootstrap zaten Normalize.css kullanıyor. Bootstrap kullanılan projelerde html elementleri için herhangi bir sıfırlama kodu kullanılmasına gerek yoktur. 

2- Tarayıcılar, web sayfalarını yorumlarken sayfayı yukarıdan aşağıya doğru yorumlar. Script dosyaları üst kısımda tanımlanırsa tarayıcı script dosyalarını yorumlayana kadar bir sonraki satıra geçmez ve bu yorumlama işlemi bitene kadar da ekran bembeyaz kalır. Bu da web sayfaları için bir dezavantaj. Konu ile ilgili Fatih Hayrioğlu'nun "HTML Dokümanında Javascript Dosyalarını Nereye Koymalıyız?"  makalesine ve Sonsuz Döngü'de bulunan "Tarayıcılar Nasıl Çalışır - Modern web tarayıcıların perde arkası" makalesine göz atabilirsin. 

3- Internet Explorer, CSS3'ün bazı özelliklerini desteklemiyor. Bootstrap CSS3 teknolojisini kullandığı için hâliyle Bootstrap'in de Internet Explorer desteği zayıflıyor. Bu sorunu çözmek için html5shiv ve respond.js kullanılıyor. Bu dosyaları indirerek de sayfanıza dahil edebilirsiniz.

Teşekkür ederim cevaplarınız için Nurullah Bey.

Aşağıdaki şekilde bir şablon oluşturdum. Ancak col class'larının padding'leri çok fazla.

- Bunları sıfırlayınca resimde gördüğünüz gibi colonlar birbirine yapışıyor?
- Sıfırlamadan sonra colonları aralarına 10px margin verebilir miyim? Yada bunun başka bir yolu var mı?

- Row class'ının margin değerini sıfırlamalı mıyım?


 

<div class="container">
  <div class="row" style="">
	<div class="col-lg-3 col-md-3" style="padding:0; border: 1px solid blue;">
	  <div class="panel panel-default">
		<div class="panel-body">Temel panel örneği</div>
	  </div>
	</div>

	<div class="col-lg-6 col-md-6" style="padding:0;border: 1px solid blue;">
	  <div class="panel panel-default">
        <div class="panel-body">Temel panel örneği</div>
	  </div>
	</div>

	<div class="col-lg-3 col-md-3" style="padding:0;border: 1px solid blue;">
	  <div class="panel panel-default">
	    <div class="panel-body">Temel panel örneği</div>
	  </div>
	</div>
  </div>
</div>

 

Bootstrap varsayılan olarak kolonlara 15px'lik sağ ve sol boşlukları veriyor. Row sınıfı ise bu kolonların kapsayıcısı olup sağ ve sola -15px değeri vererek ilk ve son kolonun fazla olan boşluklarını sıfırlıyor. Kolonun sağ ve sol boşlukları değiştirildiği zaman .row sınıfının da sağ ve sol değerinin değiştirilmesi gerekiyor. Örn;

.row,
.form-horizontal .form-group {
    margin-left: -5px;
    margin-right: -5px;
}
[class^="col-"],
.container,
.container-fluid,
.navbar-collapse,
.panel > .table caption,
.panel > .table-responsive > .table caption,
.panel > .panel-collapse > .table caption {
    padding-left: 5px;
    padding-right: 5px;
}

 

Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git