Bootstrap'ta temel CSS nasıl kullanılır?

Web tasarımı ile çalışmak söz konusu olduğunda en karmaşık şeylerden biri, tarayıcılar arasındaki ince farkların üstesinden gelmektir, ancak teoride her tarayıcının standartlara uyması gerekir ve çoğu durumda öyledir, çok ince küçük farklılıklar olabilir. Tasarımımızın uygulanması zor.

varlığından önce Önyükleme adlı bir dosya reset.cssBunda yapılan dolgular, kenar boşlukları, varsayılan yazı tipi vb. gibi temel ve anahtar öğelerin tüm değerlerinin açıkça tanımlanmasıydı. Bununla, özel stillerimizde değiştirmediğimiz öğeleri tanımlarken tarayıcının istediğini yapmasını engelledik.

Şu günlerde Önyükleme bizim için bu ayrıntılarla ilgilenir, bu, adlı bir dosya ile sağlanır. bootstrap.css halk arasında temel dosya olarak bilinir.

GereksinimlerBu eğitimdeki örnekleri ve alıştırmaları uygulayabilmek için Önyükleme önceden indirilmiş veya başarısız olması durumunda, kitaplıkları doğrudan bilgisayarınızdan kullanabilmek için bir İnternet bağlantısı CDN. Gibi modern bir tarayıcıya ihtiyacımız var Krom veya Firefox en son sürümlerinde ve sonunda şöyle bir metin düzenleyiciye ihtiyacımız var Yüce metin veya NotePad ++ HTML içeriğini daha kolay bir şekilde oluşturmak için gedit veya notepad dilersek amacımıza hizmet eder.

Başlıklar
Bir web sitesinde en çok dikkat çeken şeylerden biri içeriğin başlıkları ve alt başlıklarıdır, elbette bu unsurların işlevi, CSS tabanı Önyükleme bunu ele almanın ilginç bir yolu var, her şeyden önce birkaç boyutu ve eleman için tanımlanmış bir yazı tipi var H 1'den 6'ya kadar herhangi bir numaralandırmasında, ancak aynı stilleri bir div ya da henüz açıklık.

Bir başka ilginç şey de, öğeyi kullanabilmemizdir. küçük başlığın bir bölümünün boyutunu küçültmek, ancak ilgili sınıfı kullanan öğe veya öğeyle ilgili oranı korumak.

Bununla basitçe, birden fazla tarayıcımız olduğunda tasarımımızın homojenliği korunur, bu nedenle başlıkların farklı görünmesi gerekmez, örneğin, Safari ile Firefox, her iki tarayıcının da varsayılan olarak farklı yazı tipleriyle çalıştığını bildiğimizde.

Öğrendiklerini uygulamaya koymak
Başlıkların bir listesini yapacağımız küçük bir sayfa oluşturacağız, iki eğimi üst üste yerleştireceğiz, böylece temel dosya sayesinde farklılıkların artık nasıl olmadığını görebilelim. Önyükleme. Önce koda bakalım sonra tarayıcımızda nasıl göründüğünü göreceğiz.

 Temel Önyükleme dosyasını kullanmaBu, kaynak küçük olan H1 sınıfına sahip bir div'dir.
Bu bir H4 başlığı, küçük yazı tipi
Bu, kaynak küçük olan H4 sınıfına sahip bir div'dir.

Burada başlık olarak kullanacağımız farklı öğeleri gövde içinde nasıl yaptığımızı görüyoruz, ayrıca çok ilginç efektler elde etmek için onu başlıklarla birleştirebilmemiz için öğenin nasıl çalıştığını gösteriyoruz. Bazı eklemek için ek bir stil de ekliyoruz dolgular ek, böylece aşağıdaki resimde göreceğimiz gibi bir sonuç elde edebiliriz:

BÜYÜT

paragraflar
Uygulamamızın başlıklarıyla bir okuyucunun veya kullanıcının dikkatini çektiğimizde, genellikle tüketilebilecek bir içeriğe ihtiyacımız vardır, normalde bir paragrafa yerleştirdiğimiz bir metindir, ancak bir resim, ses veya video.

Paragrafa geri dönersek, zaten öğe

temel CSS tarafından önceden tanımlanmış bir stil getiriyor, ancak bu taban bize aynı zamanda adı verilen özel bir paragraf türü de sunuyor. öncülük etmek, Bu sınıfı bir paragrafa eklerken, boyutu artırıldığından ve yazı tiplerinin bazı özellikleri değiştirildiğinden, onu benzerlerinden hemen öne çıkaracağız.

Az önce açıkladığımız bu işlemin nasıl çalıştığını aşağıdaki kodda görelim, bu örnekte ilkinin sınıfa sahip olacağı iki paragraf oluşturacağız. öncülük etmek, bu şekilde nasıl ön plana çıkacağını göreceğiz, tabi tüm bu işler elimizde ise Önyükleme projemizde kodumuzu görelim:

 Temel Önyükleme dosyasını kullanma
Bacon ipsum ağrı amet in Laboris magna ullamco, baget ağrısı boudin eiusmod andouille leberkas domuz göbeği egzersizi ex. Sığır kaburgaları magna konservesi sığır eti olay kimliği. Kevin biltong kuyruğunda. Fileto mignon hindi quis, incik geyik eti ullamco sarsıntılı, voluptate olmayan domuz filetosu.
Bacon ipsum ağrı amet in Laboris magna ullamco, baget ağrısı boudin eiusmod andouille leberkas domuz göbeği egzersizi ex. Sığır kaburgaları magna konservesi sığır eti olay kimliği. Kevin kuyruk biltong'da. Fileto mignon hindi quis, incik geyik eti ullamco sarsıntılı, voluptate olmayan domuz filetosu.

Örneğimizi çalıştıralım ve tarayıcımızda nasıl göründüğüne bakalım:

BÜYÜT

Metni hizala
Aynı zamanda çok önemli olan şeylerden biri de metnin hizalanmasıdır, çünkü bazen metnimizin hizalanmasına, sağa, merkeze veya zorla solda olmasına ihtiyaç duyarız, ancak CSS'de eşdeğerleri vardır. bunun için bir sınıf bize çok fazla iş kazandırır ve ayrıca koda tutarlılık kazandırmamıza yardımcı olur.

Aşağıdaki örnekte, bu sınıfların her birini farklı öğelere nasıl uyguladığımızı göreceğiz ve kodumuzun daha iyi okunabilir olması için tüm öğeleri paragraflar haline getireceğiz. Kodu görelim:

 Temel Önyükleme dosyasını kullanma
Bacon ipsum dolor amet in Laboris magna ullamco, baget dolor boudin eiusmod andouille
leberkas domuz göbeği egzersizi ex. Sığır kaburgaları magna konservesi sığır eti olay kimliği.
leberkas domuz göbeği egzersizi ex. Sığır kaburgaları magna konservesi sığır eti olay kimliği. leberkas domuz göbeği egzersizi ex. Sığır kaburgaları magna konservesi sığır eti olay kimliği. Kevin sağrı
kuyruk biltong'da. Fileto mignon hindi quis, incik geyik eti ullamco sarsıntılı, voluptate olmayan domuz filetosu.

Şimdi tarayıcımızda her sınıfın nasıl davrandığını görelim. savunmakçok ince olduğu için etkisi çok fazla görülmeyebilir.

BÜYÜT

Listeler
Listeler genellikle gereklidir ve yalnızca bir şeyleri listelemek için değil, birçok kez tasarımın hayati parçalarıdır. Önyükleme onları daha önce gördüğümüz öğeler gibi şeffaf bir şekilde ele alır, listeler, listeler tarafından önceden tanımlanmış bir stille gelir. CSS temel, ancak birkaç çeşidimiz var, örneğin madde işaretlerinden kaçınmak için stilleri olmayan listeleme ve Çizgide, ikincisi listeyi yatay hale getirir.

Ardından, kodumuzda kullanabilmemiz için aşağıdaki kodda bu listelerin her birinin bir örneğini görelim:

 Temel Önyükleme dosyasını kullanma
Satır İçi Liste

İlk Eleman
İkinci Eleman
Üçüncü Eleman
Dördüncü Eleman
Beşinci Eleman

Stilsiz Listele

İlk Eleman
İkinci Eleman
Üçüncü Eleman
Dördüncü Eleman
Beşinci Eleman

Standart liste

İlk Eleman
İkinci Eleman
Üçüncü Eleman
Dördüncü Eleman
Beşinci Eleman

Şimdi, farklılıkların hemen fark edildiğini görebildiğimiz tarayıcımızda nasıl göründüğüne bakalım:

Bununla bu öğreticiyi bitiriyoruz, temel CSS'nin olduğunu gördük. Önyükleme Tanımlamadığımız veya özelleştirmediğimiz öğelerin doğrudan tarayıcıda belirli bir şekilde görünmesini sağlamak için bize standart bir temel sağlar ve böylece tarayıcıdan bağımsız olarak uygulamamız üzerinde tam kontrol sahibi olmamızı sağlar.