Bootstrap - CSS'ye Genel Bakış

Bu bölüm, Bootstrap'in daha iyi, daha hızlı ve daha güçlü web geliştirme yaklaşımı dahil olmak üzere, Bootstrap altyapısının temel parçalarına genel bir bakış sağlar.

HTML5 belge türü

Bootstrap, HTML5 belge türünün kullanılmasını gerektiren belirli HTML öğelerini ve CSS özelliklerini kullanır. Bu nedenle, Bootstrap kullanan tüm projelerinizin başına HTML5 doctype için aşağıdaki kod parçasını ekleyin.

<!DOCTYPE html>
<html>
   ....
</html>

Önce Mobil

Bootstrap 3 piyasaya sürüldüğünden beri, Bootstrap önce mobil hale geldi. Bu, 'mobil ilk' stillerin ayrı dosyalarda değil, tüm kitaplıkta bulunabileceği anlamına gelir. Eklemeniz gerekirviewport meta tag için <head> öğesi, mobil cihazlarda düzgün işleme ve dokunmatik yakınlaştırmayı sağlamak için.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

width özelliği, aygıtın genişliğini kontrol eder. Cihaz genişliğine ayarlamak , çeşitli cihazlarda (cep telefonları, masaüstü bilgisayarlar, tabletler ...) doğru şekilde oluşturulmasını sağlar.
initial-scale = 1.0 , yüklendiğinde, web sayfanızın 1: 1 ölçekte görüntülenmesini ve kutudan herhangi bir yakınlaştırma uygulanmamasını sağlar.

Ekle user-scalable = no için contentaşağıda gösterildiği gibi mobil cihazlarda yakınlaştırma özelliklerini devre dışı bırakma özelliği. Kullanıcılar bu değişiklikle yalnızca kaydırabilir ve yakınlaştırma yapamaz ve sitenizin biraz daha yerel bir uygulama gibi hissetmesine neden olur.

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

Normalde maksimum ölçek = 1.0 , kullanıcı tarafından ölçeklenebilir = hayır ile birlikte kullanılır . Yukarıda belirtildiği gibiuser-scalable = no kullanıcılara daha çok yerel bir uygulama gibi bir deneyim sunabilir, bu nedenle Bootstrap bu özelliği kullanmanızı önermez.

Duyarlı Görüntüler

Bootstrap 3, bir sınıf ekleyerek görüntüleri duyarlı hale getirmenizi sağlar .img-responsive için <img>etiket. Bu sınıf geçerlidirmax-width: 100%; ve height: auto; görüntüye, böylece ana öğeye göre güzel bir şekilde ölçeklenebilir.

<img src = "..." class = "img-responsive" alt = "Responsive image">

Tipografi ve Bağlantılar

Bootstrap temel bir genel görüntü (arka plan), tipografi ve bağlantı stilleri ayarlar -

Basic Global display- Arka plan rengini ayarlar : #fff; üzerinde <body> elemanı.
Typography- Tipografik taban olarak @ font-family-base , @ font-size-base ve @ line-height-base özelliklerini kullanır.
Link styles- Genel bağlantı rengini öznitelik @ link- color aracılığıyla ayarlar ve yalnızca : hover üzerine bağlantı alt çizgilerini uygular .

LESS kodunu kullanmayı düşünüyorsanız, tüm bunları scaffolding.less içinde bulabilirsiniz .

Normalleştir

Bootstrap, tarayıcılar arası tutarlılık sağlamak için Normalize kullanır .

Normalize.css, CSS sıfırlamalarına modern, HTML5'e hazır bir alternatiftir. HTML öğelerinin varsayılan stilinde daha iyi tarayıcılar arası tutarlılık sağlayan küçük bir CSS dosyasıdır.

Konteynerler

Sınıfı kullan .container bir sayfanın içeriğini sarmak ve içeriği aşağıda gösterildiği gibi kolayca ortalamak için.

<div class = "container">
   ...
</div>

Bir göz atın .containerbootstrap.css dosyasındaki sınıf -

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

Dolgu ve sabit genişlikler nedeniyle kapsayıcıların varsayılan olarak yuvalanamayacağını unutmayın.

Bootstrap.css dosyasına bir göz atın -

@media (min-width: 768px) {
   .container {
      width: 750px;
   }
}

Burada, CSS'nin kapsayıcılar için medya sorguları olduğunu görebilirsiniz. width. Bu, duyarlılığın uygulanmasına yardımcı olur ve bu sınıflar içinde, ızgara sistemini düzgün bir şekilde oluşturmak için uygun şekilde değiştirilir.