Bootstrapdagi kompenetalar jadvala tartibi - Педагогика - Рефераты

Информация о документе

Цена	2000UZS
Размер	52.2KB
Покупки	0
Дата загрузки	07 Ноябрь 2026
Расширение	docx
Раздел	Рефераты
Предмет	Педагогика

Bootstrapdagi kompenetalar jadvala tartibi

Купить

Mavzu: Bootstrapdagi kompenetalar jadvala tartibi
Reja:
1. Bootstrap asosi hossalari
2. Bootstrapda ishlash
3. Mavjud uslublar
4. Nusxalash
5. Xulosa

Kirish
Eng avvalo Bootstrap nima shu kabi savollarga javob topib olsak?
• Bootstrap veb-saytni tez va oson yaratish uchun bepul frameworkdir.
• Bootstrap HTML va CSS-ga asoslangan tipografiya, formalar, tugmalar,
jadvallar, navigatsiya, modallar, rasm karusellari va boshqa ko'p narsalar
uchun, shuningdek ixtiyoriy JavaScript plaginlarini o'z ichiga oladi.
• Bootstrap sizga osongina sezgir dizaynni yaratish qobiliyatini beradi
Responsive (Moslashuvchan) veb-dizayn nima?
Responsive (Moslashuvchan) veb dizayn - bu kichik telefonlardan tortib katta ish
stollariga qadar o'zlarini barcha qurilmalarda yaxshi ko'rinishga sozlaydigan veb-
saytlardir.
Bootstrapni nima uchun ishlatishimiz kerak?
Bootstrapning afzalliklari:
• Foydalanish oson: HTML va CSS haqida oddiy ma'lumotga ega bo'lgan har
kim Bootstrapdan foydalanishni boshlashi mumkin
• Xususiyatlari: Bootstrapning sezgir CSS kodi telefonlar, planshetlar va ish
stollariga moslashadi
• Brauzer bilan mosligi: Bootstrap 4 barcha zamonaviy brauzerlarga mos
keladi (Chrome, Firefox, Internet Explorer 10+, Edge, Safari va Opera).
Asosiy nav
.nav Bootstrap-da mavjud bo'lgan navigatsiya asosiy sinfdan faol va o'chirilgan
holatlargacha bo'lgan umumiy belgilar va uslublarni taqsimlaydi . Har bir uslub
o'rtasida almashish uchun modifikator sinflarini almashtiring.
Asosiy .nav komponent flexbox bilan qurilgan va barcha turdagi navigatsiya
komponentlarini yaratish uchun mustahkam poydevor yaratadi. U ba'zi uslublarni
bekor qilishni (ro'yxatlar bilan ishlash uchun), kattaroq tegish joylari uchun
havolalarni to'ldirishni va asosiy o'chirilgan uslublarni o'z ichiga oladi.
Asosiy .nav komponent hech qanday holatni o'z ichiga olmaydi .active . Quyidagi
misollar sinfni o'z ichiga oladi, asosan bu alohida sinf hech qanday maxsus uslubni
ishga tushirmasligini ko'rsatish uchun.
• Faol
• Havola

• Havola
• O'chirilgan
Nusxalash
<ul class= "nav" >
<li class= "nav-item" >
<a class= "nav-link active" href= "#" > Active </a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link </a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link </a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" > Disabled </a>
</li> </ul>
Sinflar davomida ishlatiladi, shuning uchun belgilashingiz juda moslashuvchan
bo'lishi mumkin. Yuqoridagi kabi s dan foydalaning yoki element <ul> bilan
o'zingizni aylantiring. <nav> Foydalanishlari sababli, .nav navigatsiya display:
flex havolalari nav elementlari bilan bir xil ishlaydi, ammo qo'shimcha belgilarsiz.
Fao lHavol aHavol a O'chirilgan
Nusxalash
<nav class= "nav" >
<a class= "nav-link active" href= "#" > Active </a>
<a class= "nav-link" href= "#" > Link </a>
<a class= "nav-link" href= "#" > Link </a>
<a class= "nav-link disabled" href= "#" > Disabled </a>
</nav>
Mavjud uslublar
.nav Modifikatorlar va yordamchi dasturlar yordamida s komponentining uslubini
o'zgartiring. Agar kerak bo'lsa, aralashtiring va moslang yoki o'zingizni yarating.
Gorizontal tekislash
Navigatoringizning gorizontal hizalanishini flexbox yordam dasturlari bilan
o'zgartiring . Odatiy bo'lib, navbatlar chapga hizalanadi, lekin siz ularni markazga
yoki o'ngga osongina o'zgartirishingiz mumkin.
Markazda .justify-content-center :

• Faol
• Havola
• Havola
• O'chirilgan
Nusxalash
<ul class= "nav justify-content-center" >
<li class= "nav-item" >
<a class= "nav-link active" href= "#" > Active </a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link </a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link </a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" > Disabled </a>
</li> </ul>
O'ngga tekislangan .justify-content-end :
• Faol
• Havola
• Havola
• O'chirilgan
Nusxalash
<ul class= "nav justify-content-end" >
<li class= "nav-item" >
<a class= "nav-link active" href= "#" > Active </a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link </a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link </a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" > Disabled </a>
</li>
</ul>

Vertikal
Yordamchi dastur yordamida moslashuvchan element yo'nalishini o'zgartirib,
navigatsiyangizni to'plang .flex-column . Ularni ba'zi ko'rish oynalarida to'plash
kerakmi, boshqalari emasmi? Javob beruvchi versiyalardan foydalaning (masalan,
.flex-smcolumn ).
• Faol
• Havola
• Havola
• O'chirilgan
Nusxalash
<ul class= "nav flex-column" >
<li class= "nav-item" >
<a class= "nav-link active" href= "#" > Active </a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link </a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link </a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" > Disabled </a>
</li> </ul>
Har doimgidek, vertikal navigatsiya <ul> s holda ham mumkin.
Nusxalash
<nav class= "nav flex-column" >
<a class= "nav-link active" href= "#" > Active </a>
<a class= "nav-link" href= "#" > Link </a>
<a class= "nav-link" href= "#" > Link </a>
<a class= "nav-link disabled" href= "#" > Disabled </a>
</nav>
Yorliqlar
Yuqoridan asosiy navbatni oladi va .nav-tabs yorliqli interfeys yaratish uchun sinfni
qo'shadi. Bizning tab JavaScript plaginimiz bilan tabbable hududlarni yaratish
uchun ulardan foydalaning .
 Faol
 Havola

• Havola
• O'chirilgan
<ul class= "nav nav-tabs" >
<li class= "nav-item" >
<a class= "nav-link active" href= "#" > Active </a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link </a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link </a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" > Disabled </a>
</li>
</ul>
Tabletkalar
Xuddi shu HTMLni oling, lekin .nav-pills o'rniga foydalaning:
• Faol
• Havola
• Havola
• O'chirilgan
Nusxalash
<ul class= "nav nav-pills" >
<li class= "nav-item" >
<a class= "nav-link active" href= "#" > Active </a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link </a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link </a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" > Disabled </a>
</li>
</ul> Nusxalash

To'ldiring va asoslang
Tarkibingizni .nav ikkita modifikator sinfidan birining to'liq mavjud kengligini
kengaytirishga majburlang. Barcha mavjud bo'sh joyni s bilan mutanosib ravishda
to'ldirish uchun .nav-item dan foydalaning .nav-fill . E'tibor bering, barcha
gorizontal bo'sh joy egallangan, ammo har bir nav elementi bir xil kenglikka ega
emas.
• Faol
• Uzunroq navigatsiya havolasi
• Havola
• O'chirilgan
Nusxalash
<ul class= "nav nav-pills nav-fill" >
<li class= "nav-item" >
<a class= "nav-link active" href= "#" > Active </a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Longer nav link </a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link </a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" > Disabled </a>
</li> </ul>
<nav> Asoslangan navigatsiyadan foydalanganda .nav-item , langarlarga qo'shishni
unutmang.
Fao l Havol aHavol a O'chirilgan
Nusxalash
<nav class= "nav nav-pills nav-fill" >
<a class= "nav-item nav-link active" href= "#" > Active </a>
<a class= "nav-item nav-link" href= "#" > Link </a>
<a class= "nav-item nav-link" href= "#" > Link </a>
<a class= "nav-item nav-link disabled" href= "#" > Disabled </a>
</nav>
Teng kenglikdagi elementlar uchun dan foydalaning .nav-justified . Barcha
gorizontal bo'shliqlar navigatsiya havolalari bilan band bo'ladi, lekin .nav-
fill yuqoridagilardan farqli o'laroq, har bir navbat elementi bir xil kenglikda bo'ladi.
Fao l Uzunroq navigatsiya havolas iHavol a O'chirilgan

Nusxalash
<nav class= "nav nav-pills nav-justified" >
<a class= "nav-link active" href= "#" > Active </a>
<a class= "nav-link" href= "#" > Longer nav link </a>
<a class= "nav-link" href= "#" > Link </a>
<a class= "nav-link disabled" href= "#" > Disabled </a>
</nav>
navigatsiyaga asoslangan .nav-fill misolga o'xshab , langarlarga qo'shishni
unutmang. <nav>.nav-item
Fao l Havol aHavol a O'chirilgan
Nusxalash
<nav class= "nav nav-pills nav-justified" >
<a class= "nav-item nav-link active" href= "#" > Active </a>
<a class= "nav-item nav-link" href= "#" > Link </a>
<a class= "nav-item nav-link" href= "#" > Link </a>
<a class= "nav-item nav-link disabled" href= "#" > Disabled </a>
</nav>
Flex utilitlari bilan ishlash
Agar sizga sezgir navigatsiya o'zgarishlari kerak bo'lsa, bir qator flexbox yordam
dasturlaridan foydalanishni o'ylab ko'ring . Ko'proq batafsil ma'lumotga ega
bo'lsa-da, bu yordam dasturlari sezgir to'xtash nuqtalarida ko'proq
moslashtirishni taklif qiladi. Quyidagi misolda bizning navbatimiz eng past
to'xtash nuqtasiga joylashtiriladi, keyin kichik to'xtash nuqtasidan boshlab
mavjud kenglikni to'ldiradigan gorizontal tartibga moslashadi.
Fao l Havol aHavol a O'chirilgan
Nusxalash
<nav class= "nav nav-pills flex-column flex-sm-row" >
<a class= "flex-sm-fill text-sm-center nav-link active" href= "#" > Active </a>
<a class= "flex-sm-fill text-sm-center nav-link" href= "#" > Link </a>
<a class= "flex-sm-fill text-sm-center nav-link" href= "#" > Link </a>
<a class= "flex-sm-fill text-sm-center nav-link disabled" href= "#" > Disabled </a>
</nav>
Foydalanish imkoniyati haqida
Agar siz navigatsiya panelini taqdim qilish uchun navlardan foydalanayotgan
bo'lsangiz, role="navigation" ning eng mantiqiy ota-konteyneriga a qo'shing
<ul> yoki <nav> elementni butun navigatsiya atrofiga o'rashni unutmang. Rolni

o'ziga qo'shmang <ul> , chunki bu uning yordamchi texnologiyalar tomonidan
haqiqiy ro'yxat sifatida e'lon qilinishiga to'sqinlik qiladi.
Yodda tutingki, navigatsiya paneli, hatto .nav-tabs sinf bilan yorliqlar sifatida
tasvirlangan bo'lsa ham , , yoki atributlar berilmasligi kerak . Bular WAI ARI A
mualliflik amaliyotlarida tasvirlanganidek, faqat dinamik yorliqli interfeyslar
uchun mos keladi . Misol uchun ushbu bo'limdagi dinamik yorliqli interfeyslar
uchun JavaScript xatti harakatiga qarang . role="tablist"role="tab"role="tabpanel"
Ochiladigan menyulardan foydalanish
Bir oz qo'shimcha HTML va ochiladigan menyular JavaScript plagini bilan
ochiladigan menyularni qo'shing .
Ochiladigan yorliqlar
 Faol
 Ochiladigan ro'yxat
• Havola
• O'chirilgan
<ul class= "nav nav-tabs" >
<li class= "nav-item" >
<a class= "nav-link active" href= "#" > Active </a>
</li>
<li class= "nav-item dropdown" >
<a class= "nav-link dropdown-toggle" data-toggle= "dropdown" href= "#"
role= "button" aria-haspopup= "true" aria-expanded= "false" > Dropdown </a>
<div class= "dropdown-menu" >
<a class= "dropdown-item" href= "#" > Action </a>
<a class= "dropdown-item" href= "#" > Another action </a>
<a class= "dropdown-item" href= "#" > Something else here </a>
<div class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Separated link </a>
</div>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link </a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" > Disabled </a>
</li>
</ul> Nusxalash

Ochiladigan tabletkalar
• Faol
• Ochiladigan ro'yxat
• Havola
• O'chirilgan
Nusxalash
<ul class= "nav nav-pills" >
<li class= "nav-item" >
<a class= "nav-link active" href= "#" > Active </a>
</li>
<li class= "nav-item dropdown" >
<a class= "nav-link dropdown-toggle" data-toggle= "dropdown" href= "#"
role= "button" aria-haspopup= "true" aria-expanded= "false" > Dropdown </a>
<div class= "dropdown-menu" >
<a class= "dropdown-item" href= "#" > Action </a>
<a class= "dropdown-item" href= "#" > Another action </a>
<a class= "dropdown-item" href= "#" > Something else here </a>
<div class= "dropdown-divider" ></div>
<a class= "dropdown-item" href= "#" > Separated link </a>
</div>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link </a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" > Disabled </a>
</li> </ul>
Xulosa
Bootstrap hozirgi kunda eng ko’p ishlatilayotgan front end development
framework hisoblanadi . Unda HTML, CSS va JavaScript to’liq joylashtirilgan va
ushbu framework yordamida o’zingiz istagan sayt ko’rinishini bir necha
daqiqalarda, qiyinchiliklarsiz tayyorlab olishingiz mumkin.

Frameworkning rasmiy getbootstrap.com sayti orqali uni to’liq yuklab olishingiz
va hech qanday cheklovlarsiz ishlatishingiz mumkin. Agar tizim bilan ishlashni
hali bilmasangiz, Google orqali qidirishda Bootstrapga oid minglab darslarni,
maqolalarni topishingiz mumkin. YouTube, Vimeo kabi video saytlarda esa
Bootstrap to’g’risida tayyorlangan video darsni juda ko’plab topish mumkin.

Bootstrap ilk «mobile first» framework hisoblanib, unda birinchi e’tibor
tayyorlangan sahifalar mobil qurilmalarda qanday ko’rinishiga qaratiladi. O’zining

moslashuvchangili sabab Bootstrapda tayyorlangan sahifalar barcha hajmdagi
ekranlarda bir xil chiroyli ko’rinadi. Bootstrap haqiqatdan ham front end
ustalarining ishini bir necha o’n barobarga osonlashtirdi. Bir necha yil avval
HTML va CSS kodlarni to’liq qo’lda yozib sayt tayyorlayotgan kishilar
Bootstrapning qanchalik qulay tizim ekanligini bir necha bor ishlatib ko’rgandanoq
bilib olishlari mumkin.

Bootstrapdagi kompenetalar jadvala tartibi

Купить

Похожие документы
2001-yil sentabr voqealri va uning xalqaro munosabatlarga
1945-1990-yillarda Buyuk Britaniya
1918-1923 yillarda xalqaro munosabatlar, Versal Vashington siyetemasining tuzilishi
Ahmad al-farg‘oniy
Almashlab ekishni loyihalashtirish va joriy etish