Htmlning asosiy teglari. Matnlar bilan ishlash teglari. Htmlda jadvallar va ro’yhatlar bilan ishlash. Htmlda grafika va multimedia

Pedagogik web-dizayn
27-ma’ruza: Utilities: background, borders, colors, display, flex utilita klasslari bilan ishlash
Reja:

• Background
• borders
• colors
• display
• flex utilita klasslari bilan ishlash

Background

Background- maxsus klasslar to’plami bo’lib, elementning orqa fonini o’zgartirish uchun foydalaniladi
borders
borders – klasslar to’plami bo’lib elementning chegarasi va uning radiusini o’zgartirish uchun mo’ljallangan.

colors

colors – maxsus klasslar to’plami bo’lib, odatda matn rangini o’zgartirish uchun foydalaniladi. Har bir rang o’zining ma’nosiga ega hisoblanadi.
display
Display utilities – maxsus klasslar to’plami bo’lib, elementning display xossasini osonlik bilan o’zgartirish imkonini beradi.

• .d-{value} for xs
• .d-{breakpoint}-{value} for sm, md, lg, xl, and xxl.

• none
• inline
• inline-block
• block
• grid
• table
• table-cell
• table-row
• flex
• inline-flex

Display xossasining qiymatlari:

display

d-inline

d-inline

d-block
d-block

flex utilitalari

flex utilities- flex elementlarini boshqarish uchun mo’ljallangan maxsus klasslar to’plami.
Elementni flex ga o’tkazish
Elementni flexga o’tkazish uchun display xossasi uchun flex yoki inlne-flex qiymati ko’rsatiladi
Flex yo’nalishini o’zgartirish uchun flex-direction xossasi uchun row, row-revers, column yoki column-revers qiymatlaridan biri ko’rsatilishi kerak
Flex yo’nalishini o’zgartirish
Justify content
Justify content xossasi start, end, center, space-between, space-around va space-evenly qiymatlaridan birini qabul qilinadi
Align items va align self
Align items xossasi start, end, center, baseline va stretch qiymatlarini birini qabul qiladi.
Align self xossasi start, end, center, baseline va stretch qiymatlaridan birini qabul qiladi
Flex wrap
Flex wrap xossasi nowrap, wrap va wrap-revers qiymatlaridan birini qabul qiladi
Bootsrapning align content xossasi uchun start, end, center, space-around va stretch qiymatlarini ko’rsatishga maxsus klasslar mavjud.
Align content
toasts
Toasts- foydalanuvchilarga xabarnoma ko’rsatish uchun mo’ljallangan maxsus Bootstrap komponenti
! Toast veb sahifaning tezligiga ta’sir ko’rsatganligi uchun, u odatda o’chik holatda bo’ladi. Uni yoqish uchun Javascriptdan foydalanishga to’g’ri keladi
tooltip
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.