Responsive web design gird-view

RESPONSIVE Web design gird-view

MUSTAQIL ISH:

RAXMATXANOVA SHODIYA

GRID-VIEW NIMA?

Ko’pgina veb-sahifalar panjara ko’rinishiga asoslangan, ya’ni sahifa ustunlarga bo’lingan

RESPONSIVE WEB DESIGN?

Ko’pgina veb-sahifalar panjara ko’rinishiga asoslangan, ya’ni sahifa ustunlarga bo’lingan:

Ta’sirchan panjara ko’rinishi odatda 12 ta ustundan iborat bo’lib, umumiy kengligi 100% ni tashkil qiladi va brauzer oynasining o’lchamini o’zgartirganda kichrayadi va kengayadi.

RESPONSIVE GRID-VIEW YARATISH.

Keling, sezgir panjara ko’rinishini yaratishni boshlaylik.

Birinchidan, barcha HTML elementlarida box-sizing xususiyati chegara qutisiga o’rnatilganligiga ishonch hosil qiling. Bu plomba va chegara elementlarning umumiy kengligi va balandligiga kiritilganligiga ishonch hosil qiladi.

CSS-ga quyidagi kodni qo’shing:

RESPONSIVE GRID-VIEW YARATISH

Quyidagi misolda ikkita ustunli oddiy javob beruvchi veb-sahifa ko’rsatilgan:

RESPONSIVE GRID-VIEW YARATISH.

Biroq, biz veb-sahifani ko’proq nazorat qilish uchun 12 ta ustunli sezgir panjara ko’rinishidan foydalanmoqchimiz.

Avval bitta ustun uchun foizni hisoblashimiz kerak: 100% / 12 ustun = 8,33%.

Keyin biz 12 ta ustunning har biri uchun bitta sinf yaratamiz, class=«col-» va bo’lim qancha ustun bo’lishi kerakligini belgilaydigan raqam:

RESPONSIVE GRID-VIEW YARATISH

CSS

RESPONSIVE GRID-VIEW YARATISH

Ushbu ustunlarning barchasi chapga suzib, 15px hajmga ega bo’lishi kerak

RESPONSIVE GRID-VIEW YARATISH

Har bir qator o’ralgan bo’lishi kerak

. Qator ichidagi ustunlar soni har doim 12 tagacha qo’shilishi kerak

RESPONSIVE GRID-VIEW YARATISH

Qator ichidagi ustunlar hammasi chapga suzadi va shuning uchun sahifa oqimidan chiqariladi va boshqa elementlar ustunlar mavjud bo’lmagandek joylashtiriladi. Buning oldini olish uchun biz oqimni tozalaydigan uslubni qo’shamiz:

.

• Bundan tashqari, biz uni yanada yaxshiroq qilish uchun ba’zi uslublar va ranglarni qo’shmoqchimiz:

Misol uchun:
html { font-family: "Lucida Sans", sans-serif; } .header { background-color: #9933cc; color: #ffffff; padding: 15px; } .menu ul { list-style-type: none; margin: 0; padding: 0; }
menu li { padding: 8px; margin-bottom: 7px; background-color :#33b5e5; color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .menu li:hover { background-color: #0099cc; }