Camp On Ents

Camponents
№ 4
Mentor
💡 Component - "Bootstrap 5"ning asosiy jihatlaridan biri bo'lib, ular qayta

ishlatish va moslashtirishga moyil bo'lib, uning yordamida veb
sahifamizning elementlarini tezroq yaratib olish imkoniyatiga egamiz
Komponentlar:
Accordion Modal
Alerts Navs & tabs
Badge Navbar
Breadcrumb Offcanvas
Buttons Pagination
Button group Popovers
Card Progress
Carousel Scrollspy
Close button Spinners
Collapse Toasts
Dropdowns Tooltips
List group
Accordion -—————————————————————-
Camponents 1
💡 Accordion - vertikal holatda ochilib / yopiladigan container element
<div class="accordion" id="accordionExample">

<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" dat
a-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby
="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by d
efault, until the collapse plugin adds the appropriate classes that we use to styl
e each element. These classes control the overall appearance, as well as the showi
ng and hiding via CSS transitions. You can modify any of this with custom CSS or o
verriding our default variables. It's also worth noting that just about any HTML c
an go within the <code>.accordion-body</code>, though the transition does limit ov
erflow.
</div>
</div>
</div>
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="col
lapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapse
Two">
Accordion Item #2
</button>
</h2>
Camponents 2
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="hea
dingTwo" data-bs-parent="#accordionExample">
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we use to sty
le each element. These classes control the overall appearance, as well as the show
ing and hiding via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just about any HTML
can go within the <code>.accordion-body</code>, though the transition does limit o
verflow.
</div>
</div>
</div>
<h2 class="accordion-header" id="headingThree">
lapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collap
seThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="h
eadingThree" data-bs-parent="#accordionExample">
<strong>This is the third item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we use to st
yle each element. These classes control the overall appearance, as well as the sho
wing and hiding via CSS transitions. You can modify any of this with custom CSS or
can go within the <code>.accordion-body</code>, though the transition does limit
overflow.
</div>
</div>
</div>
</div>
Hamisha ochiq qoladigan
<div class="accordion" id="accordionPanelsStayOpenExample">

<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" dat
a-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="pane
lsStayOpen-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
aria-labelledby="panelsStayOpen-headingOne">
<strong>This is the first item's accordion body.</strong> It is shown by d
efault, until the collapse plugin adds the appropriate classes that we use to styl
e each element. These classes control the overall appearance, as well as the showi
Camponents 3
ng and hiding via CSS transitions. You can modify any of this with custom CSS or o
verriding our default variables. It's also worth noting that just about any HTML c
an go within the <code>.accordion-body</code>, though the transition does limit ov
erflow.
</div>
</div>
</div>
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
lapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-con
trols="panelsStayOpen-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-
labelledby="panelsStayOpen-headingTwo">
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we use to sty
le each element. These classes control the overall appearance, as well as the show
ing and hiding via CSS transitions. You can modify any of this with custom CSS or
can go within the <code>.accordion-body</code>, though the transition does limit o
verflow.
</div>
</div>
</div>
<h2 class="accordion-header" id="panelsStayOpen-headingThree">
lapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-c
ontrols="panelsStayOpen-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" ari
a-labelledby="panelsStayOpen-headingThree">
<strong>This is the third item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we use to st
yle each element. These classes control the overall appearance, as well as the sho
wing and hiding via CSS transitions. You can modify any of this with custom CSS or
can go within the <code>.accordion-body</code>, though the transition does limit
overflow.
</div>
</div>
</div>
</div>
Alerts -—————————————————————-
Camponents 4
💡 Alerts - foydalanuvchining saytda bajargan harakatlari uchun
mo'ljallangan xabar. Undan tashqari saytning holati va u bo'yicha
ma'lumotlarni ham alerts orqali ko'rsatish mumkin. Uning 8 xil ko'rinishi
mavjud
<div class="alert alert-primary" role="alert">

A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
Camponents 5
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>


<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>.
Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#" class="alert-link">an example link</a
>. Give it a click if you like.
</div>
A simple success alert with <a href="#" class="alert-link">an example link</a>.
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="#" class="alert-link">an example link</a>. G
ive it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert with <a href="#" class="alert-link">an example link</a>.
</div>
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#" class="alert-link">an example link</a>. Giv
e it a click if you like.
</div>
<div class="alert alert-light" role="alert">
A simple light alert with <a href="#" class="alert-link">an example link</a>. Gi
ve it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Giv
e it a click if you like.
</div>
body ga ega va qo’shimcha izohli alert

<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example te
Camponents 6
xt is going to run a bit longer so that you can see how spacing within an alert wo
rks with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep th
ings nice and tidy.</p>
</div>
Alert icon bilan
<div class="alert alert-primary d-flex align-items-center" role="alert">

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentCo
lor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 1
6" role="img" aria-label="Warning:">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.76
7.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995
l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0
2 1 1 0 0 1 0-2z"/>
</svg>
<div>
An example alert with an icon
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

<symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.02
2L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02
l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</symbol>
<symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.5
33.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.
002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.2
9-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</symbol>
<symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 1
6">
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.76
7.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995
l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0
2 1 1 0 0 1 0-2z"/>
</symbol>
</svg>
<div class="alert alert-primary d-flex align-items-center" role="alert">

<svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-labe
l="Info:"><use xlink:href="#info-fill"/></svg>
<div>
An example alert with an icon
</div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
Camponents 7
l="Success:"><use xlink:href="#check-circle-fill"/></svg>
<div>
An example success alert with an icon
</div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
l="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<div>
An example warning alert with an icon
</div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
l="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
<div>
An example danger alert with an icon
</div>
</div>
Yopilishi uchun x belgisi qo’yish
<div class="alert alert-warning alert-dismissible fade show" role="alert">

<strong>Holy guacamole!</strong> You should check in on some of those fields bel
ow.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Clos
e"></button>
</div>


<div class="alert alert-success alert-dismissible " role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example
text is going to run a bit longer so that you can see how spacing within an alert
works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep
things nice and tidy.</p>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Cl
ose"></button>
</div>
Badge -—————————————————————-
💡 Badge - mavjud kontentga qo'shimcha ma'lumot qo'shish uchun

mo'ljallangan maxsus komponent
Camponents 8
<h6>
Asosiy kontent
<span class="badge bg-secondary">Yangi</span>
</h6>
<hr>
<button type="button" class="btn btn-primary">
Yangiliklar <span class="badge bg-secondary">4</span>
</button>
<hr>
<span class="badge bg-primary">Primary (asosiy) badge</span>
<hr>
<span class="badge rounded-pill bg-primary">Primary pill (yumaloq) badge</span>
Breadcrumb -—————————————————————-
💡 Breadcrumb - joriy sahifani sahifalar ierarxiyasidagi joylashuvini

bildirib turuvchi element
Camponents 9
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Asosiy</li>
</ol>
</nav>
<li class="breadcrumb-item"><a href="#">Asosiy</a></li>
<li class="breadcrumb-item active" aria-current="page">Kutubxona</li>
</ol>
</nav>
<li class="breadcrumb-item"><a href="#">Kutubxona</a></li>
<li class="breadcrumb-item active" aria-current="page">Kitob</li>
</ol>
</nav>
Ajratib turuvchini o'zgartirish
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">

<li class="breadcrumb-item active" aria-current="page">Kutubxona</li>
</ol>
</nav>
Button -—————————————————————-
Camponents 10
💡 Buttons (tugmalar) - formalar, modal va umuman olganda ma'lum bir
harakat bajarish uchun maxsus elementlar hisoblanadi. Uning bir
necha xil turi, o'lchami va holatlari mavjud.
<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Outline buttons (tugmalar)
<button type="button" class="btn btn-outline-primary">Primary</button>

<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
O'lchamlari (sizes)


<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
Camponents 11

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
Button group -—————————————————————-
💡 Button group - bir necha tugmalarni birgalikda bir qator qilib yoki
vertikal ravishda guruhlash
<div class="btn-group" role="group" aria-label="Basic example">

<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>


<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>
Button groups ko'rinishidagi checkbox va radio button


<div class="btn-group" role="group" aria-label="Basic checkbox toggle button grou
p">
Camponents 12
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
</div>


<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplet
e="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
e="off">
e="off">
</div>
O'lchamlari (sizing)
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">

</div>
<div class="btn-group" role="group" aria-label="Basic example">
</div>
<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
</div>
Vertikal ko'rinishdagi tugmalar guruhi
Camponents 13
<div class="btn-group-vertical" role="group" aria-label="Basic example">
</div>
Card -—————————————————————-
💡 Card - o'zgaruvchan va kengayuvchan kontent uchun maxsus

kontaineri. Unga bosh qismi (headers) va pastki qism (footers) qo'shish
imkoniyati mavjud. Bootstrap 5 uning bir necha xil turlarini o'z ichiga
oladi
Camponents 14
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/100x60" class="card-img-top" alt="Rasm">
<div class="card-body">
<h5 class="card-title">Card sarlavhasi</h5>
<p class="card-text">Bu yerga card uchun matn yozish imkoniyati mavjud.</p>
<a href="#" class="btn btn-primary">Card tugmasi</a>
</div>
</div>
Header- Body - Footer
<div class="card text-center">

<div class="card-header">
Featured
</div>
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additi
onal content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
💡 Card turli xil kontent turlarini qo'llab quvvatlaydi: rasmlar, matnlar,

ro'yhatlar guruhi, havolalar va boshqa turdagi kontent.
Camponents 15
Sarlavhalar, matnlar va havolalar

<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<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="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Ro’yxatlar:

Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
Camponents 16
Quote
<div class="card">
Quote
</div>
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Titl
e">Source Title</cite></footer>
</blockquote>
</div>
</div>
Orqa fon ko'rinishidagi rasm
<div class="card bg-dark text-white" style="width: 18rem;">

<img src="https://via.placeholder.com/400" class="card-img" alt="Rasm">
<div class="card-img-overlay">
<p class="card-text">This is a wider card with supporting text below as a natu
Camponents 17
ral lead-in to additional content. This content is a
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
Horizontal card
💡 Bootstrap 5 yordamida gorizontal card yaratish imkoniyati mavjud
<div class="card mb-3" style="max-width: 540px;">

<div class="row g-0">
<div class="col-md-4">
<img src="..." class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<p class="card-text">This is a wider card with supporting text below as a
natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</sm
all></p>
</div>
</div>
</div>
</div>
Card styles
Camponents 18
💡 Bootstrap 5 yordamida 8 xil ko'rinishdagi card yaratish imkoniyati
mavjud. Unga qo'shimcha ravishda card elementimiz turli xil
chegaralarga (border) ega bo'lishi mumkin


<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<h5 class="card-title">Success card title</h5>
</div>
</div>

<div class="card border-success mb-3" style="max-width: 18rem;">

<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
</div>
</div>
Camponents 19
Card groups
💡 Bootstrap 5 yordamida kartalarni guruhlash imkoniyati mavjud
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<p class="card-text">This is a wider card with supporting text below as a na
tural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</smal
l></p>
</div>
</div>
<div class="card">
<p class="card-text">This card has supporting text below as a natural lead-i
n to additional content.</p>
l></p>
</div>
</div>
<div class="card">
Camponents 20
<p class="card-text">This is a wider card with supporting text below as a na
tural lead-in to additional content. This card has even longer content than the fi
rst to show that equal height action.</p>
l></p>
</div>
</div>
</div>
Carousel -—————————————————————-
💡 Carousel - "slideshow" uchun mo'ljallanga maxsus komponent. Uning

yordamida rasmlar yoki matnlarni ketmaketlikda veb sahifaga chiqarish
imkoniyati mavjud
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carouse

l">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/1400x400?text=1" class="d-block w-100"
alt="Rasm 1">
</div>
<div class="carousel-item">
alt="Rasm 2">
</div>
alt="Rasm 3">
</div>
</div>
</div>
Boshqaruv elementlari bilan (controls)
Camponents 21
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<img src="https://via.placeholder.com/1400x400?text=1" class="d-block
w-100" alt="Rasm 1">
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselE
xampleControls"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselE
xampleControls"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Ko'rsatkichlar va caption bilan (indicators)
Camponents 22
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carouse
l">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-
slide-to="0" class="active"
aria-current="true" aria-labe></button>
slide-to="1"
aria-label="Slide 2"></button>
slide-to="2"
</div>
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p
>
</div>
</div>
<div class="carousel-item"><img src="https://via.placeholder.com/1400x400?
text=2" class="d-block w-100"
alt="Rasm 2">
</div>
</div>
</div>
xampleIndicators"
</button>
xampleIndicators"
</button>
</div>
Slide uchun interval belgilash
<div id="carouselExampleInterval" class="carousel slide carousel-fade" data-bs-rid

e="carousel">
Camponents 23
w-100" alt="Rasm 1"
data-bs-interval="10000">
<p>Some representative placeholder content for the first slide.</p
>
</div>
</div>
w-100" alt="Rasm 2"
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</
p>
</div>
</div>
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p
>
</div>
</div>
</div>
xampleInterval"
</button>
xampleInterval"
</button>
</div>
To'q (dark) ko'rinishi
Camponents 24
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="c
arousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to
="0" class="active"
aria-current="true" aria-label="Slide-1"></button>
<button type=" button" data-bs-target="#carouselExampleDark" data-bs-slide-to
="1"
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to
="2"
</div>
<img src="https://via.placeholder.com/1400x400?text=1" class="d-block w-10
0" alt="Rasm 1"
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
0" alt="Rasm 2"
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
0" alt="Rasm 3">
Camponents 25
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExamp
leDark"
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExamp
leDark"
</button>
Collapse -—————————————————————-
💡 Collapse - veb sahifamizdagi kontentni ko'rinishini (visibility) ya'ni

uning sahifada ko'rinishi yoki berkitilishini CSS va JS yordamida
boshqaruvchi element
Ishlash uslubi
.collapse klassi kontentni veb sahifadan berkitadi

.collapsing klassi bir holatdan ikkinchisiga o'tayotganda amal qiladi
.collapse.show kontentni veb sahifada ko'rinishini ta'minlaydi
Camponents 26
<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-
target="#collapseWidthExample" aria-expanded="false"
aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
This is some placeholder content for a horizontal collapse. It's hidden by d
efault and shown when triggered.
</div>
</div>
</div>
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" rol
e="button" aria-expanded="false"
aria-controls="collapseExample">
a href link orqali chiqqan tugma
</a>
target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
data-bs-target orqali chiqqan tugma
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Bu yerda qandaydir tex bo'lishi kerak. u har safar tugma bosilganda chiqib kel
adi
</div>
</div>
Bir necha (multiple) kontentlar
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample
1" role="button"
aria-expanded="false" aria-controls="multiCollapseExample1">
Toggle first element
</a>
target="#multiCollapseExample2"
aria-expanded="false" aria-controls="multiCollapseExample2">
Toggle second element
Camponents 27
</button>
target=".multi-collapse"
aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapse
Example2">
Toggle both elements
</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<mark>Birinchi</mark> collapse komponenti uchun ba'zi to'ldiruvchi tarkib.
Ushbu panel standart yashirin,
lekin foydalanuvchi tegishli trigger(tepki)ni faollashtirganda ochiladi.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<mark>Ikkinchi</mark> collapse komponenti uchun ba'zi to'ldiruvchi tarki
b. Ushbu panel standart yashirin,
lekin foydalanuvchi tegishli trigger(tepki)ni faollashtirganda ochiladi.
</div>
</div>
</div>
</div>
Dropdown -—————————————————————-
💡 Dropdowns - havolalar yoki tugmalar ro'yhatini ekranga chiqarish

uchun mo'ljallangan maxsus komponent
Camponents 28
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdown
MenuLink"
data-bs-toggle="dropdown" aria-expanded="false">
Hujjatlar
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">

<li><a class="dropdown-item" href="#">Ustozlarga</a></li>
<li><a class="dropdown-item" href="#">Abituriyentlarga</a></li>
<li><a class="dropdown-item" href="#">Talabalarga</a></li>
</ul>
</div>


<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu
Button1"
Hujjatlar
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
</ul>
</div>
Dropdown turlari


<div class="btn-group">
<button type="button" class="btn btn-danger">Hujjatlar</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-spli
t"
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Boshqalar</a></li>
</ul>
</div>
Camponents 29


<button class="btn btn-secondary btn-lg dropdown-toggle" type="button"
Large button
</button>
...
</ul>
</div>
<button class="btn btn-secondary btn-lg" type="button">
Large split button
</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-t
oggle-split"
</button>
...
</ul>
</div>
To'q (dark) dropdown
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu
Button2"
Dropdown button
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton
2">
<li><a class="dropdown-item active" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
Turli xil joylashuvga ega bo'lgan dropdown menu
Camponents 30

<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-s
plit"
data-bs-toggle="dropdown"
aria-expanded="false">
</button>

</ul>
</div>
<div class="dropdown-center">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownCent
erBtn"
data-bs-toggle="dropdown"
Centered dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownCenterBtn">
</ul>
</div>
<div class="btn-group dropup">

<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle
="dropdown"
Dropup
</button>
</ul>
</div>
<div class="btn-group dropup-center dropup">

="dropdown"
Dropup-centered
</button>
</ul>
</div>
<div class="btn-group dropend">
="dropdown"
Dropright
</button>
Camponents 31
</ul>
</div>
<div class="btn-group dropstart">
="dropdown"
Dropstart
</button>
</ul>
</div>
List group -—————————————————————-
💡 List group (ro'yhat guruhi) - kontentlar ketma-ketligini ekranga

chiqarish uchun mo'ljallangan maxsus komponent
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current
="true">
Hozir shu yerdasiz
Camponents 32
</a>
<a href="#" class="list-group-item list-group-item-action">1-link</a>
<a class="list-group-item list-group-item-action disabled">4-link (disabled)</a>
</div>
Flush ko'rinishidagi ro'yhatlar guruhi
<ul class="list-group list-group-flush">

<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Gorizontal ro'yhatlar guruhi
<ul class="list-group list-group-horizontal">

</ul>
Maxsus ko'rinishga ega bo'lgan ro'yhatlar guruhi
Camponents 33
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current
="true">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small>And some small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<small class="text-muted">3 days ago</small>
</div>
<small class="text-muted">And some muted small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<small class="text-muted">3 days ago</small>
</div>
<small class="text-muted">And some muted small print.</small>
</a>
</div>
Checkboxes
Camponents 34
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label
="...">
First checkbox
</li>
="...">
Second checkbox
</li>
="...">
Third checkbox
</li>
="...">
Fourth checkbox
</li>
="...">
Fifth checkbox
</li>
</ul>
Modal -—————————————————————-
Camponents 35
💡 Modal - hamma kontentlarni oldidan ekranga chiqib, foydalanuvchi
bilan muloqot qilish imkoniyatini beruvchi maxsus komponent. Odatda,
bosh (header), tana (body) va pastki (footer) qismlarini o'z ichiga oladi


<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-targe
t="#exampleModal">
Modelni ishga tushirish
</button>


<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleMo
dalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal mavzusi</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label
="Close"></button>
</div>
<div class="modal-body">
Nima ham deya olamiz? Mana shu bizda modal deyiladi
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Yo
pish</button>
<button type="button" class="btn btn-primary">O'zgarishlarni saqlash</butt
on>
</div>
</div>
</div>
</div>
Camponents 36
"Static backdrop"ga ega bo'lgan modal
💡 Bunda modaldan tashqarida sichqoncha bosilsa modal yopilib

ketmaydi

t="#staticBackdrop">
Static backdrop modal
</button>


<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyb
oard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<h5 class="modal-title" id="staticBackdropLabel">Modal mavzusi</h5>
="Close"></button>
</div>
Nima ham deya olamiz? Mana shu bizda modal deyiladi
</div>
pish</button>
<button type="button" class="btn btn-primary">Tushunarli</button>
</div>
</div>
</div>
</div>
"Scroll"ga ega bo'lgan, markazlashgan modal.

t="#staticBackdrop">
Static backdrop modal
</button>


<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyb
Camponents 37
oard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<h5 class="modal-title" id="staticBackdropLabel">Modal mavzusi</h5>
="Close"></button>
</div>
Nima ham deya olamiz? Mana shu bizda modal deyiladi. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Qui saepe quaerat temporibus laudantium dolores
voluptate perferendis nihil libero atque! Delectus iste quia corporis ullam harum
architecto dolorem odit nostrum totam culpa voluptatem ipsam praesentium modi, qu
isquam ipsum, nulla quis quaerat corrupti sit perferendis temporibus quam suscipi
t? Consectetur, praesentium quisquam, delectus distinctio fugit possimus illo iure
deleniti, maiores molestiae in ducimus placeat quidem facilis voluptatibus rem dol
ores porro nostrum velit! Eum sunt reprehenderit nesciunt repellendus dignissimos
eius pariatur illum, corrupti mollitia, libero dicta porro fugiat iusto consectet
ur sit, at iste earum quo exercitationem. Corrupti consequuntur veritatis possimus
repudiandae eveniet dignissimos temporibus! Reiciendis non amet quas provident odi
t soluta officiis est illo quia pariatur, porro aperiam doloribus sed aliquam hic
optio nulla. Eos hic aperiam facilis ex distinctio, perferendis laboriosam vel ne
cessitatibus nobis maiores inventore? Exercitationem dignissimos, aliquid minus fu
giat consequuntur eligendi officia tenetur quibusdam iste voluptas explicabo conse
quatur porro eveniet. Dolorum consequatur dolores dignissimos dolor placeat assume
nda minus, blanditiis minima sit vel corrupti architecto repudiandae modi unde tem
pora optio, explicabo a rerum vero cumque omnis laudantium odio beatae. Obcaecati,
voluptas numquam molestiae harum quo suscipit minus amet quidem excepturi quam lib
ero quibusdam deleniti eum facilis soluta accusamus reiciendis ipsam! Quae, fugia
t.
</div>
pish</button>
<button type="button" class="btn btn-primary">Tushunarli</button>
</div>
</div>
</div>
</div>
Modaldan modalga o'tish
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby

="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
="Close"></button>
</div>
Camponents 38
Show a second modal and hide this one with the button below.
</div>
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data
-bs-toggle="modal">Open second modal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledb

y="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
="Close"></button>
</div>
Hide this modal and show the first with the button below.
</div>
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-
bs-toggle="modal">Back to first</button>
</div>
</div>
</div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role
="button">Open first modal</a>
Sizing (o'lchamlari)

t="#xlModal">
Juda katta modalni ochish
</button>
t="#lModal">
Katta modalni ochish
</button>
t="#sModal">
Kichik modalni ochish
</button>

<div class="modal fade" id="xlModal" tabindex="-1" aria-labelledby="exampleModalLa
bel" aria-hidden="true">
<div class="modal-dialog modal-xl">
Camponents 39
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
="Close"></button>
</div>
...
</div>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cl
ose</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

<div class="modal fade" id="lModal" tabindex="-1" aria-labelledby="exampleModalLab
el" aria-hidden="true">
<div class="modal-dialog modal-lg">
="Close"></button>
</div>
...
</div>
ose</button>
</div>
</div>
</div>
</div>

<div class="modal fade" id="sModal" tabindex="-1" aria-labelledby="exampleModalLab
el" aria-hidden="true">
<div class="modal-dialog modal-sm">
="Close"></button>
</div>
...
</div>
ose</button>
</div>
</div>
</div>
</div>
Camponents 40
To'liq ekranli (fullscreen) modalni ochish

t="#fullScreenModal">
To'liq ekranli modalni ochish
</button>

<div class="modal fade" id="fullScreenModal" tabindex="-1" aria-labelledby="exampl
eModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
="Close"></button>
</div>
...
</div>
ose</button>
</div>
</div>
</div>
</div>
Navs -—————————————————————-
💡 Navs - navigatsiya uchun mo'ljallangan maxsus komponent. Navs

asosan veb sahifaning menu (sahifalarga o'tish havolalari) qismini
yaratish uchun xizmat qiladi
Camponents 41

<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
</nav>

<ul class="nav justify-content-center">
<li class="nav-item">
</li>
</li>
</li>
</li>
</ul>
Tabs -—————————————————————-
💡 Tabs - navs yordamida kontent almashtirish uchun mo'ljallangan

komponent
Camponents 42

<ul class="nav nav-tabs">
</li>
</li>
</li>
</li>
</ul>


<ul class="nav nav-pills">
</li>
</li>
</li>
</li>
</ul>
Vertikal ko'rinishdagi tabs
<div class="d-flex align-items-start">

<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria
-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" da
ta-bs-target="#v-pills-home"
type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">H
ome</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-b
s-target="#v-pills-profile"
type="button" role="tab" aria-controls="v-pills-profile" aria-selected="fals
e">Profile</button>
<button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-
bs-target="#v-pills-disabled"
type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="fal
se" disabled>Disabled</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-
bs-target="#v-pills-messages"
type="button" role="tab" aria-controls="v-pills-messages" aria-selected="fal
Camponents 43
se">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-
bs-target="#v-pills-settings"
type="button" role="tab" aria-controls="v-pills-settings" aria-selected="fal
se">Settings</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-
labelledby="v-pills-home-tab"
tabindex="0">1</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledb
y="v-pills-profile-tab"
<div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelled
by="v-pills-disabled-tab"
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelled
by="v-pills-messages-tab"
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelled
by="v-pills-settings-tab"
</div>
</div>
Navbar -—————————————————————-
💡 Navbar - o'zida saytning boshqa sahifalariga o'tish uchun mo'ljallangan

havolalarni saqlovchi maxsus element
<nav class="navbar navbar-expand-lg bg-light">

<div class="container-fluid">
<a class="navbar-brand" href="#">Kun.uz</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs
-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Tog
gle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Camponents 44
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="b
utton" data-bs-toggle="dropdown"
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li>
</li>
</ul>
</li>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-l
abel="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Navbar brand (rasm ko'rinishida)
<nav class="navbar navbar-light bg-light">

<div class="container">
<a class="navbar-brand" href="#">
<img src="https://cdn.worldvectorlogo.com/logos/bootstrap-5-1.svg" alt="" wi
dth="30" height="24">
</a>
</div>
</nav>
Joylashuvi (placement)- <<sticky-top, fixed-bottom ,fixed-top>>
Camponents 45
<nav class="navbar bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-l
abel="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
</li>
<a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdo
wn" role="button"
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
<li>
</li>
</ul>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria
-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</nav>
Offcanvas -—————————————————————-
Camponents 46
💡 Offcanvas - veb sahifaga yashirin yon panel qo'shish uchun
mo'ljallangan maxsus komponent. Odatda navigatsiya, harid
savatchasi va shunga o'xshash holatlarda ishlatishga mo'ljallangan
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample"

role="button" aria-controls="offcanvasExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Button with data-bs-target
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample"

aria-labelledby="offcanvasExampleLabel">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label
="Close"></button>
</div>
<div>
Some text as placeholder. In real life you can have the elements you have ch
osen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button"
id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
</ul>
Camponents 47
</div>
</div>
</div>
Body scroll effekti bilan

data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable
body scrolling</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="fal

se" tabindex="-1"
id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body s
crolling</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label
="Close"></button>
</div>
<p>Try scrolling the rest of the page to see this option in action.</p>
</div>
</div>
Joylashtirish
Offcanvas komponentlari uchun birlamchi joylashuv mavjud emas, shuning uchun
siz quyidagi modifikator sinflaridan birini qo'shishingiz kerak.
.offcanvas-start -offcanvasni ko'rish oynasining chap tomoniga joylashtiradi

(yuqorida ko'rsatilgan)
.offcanvas-end -ko'rish oynasining o'ng tomoniga kanvasni joylashtiradi
.offcanvas-top -ko'rish oynasining yuqori qismiga offcanvas joylashtiradi
.offcanvas-bottom -ko'rish oynasining pastki qismiga offcanvas joylashtiradi

data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
Toggle top offcanvas
</button>


<div class="offcanvas ko'rish oynasining yuqori qismiga offcanvas " tabindex="-1"
id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<h5 id="offcanvasTopLabel">Offcanvas top</h5>
Camponents 48
<button type="button" class="btn-close text-reset"
data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
Bu ko'rish oynasining yuqori qismidagi offcanvas
</div>
</div>
Pagination -—————————————————————-
💡 Pagination - Bootstrapning sahifalash uchun mo'ljallangan maxsus

komponenti
<h4 class="mt-5">Pagination</h4>
<nav aria-label="...">
<ul class="pagination">


<li class="page-item disabled">
<span class="page-link">Oldingi</span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<span class="page-link">2</span>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Keyingi</a>
</li>
</ul>
</nav>
Popover -—————————————————————-
Camponents 49
💡 Popover - Bootstrapning maxsus komponenti bo'lib, uning yordamida
veb sahifadagi istalgan elementga qo'shimcha ma'lumot berish
imkoniyati mavjud . Popover veb sahifaning tezligiga ta'sir
ko'rsatganligi uchun, u odatda o'chiq holatda bo'ladi. Uni yoqish uchun
Javascriptdan foydalanishga to'g'ri keladi
<h4 class="mt-5">Popover</h4>

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" t
itle="Bu Popover ukam" data-bs-placement="top" data-bs-content="Popover orqali nim
a demoqchisiz?">toggle popover chiqishi uchun bosing</button>


<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-tog
gle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
});
</script>
Progress -—————————————————————-
Camponents 50
💡 Progress - ma'lum bir jarayonni qanday holatda ekanligini vizual
tarzda bildirish uchun mo'ljallangan maxsus komponent
<h4 class="mt-5">Progress</h4>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar"
style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="10
0">
25% natija
</div>
</div>
Scrollspy -—————————————————————-
💡 Scrollspy - kursorning joylashgan joyiga qarab navigatsion menudagi

elementni aktiv ko'rinishga olib keluvchi Bootstrapning maxsus
komponenti
<h4 class="mt-5">Scrollspy</h4>
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
Camponents 51
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<a class="nav-link" href="#scrollspyHeading1">First</a>
</li>
<a class="nav-link" href="#scrollspyHeading2">Second</a>
</li>
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" r
ole="button" aria-expanded="false">Dropdown</a>
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
</ul>
</li>
</ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0"
class="scrollspy-example" tabindex="0">
<h4 id="scrollspyHeading1">First heading</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint corrupti ha
rum accusantium labore consectetur. Voluptatibus, a corrupti deleniti blanditiis i
nventore quam velit hic perferendis ipsam totam. Obcaecati quod iusto amet!
</p>
<h4 id="scrollspyHeading2">Lorem ipsum dolor sit amet consectetur adipisicin
g elit. Illo, eius? Cumque nemo molestiae nisi esse adipisci perferendis quo susci
pit pariatur quidem? Earum maiores at qui nemo delectus dicta eum exercitationem?
</h4>
<p>...</p>
<h4 id="scrollspyHeading3">Third heading Lorem ipsum dolor, sit amet consect
etur adipisicing elit. Incidunt, minima! Velit quisquam veritatis cumque nulla, fu
giat placeat, eveniet aperiam eos porro earum cupiditate facilis dignissimos molli
tia eaque quia, voluptates libero.
</h4>
<p>...</p>
<h4 id="scrollspyHeading4">Fourth heading Lorem ipsum dolor, sit amet consec
tetur adipisicing elit. Incidunt, minima! Velit quisquam veritatis cumque nulla, f
ugiat placeat, eveniet aperiam eos porro earum cupiditate facilis dignissimos moll
itia eaque quia, voluptates libero.
</h4>
<p>...</p>
<h4 id="scrollspyHeading5">Fifth heading Lorem ipsum dolor, sit amet consect
etur adipisicing elit. Incidunt, minima! Velit quisquam veritatis cumque nulla, fu
giat placeat, eveniet aperiam eos porro earum cupiditate facilis dignissimos molli
tia eaque quia, voluptates libero.
</h4>
<p>...</p>
</div>
Ichma-ich (nested) nav uchun misol
Camponents 52
<style>
.scrollspy-example {
position: relative;
height: 350px;
overflow: auto;
}
</style>
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-it

ems-stretch p-3">
<a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
</nav>
</nav>
</nav>
</nav>
<div data-bs-spy="scroll" class="scrollspy-example"

data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
<h4 id="item-1">Item 1</h4>
<p>...</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>...</p>
<p>...</p>
<p>...</p>
Camponents 53
<h5 id="item-3-1">Item 3-1</h5>
<p>...</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>...</p>
</div>
Ro'yhatlar guruhi uchun misol
<style>
.scrollspy-example {
position: relative;
height: 350px;
overflow: auto;
}
</style>
-------------------
<h4 class="mt-5">Scrollspy</h4>
<div class="row">
<div class="col-4">
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">It
em 1</a>
em 2</a>
em 3</a>
em 4</a>
</div>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset
="0" class="scrollspy-example" tabindex="0">
<h4 id="list-item-1">Item 1</h4>
<p>... Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritati
s facere voluptatum, error neque
tenetur praesentium tempore explicabo earum iure atque nulla itaque co
nsequatur commodi nam! Maxime
doloremque laborum consectetur, similique ipsa, sequi accusantium nost
rum ducimus, tenetur molestiae eaque
Camponents 54
quam. Deleniti qui possimus sed autem earum consequatur voluptates eaq
ue fugiat quibusdam, quae eius,
numquam ipsa labore odio maxime eligendi veniam. Repellat, ullam. Quia
quibusdam vero assumenda. Maxime id
perspiciatis, eligendi facilis, consequatur aut explicabo repellendus
possimus corrupti similique quam iste
quis quaerat ex cupiditate! A aliquid asperiores repudiandae, similiqu
e unde nostrum eligendi nobis natus
sequi eum, culpa aliquam! Natus voluptatibus eius magnam quas quam dol
ores, quidem culpa molestias dolor,
ratione perferendis a amet maxime totam inventore itaque placeat quibu
sdam, ex cumque obcaecati recusandae
</p>
t placeat voluptatum eum autem quidem hic!
Assumenda, maxime nesciunt! Exercitationem iste laborum quae eaque qua
si non esse consectetur, id sunt velit
voluptas ad. Fugiat numquam tempore expedita debitis repudiandae sint!
Sit, aut, voluptate consectetur
sapiente itaque minima error officiis repellat unde quo corporis incid
unt? Aut voluptas quidem laborum
blanditiis, sunt cumque voluptatum, quisquam amet ipsa quia quis. Et a
rchitecto dicta, at consectetur quam
laudantium! Aspernatur suscipit ad officia. Ex, incidunt? Totam, neces
sitatibus nisi quia sunt amet numquam,
dolore quod veritatis atque repudiandae enim impedit distinctio nesciu
nt ex! Voluptatibus voluptatum fugiat
excepturi molestiae tempora totam sint expedita eaque, voluptates fugi
t velit. Repudiandae consectetur
veritatis maxime similique modi rem adipisci in commodi?</p>
nu
voluptas ad. Fugiat numquam tempore expedita debitis repudiandae sint!
Sit, aut, voluptate consectetur
sapiente itaque minima error officiis repellat unde quo corporis incid
unt? Aut voluptas quidem laborum
blanditiis, sunt cumque voluptatum, quisquam amet ipsa quia quis. Et a
rchitecto dicta, at consectetur quam
Camponents 55
numquam ipsa labore odio maxime eligendi veniam. Repellat, ullam. Quia
quibusdam vero assumenda. Maxime id
pepsa quia quis. Et architecto dicta, at consectetur quam
</div>
</div>
</div>
Spinner -—————————————————————-
💡 Spinner - elementning yuklanyotganini bildirish uchun mo'ljallangan

Bootstrapning maxsus komponenti
<div class="spinner-border text-primary" role="status">

<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
</div>
<div class="spinner-border text-success" role="status">
</div>
Camponents 56
O'sayotgan (growing) spinner
<div class="spinner-grow" role="status">

</div>
<div class="spinner-border spinner-border-sm" role="status">

</div>
<div class="spinner-grow spinner-grow-sm" role="status">
</div>

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">

</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
</div>
Tugma bilan birga ishlatish
<button class="btn btn-primary" type="button" disabled>

<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true">
</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true">
</span>
Loading...
</button>
Camponents 57
Toasts -—————————————————————-
💡 Toast - foydalanuvchilarga xabarnoma ko'rsatish uchun mo'ljallangan

maxsus Bootstrap komponenti. Toast veb sahifaning tezligiga ta'sir
ko'rsatganligi uchun, u odatda o'chiq holatda bo'ladi. Uni yoqish uchun
Javascriptdan foydalanishga to'g'ri keladi
<h4 class="mt-5">Toasts</h4>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Cl
ose"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<script>
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl);
});
toastList.forEach(toast => toast.show());
</script>
Tugma orqali "toast"ni ekranga chiqarish
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</b

utton>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
Camponents 58
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-a
tomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label
="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
<script>
var toastEl = document.getElementById('liveToast');
var liveToast = new bootstrap.Toast(toastEl);
var liveToastBtn = document.getElementById('liveToastBtn');
liveToastBtn.addEventListener('click', function () {
liveToast.show();
});
</script>
Tooltips -—————————————————————-
💡 Tooltip - veb sahifamizdagi elementga qo'shimcha ma'lumot ko'rsatib

o'tish uchun mo'ljallangan Bootstrapning maxsus komponenti.
Popoverga o'xshash, lekin unga nisbatan soddaroq ko'rinishga ega
bo'ladi. Tooltip veb sahifaning tezligiga ta'sir ko'rsatganligi uchun, u
odatda o'chiq holatda bo'ladi. Uni yoqish uchun Javascriptdan
foydalanishga to'g'ri keladi
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-p

lacement="top" title="Tooltip on top">
Tooltip on top
Camponents 59
</button>
lacement="right" title="Tooltip on right">
Tooltip on right
</button>
lacement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
lacement="left" title="Tooltip on left">
Tooltip on left
</button>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggl
e="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
});
</script>
O'zida HTML saqlaydigan tooltip
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip"

data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
Camponents 60

Camp On Ents

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Camp On Ents

Uploaded by

Copyright:

Available Formats

Camponents

💡 Component - "Bootstrap 5"ning asosiy jihatlaridan biri bo'lib, ular qayta

Alerts Navs & tabs

Button group Popovers

Close button Spinners

<div class="accordion" id="accordionExample">

Hamisha ochiq qoladigan

<div class="accordion" id="accordionPanelsStayOpenExample">

<div class="alert alert-primary" role="alert">

body ga ega va qo’shimcha izohli alert

<div class="alert alert-success" role="alert">

Alert icon bilan

<div class="alert alert-primary d-flex align-items-center" role="alert">

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

<div class="alert alert-primary d-flex align-items-center" role="alert">

Yopilishi uchun x belgisi qo’yish

<div class="alert alert-warning alert-dismissible fade show" role="alert">

💡 Badge - mavjud kontentga qo'shimcha ma'lumot qo'shish uchun

💡 Breadcrumb - joriy sahifani sahifalar ierarxiyasidagi joylashuvini

Ajratib turuvchini o'zgartirish

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">

<button type="button" class="btn btn-primary">Primary</button>

Outline buttons (tugmalar)

<button type="button" class="btn btn-outline-primary">Primary</button>

Button group -—————————————————————-

<div class="btn-group" role="group" aria-label="Basic example">

Button groups ko'rinishidagi checkbox va radio button

<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">

Vertikal ko'rinishdagi tugmalar guruhi

💡 Card - o'zgaruvchan va kengayuvchan kontent uchun maxsus

Header- Body - Footer

<div class="card text-center">

💡 Card turli xil kontent turlarini qo'llab quvvatlaydi: rasmlar, matnlar,

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

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

Orqa fon ko'rinishidagi rasm

<div class="card bg-dark text-white" style="width: 18rem;">

💡 Bootstrap 5 yordamida gorizontal card yaratish imkoniyati mavjud

<div class="card mb-3" style="max-width: 540px;">

<div class="card border-success mb-3" style="max-width: 18rem;">

💡 Bootstrap 5 yordamida kartalarni guruhlash imkoniyati mavjud

💡 Carousel - "slideshow" uchun mo'ljallanga maxsus komponent. Uning

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carouse

Boshqaruv elementlari bilan (controls)

Ko'rsatkichlar va caption bilan (indicators)

Slide uchun interval belgilash

<div id="carouselExampleInterval" class="carousel slide carousel-fade" data-bs-rid

To'q (dark) ko'rinishi

💡 Collapse - veb sahifamizdagi kontentni ko'rinishini (visibility) ya'ni

.collapse klassi kontentni veb sahifadan berkitadi

.collapse.show kontentni veb sahifada ko'rinishini ta'minlaydi

Bir necha (multiple) kontentlar

💡 Dropdowns - havolalar yoki tugmalar ro'yhatini ekranga chiqarish

<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">