Önyükleme 4 Yardımcı Programları

Önyükleme 4 Yardımcı Programları

Bootstrap 4, herhangi bir CSS kodu kullanmadan öğeleri hızlı bir şekilde biçimlendirmek için birçok yardımcı program/yardımcı sınıfa sahiptir.

Sınırlar

borderBir öğeye kenarlık eklemek veya kaldırmak için sınıfları kullanın :

Sınır rengi

Bağlamsal kenarlık renk sınıflarından herhangi biriyle kenarlığa bir renk ekleyin:

Sınır Yarıçapı

roundedSınıfları olan bir öğeye yuvarlatılmış köşeler ekleyin :

Float ve Clearfix

Bir öğeyi .float-rightsınıfla sağa veya ile sola kaydırın ve sınıfla .float-leftkayan noktaları temizleyin .clearfix:

Duyarlı Şamandıralar

Duyarlı kayan nokta sınıflarıyla ( .float-*-left|right- burada * sm(>=576px), md(>=768px), lg(>=992px) veya xl(>=1200px) ile ekran genişliğine bağlı olarak bir öğeyi sola veya sağa kaydırın):

Ortaya Hizala

Bir öğeyi .mx-autosınıfla ortalayın (sol kenar boşluğu ve sağ kenar boşluğu ekler: otomatik):

Genişlik

Bir öğenin genişliğini w-* sınıflarıyla ( .w-25, .w-50, .w-75, .w-100, .mw-100) ayarlayın:

Yükseklik

Bir öğenin yüksekliğini h-* sınıflarıyla ayarlayın ( .h-25, .h-50, .h-75, .h-100, .mh-100):

boşluk

Bootstrap 4, çok çeşitli duyarlı kenar boşluğu ve dolgu yardımcı program sınıflarına sahiptir. Tüm kesme noktaları için çalışırlar: xs(<=576px), sm(>=576px), md(>=768px), lg(>=992px) veya xl(>=1200px)):

Sınıflar şu biçimde kullanılır: {property}{sides}-{size}for xsand {property}{sides}-{breakpoint}-{size}for sm, md, lgve xl.

Mülkiyet şunlardan biridir:

• m- setlermargin
• p- setlerpadding

Taraflardan biri nerede :

• t- setler margin-topveyapadding-top
• b- setler margin-bottomveyapadding-bottom
• l- setler margin-leftveyapadding-left
• r- setler margin-rightveyapadding-right
• x- her ikisini de ayarlar padding-leftve padding-rightveya margin-leftvemargin-right
• y- her ikisini de ayarlar padding-topve padding-bottomveya margin-topvemargin-bottom
• boş - öğenin a marginveya paddingtüm 4 tarafını ayarlar

Boyut şunlardan biridir:

• 0- ayarlar marginveyapadding0
• 1- marginveya'ya ayarlar (yazı tipi boyutu 16 piksel ise 4 piksel)padding.25rem
• 2- marginveya paddingto'ya ayarlar .5rem(yazı tipi boyutu 16 piksel ise 8 piksel)
• 3- marginveya paddingto'ya ayarlar 1rem(yazı tipi boyutu 16 piksel ise 16 piksel)
• 4- marginveya paddingto'yu ayarlar 1.5rem(yazı tipi boyutu 16 piksel ise 24 piksel)
• 5margin- veya paddingto'yu ayarlar 3rem(yazı tipi boyutu 16 piksel ise 48 piksel)
• automargin- otomatik olarak ayarlar

Not: boyut önüne bir "n" ekleyerek kenar boşlukları negatif de olabilir :

• n1- marginolarak ayarlanır -.25rem(yazı tipi boyutu 16 piksel ise -4 piksel)
• n2- marginolarak ayarlanır -.5rem(yazı tipi boyutu 16 piksel ise -8 piksel)
• n3- marginolarak ayarlanır -1rem(yazı tipi boyutu 16 piksel ise -16 piksel)
• n4- marginolarak ayarlanır -1.5rem(yazı tipi boyutu 16 piksel ise -24 piksel)
• n5- marginolarak ayarlanır -3rem(yazı tipi boyutu 16 piksel ise -48 piksel)

Daha Fazla Boşluk Örneği

gölgeler

shadow-Bir öğeye gölge eklemek için sınıfları kullanın :

Dikey Hizalama

align-Öğelerin hizalamasını değiştirmek için sınıfları kullanın (yalnızca satır içi, satır içi blok, satır içi tablo ve tablo hücresi öğelerinde çalışır):

Duyarlı Gömmeler

Üst öğenin genişliğine göre duyarlı video veya slayt gösterisi yerleştirmeleri oluşturun.

.embed-responsive-itemHerhangi bir gömme öğeye (<iframe> veya <video> gibi) .embed-responsiveseçtiğiniz bir en boy oranıyla bir üst öğeye ekleyin :

görünürlük

Öğelerin görünürlüğünü kontrol etmek için .visibleveya sınıflarını kullanın . Not: Bu sınıflar, CSS görüntüleme değerini değiştirmez. Yalnızca veya eklerler :.invisiblevisibility:visiblevisibility:hidden

Konum

Herhangi bir öğeyi sabitlemek/sayfanın en üstünde.fixed-top kalmasını sağlamak için sınıfı kullanın :

Use the .fixed-bottom class to make any element fixed/stay at the bottom of the page:

Use the .sticky-top class to make any element fixed/stay at the top of the page when you scroll past it. Note: This class does not work in IE11 and earlier (will treat it as position:relative).

Close icon

Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the × symbol to create the actual icon (a better looking "x"). Also note that it floats right by default:

Screenreaders

Use the .sr-only class to hide an element on all devices, except screen readers:

Colors

As described in the Colors chapter, here is a list of all text and background color classes:

The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light:

Contextual text classes can also be used on links, which will add a darker hover color:

You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:

Background Colors

The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Note that background colors do not set the text color, so in some cases you'll want to use them together with a .text-* class.

Typography/Text Classes

As described in the Typography chapter, here is a list of all typography/text classes:

Block Elements

To make an element into a block element, add the .d-block class. Use any of the d-*-block classes to control WHEN the element should be a block element on a specific screen width:

Other Display Classes

Other display classes are also available:

Flex

Use .flex-* classes to control the layout with flexbox.

Read more about Bootstrap 4 Flex, in our next chapter.