Bootstrap modal oynasi: maqsad va foydalanish

Mundarija:

Bootstrap modal oynasi: maqsad va foydalanish
Bootstrap modal oynasi: maqsad va foydalanish
Anonim

Bootstrap modali nima va u nima uchun? Uning tarkibiy qismlari, xususiyatlari, afzalliklari va kamchiliklari qanday? Grafik interfeysda “modal oyna” tushunchasidan foydalaniladi. Ko'pincha uning yordami bilan siz biron bir muhim voqeaga e'tibor qaratishingiz mumkin. Modal oynalar ba'zi ma'lumotlarni, ma'lumotlarni kiritish, sozlamalarni o'zgartirish uchun ishlatiladi. Ular muammo yoki harakat tugamaguncha foydalanuvchining ish jarayonini bloklaydi. Windows veb-sahifalarni ishlab chiqish uchun ham ishlatiladi.

yuklash modal oynasi
yuklash modal oynasi

Bu nima

Oson sozlanishi va sezgir dizayn, bugungi kunda Bootstrap taklif qiladigan narsa. Modal oyna, veb-saytlarni yaratish uchun ishlatilishi mumkin bo'lgan shakl, tasvirlar, videolar va boshqa elementlarni ko'rsatishga yordam beradi. Qalqib chiquvchi oyna yuklab olishning ajralib turadigan qismlaridan iborat: sarlavha, asosiy va altbilgi. Ushbu elementlarning har biri o'ziga xos ma'noga ega. Bootstrap modal oynasining asosiy maqsadi yangi boshlanuvchilar tomonidan qo'shimcha kodlar yozmasdan veb-sahifalarni yaratish uchun foydalanishdir. Modal oyna - bu yozma tarkib ko'rsatiladigan konteyner turi. Modal komponent keng doiradagi maqsadlarni hal qiladi.

bootstrap modal yopilishi
bootstrap modal yopilishi

Qanday qilish kerak?

Modal oyna JavaScript, ma'lumotlar va CSS usullari yordamida yaratiladi va boshqariladi. Avval siz markirovka qilishingiz kerak. U ramka, sarlavha, asosiy tarkib va altbilgidan iborat. Bu erda majburiy elementlar podval (blok) va ramka hisoblanadi. Belgilashdan so'ng siz modal oyna chaqiruvini amalga oshirishga o'tishingiz kerak. Ko'pincha veb-sahifani yuklagandan va tegishli tugmani bosgandan so'ng chaqiriladi. Qo'ng'iroq ma'lumotlar va JavaScript yordamida amalga oshiriladi. Bootstrap modalini yopish avval yaratilgan va saqlangan vazifalarni yopadi.

Yodda tutingki, modal oynaning oʻziga xos xususiyatlari bor. Bir nechta modal oynalarni ochish uchun siz qo'shimcha kod yozishingiz kerak. Hujjatning yuqori qismiga, tana tegidan keyin HTML kodini qo'yish yaxshidir. Bu oynaning funksionalligi va ko'rinishini saqlab qolishga yordam beradi. Mobil qurilmalarda modal oyna komponentidan foydalanish bo'yicha ogohlantirishlar mavjud. Ular to'liq foydalanishni cheklaydi. Bootstrap 3 maxsus oyna oʻlchamlari va panjaralarni oʻrnatishga imkon beradi.

bootstrap 3 modal oynasi
bootstrap 3 modal oynasi

Komponentlar

OldinBootstrap bilan ishlashni boshlash uchun uning nimadan iboratligini aniqlash kerak. Dastur veb-saytlarni yaratish uchun ishlatiladigan tayyor vositalar to'plamini o'z ichiga oladi. Tayyor JavaScript, CSS va HTML uslublari moslashtirilgan panjara, displey tugmalari, menyular, piktogrammalar, maslahatlar va boshqalarni yaratadi. Tartib uchun asosiy dasturiy ta'minot uslublari talab qilinadi. Chop etish va matn uchun uslublarning mavjudligi brauzerni sahifani chop etishga tayyorlashga va saytning matn tarkibining dizaynini yaratishga imkon beradi. Bootstrap komponentlari yordamida siz shakllar, tugmalar va boshqa elementlarni yaratishingiz mumkin. Dastur mobil qurilmalar uchun sahifalarni tez va qulay tarzda tashkil etuvchi vositalarning to'liq to'plamiga ega. Bootstrap JavaScript bilan bir qatorda boshqa ko'plab tafsilotlardan iborat. Ular hatto yangi boshlanuvchilar uchun ham oson o'zlashtiriladi. Nazariy jihatdan, Bootstrap dasturining asoslarini tushunish unchalik oson emas. Amalda, bu ishlanma ko'plab tayyor komponentlar mavjudligi sababli dizayner va maket dizaynerining ishini osonlashtiradi.

bootstrap modal shakli
bootstrap modal shakli

Xususiyatlar

Bootstrap modali bir qancha maxsus afzalliklarga ega. Uning yordami bilan veb-saytlar uchun sahifa maketlarini ishlab chiqish yuqori tezlikda amalga oshiriladi. Oynada elementlarning katta to'plami va tayyor echimlar mavjud. Bootstrap veb-saytingizni yanada sezgir qiladi. Ramka (dasturiy ta'minot) barcha brauzerlar uchun mos keladi va ularda to'g'ri ko'rsatiladi. Ushbu modal oynadan foydalanish oson. Bootstrap hatto CSS va HTML bo'yicha asosiy bilimlarga ega bo'lgan yangi boshlanuvchilar uchun ham veb-sahifalar yaratish imkonini beradi.

Modali oynaning o`ziga xosligi shundakifoydalanuvchilar unga osongina moslasha oladi. Ko'plab tayyor kod misollari va ajoyib hujjatlar Bootstrap bilan ishlashni osonlashtiradi. Uning sifati haqida dizayn uchun mavzularning katta tanlovining mohiyati bo'lishi mumkin. Wordpress, CMS, Joomla ushbu modal oyna bilan ishlab chiqilgan. Bootstrap - bu kerakli komponentlarni o'z ichiga olgan va o'ziga xos piktogramma shrifti bilan ta'minlangan veb-ramka. Unga ikki yuzdan ortiq piktogramma kiradi, jumladan, asosiylari.

Kasalliklar

Bootstrap modalining kamchiliklari bor.

  • Undan foydalanadigan saytlar individual uslublarini yoʻqotadi. Ular noyob bo'lishni to'xtatadilar, chunki ular tashqi ko'rinishi va tuzilishi jihatidan bir-biriga o'xshash.
  • Moslashuvchanlikning yo'qligi; koʻpincha oʻz uslublaringizni yaratish va qoʻshimcha ishlarni bajarish talab etiladi.
  • Yuklangan kodni oʻzgartirish ish soatlariga olib kelishi mumkin.
  • Foydalanuvchilar koʻpincha Bootstrap komponentlarini notoʻgʻri ishlatishadi.

Ushbu vositadan front-end ishlab chiqish uchun ham foydalaning. Ramka foydalanuvchilari uchun aniq bo'ladigan kamchiliklarga qaramay, Bootstrap bilan tartib veb-ishlab chiquvchilar uchun ajoyib echimdir. Bu sizga qisqa vaqt ichida va ko‘p kuch sarflamasdan sodda va intuitiv interfeys yaratish imkonini beradi.

bootstrap ochiq modal oyna
bootstrap ochiq modal oyna

Responsive dizayn

Dizaynerga vaqt va kuch sarflamasdan yuqori sifatli veb-saytlar va ilovalar yaratish imkonini beruvchi eng mashhur ramkalardan biri bu Bootstrap 3. Modal oyna foydalanuvchiga asosiy vositalar toʻplamini bepul taqdim etadi. Uning yordamida siz JavaScript, CSS, html dan foydalanishingiz mumkin. Ushbu dastur Twitter tomonidan yaratilgan va bir qator funksiya va afzalliklarga ega. Ramka mobil qurilmalar uchun yaratilgan, shuning uchun uning panjarasi kichik ekranlar uchun mo'ljallangan. Bugungi kunda Bootstrap 3 keng ekranli qurilmalar uchun ham qo'llaniladi. Dasturda ishlab chiqaruvchilar tomonidan kengaytirilgan faqat bitta javob beruvchi tarmoq tizimi mavjud.

Romka shriftlar bilan birga keladi. Ular piktogramma sifatida ishlatiladi. Ushbu dasturda dizaynerlar allaqachon vektor shriftlari va rasmlari bilan shug'ullanadilar, ularni xohlagancha o'zgartirish mumkin. Bootstrap 3 ning o'ziga xosligi shundaki, u eski brauzerlarni qo'llab-quvvatlamaydi. Ta'sirchan dizayn tushunchasi oddiy: foydalanuvchi unga qaysi qurilmadan kirgan bo'lishidan qat'i nazar, sayt avtomatik ravishda ekran o'lchamiga moslashadi. Ta'sirchan dizayn maxsus bilim va ko'nikmalarni talab qiladi.

Bootstrap bilan ishlash

Bootstrap bilan tanishishni boshlashdan oldin uni bepul yuklab oling. Yuklab olish va undan keyin ochishdan so'ng, foydalanuvchi uslublar, skriptlar va piktogramma shriftlarini o'z ichiga olgan uchta papkani oladi. Bularning barchasi Bootstrap. Ramka nomi bilan papkani yaratgandan so'ng modal oynani ochishingiz mumkin. Unda siz "ndex.html" bo'sh faylini yaratishingiz kerak. Yuklab olingan dasturiy ta'minotda to'liq "shriftlar" jildini va tegishli papkadan "bookstrap.css" uslubini tanlang. "bootstrap.js" skriptini ham unutmang. Mavjud papkada "css" nomi bilan shunga o'xshash papka yarating, unga "bootstrap.min.css" ni joylashtiring. Bo'sh "style.css" fayli bilan boshqa "css" yarating. U oʻz uslublaringizni qoʻshish uchun kerak boʻladi.

Kerakli hamma narsa yaratilganda keyingi ishlar faqat "ndex.html" bilan amalga oshiriladi. Agar siz kodlarni qo'lda yozishni xohlamasangiz, tayyor html hujjat skeletiga qarang. Kodni nusxalash va faylga joylashtirish. Uslublar, kutubxona va skript yaratilgan skeletda ulanadi. Tana tegidan oldin "jQuery" kutubxonasini, keyin esa "js" skriptini qo'shishni unutmang.

bir nechta yuklash modallari
bir nechta yuklash modallari

Grid

Bootstrap modal oynasi klassik sayt tartibini yaratish uchun ishlatiladi. U sarlavha, korpus, yon ustun va pastki qismdan iborat. Har bir narsa to'g'ri ko'rsatilishi uchun har bir elementning kengligini individual o'rash bilan foiz sifatida hisoblash kerak. Saytning pastki va sarlavhasi 100% keng boʻlishi kerak, korpus va yon ustunlar kichikroq boʻlishi mumkin.

Bootstrap panjarasi faqat bloklar uchun kerakli kenglikni o'rnatish uchun kerak. To'rning ishlashi ustunlar va satrlarga ega bo'lgan jadval yordamida amalga oshiriladi. To'r boshqa panjara ichida cheksiz ko'p marta tuzilishi mumkin. Agar saytning qismlari u bilan tuzilgan bo'lsa, moslashtirilgan so'rovlarni o'zingiz yozishingiz shart emas. Tarmoqqa qo'shimcha ravishda modal oynada ko'plab qo'shimcha komponentlar (menyular, jadvallar, yorliqlar, maslahatlar) mavjud.

bootstrap modali ishlamayapti
bootstrap modali ishlamayapti

Xatolar

Ba'zan bir vaqtning o'zida bir nechta Bootstrap modallarining ochilishi xatolikka olib kelishi mumkin. Agar Windows buni qila olmasa, bu mumkinhtml faylni to'g'ri yuklang. Xatoning mavjudligi faylning zararli dastur yoki virus bilan zararlanganligini ko'rsatadi. Ko'pincha, Bootstrap bilan bog'liq xatolar dasturlarni, kompyuterni yuklash paytida yoki biron bir harakatni amalga oshirgandan so'ng yuzaga keladi. Eng keng tarqalganlari modal oyna bilan bog'liq bo'lganlar: "Fayldagi xato", "Yo'qolgan fayl", "topilmadi", "Yuklab bo'lmadi", "Ro'yxatdan o'tishda xatolik", "Bajarish va yuklash xatosi". Ular foydalanuvchi dasturni o'rnatayotganda yoki u allaqachon ishlayotganida yoki kompyuter yoqilgan va o'chirilganida paydo bo'lishi mumkin. Xatolar paydo bo'lishini diqqat bilan kuzatib borish juda muhim, chunki bu Bootstrap-da ularning paydo bo'lish sababini to'g'ri yo'q qilishga yordam beradi. Modal oyna ba'zan noto'g'ri qo'ng'iroq tufayli ishlamaydi, bu ichki xatolarga bog'liq emas.

Tavsiya: