Helpers

№ 5

Mentor

Clearfix -—————————————————————-

💡 Clearfix - quyidagi klass yordamida konteyner ichidagi suzuvchi

(floated) elementlarni to'g'ri joylashtirish mumkin

<div class="bg-info clearfix">

<button type="button" class="btn btn-secondary float-start">
Example Button floated left
</button>
<button type="button" class="btn btn-secondary float-end">
Example Button floated right
</button>
</div>

Coloured links -—————————————————————-

💡 Coloured links - quyidagi klasslar yordamida havolalarga ranglar

berish imkoniyati mavjud

Helpers 1
 <a href="#" class="link-primary">Primary link</a>
<a href="#" class="link-danger">Danger link</a>
<a href="#" class="link-warning">Warning link</a>

Ratios -—————————————————————-

💡 Ratios - quyidagi klasslar yordamida elementga nisbat o'lchamlari

berish imkoniyati mavjud. Odatda veb sahifaga joylanyotgan video,
rasm va shunga o'xshash kontentlarga o'lchov berishda ishlatilinadi

<div class="ratio ratio-16x9">

<iframe width="727" height="409" src="https://www.youtube.com/embed/_wdDzzYI9wk"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture"
allowfullscreen></iframe>
</div>

----------------------------------------------------------

<style>
.block {
display: inline-block;
width: 20rem;
}
</style>
-----------------
<div class="ratio ratio-1x1 bg-secondary block">
<div>1x1</div>
</div>
<div class="ratio ratio-4x3 bg-secondary block">
<div>4x3</div>

Helpers 2
 </div>
<div class="ratio ratio-16x9 bg-secondary block">
<div>16x9</div>
</div>
<div class="ratio ratio-21x9 bg-secondary block">
<div>21x9</div>
</div>

Position -—————————————————————-

💡 Position - quyidagi klasslar yordamida veb sahifadagi elementlarni

joylashuvini (position) o'zgartirish mumkin

<div class="fixed-top bg-secondary">Fixed top</div>

<div class="fixed-bottom bg-secondary">Fixed bottom</div>
<div class="sticky-top">Sticky top</div>

<!-- Responsive sticky top -->

<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider
</div>
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wide
r</div>
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider
</div>
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or
wider</div>

Visually hidden -—————————————————————-

💡 Visually hidden - maxsus klasslar bo'lib, ular yordamida elementlarni

veb sahifadan vizual berkitib, faqatgina maxsus devayslar (screen
reader) yordamida o'qish imkoniyatini beradi

Helpers 3
 Screen Reader
A web-powered screen reader

https://chrome.google.com/webstore/detail/screen-reade
r/kgejglhpjiefppelpmljglcjbhoiplfn/related?hl=en

<h2 class="visually-hidden">Title for screen readers</h2>

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
<div class="visually-hidden-focusable">A container with a <a href="#">focusable el
ement</a>.</div>

Stretched link -—————————————————————-

💡 Stretched link - maxsus klass bo'lib, uning yordamida istalgan HTML

element yoki Bootstrap komponentni havola ko'rinishiga olib kelish
mumkin. Stretched link to'g'ri ishlashi uchun, uni o'rab turgan ota-ona
(parent) elementi position xossasi uchun relative qiymatiga ega
bo'lishi kerak

<div class="card" style="width: 18rem;">

<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<p class="card-text">Some quick example text to build on the card title and ma
ke up the bulk of the card's
content.</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>

Text truncation -—————————————————————-

Helpers 4
 💡 Text truncation - maxsus klass bo'lib, uning yordamida uzun matnlarni
qisqartirish imkoniyati mavjud

<!-- Block level -->

<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>

<!-- Inline level -->

<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>

Helpers 5