Bootstrap modālais logs: mērķis un lietojums

Satura rādītājs:

Bootstrap modālais logs: mērķis un lietojums
Bootstrap modālais logs: mērķis un lietojums
Anonim

Kas ir Bootstrap modāls un kam tas paredzēts? Kādas ir tās sastāvdaļas, īpašības, priekšrocības un trūkumi? Grafiskajā saskarnē tiek izmantots jēdziens "modālais logs". Bieži vien ar tās palīdzību jūs varat pievērst uzmanību kādam svarīgam notikumam. Modālie logi tiek izmantoti, lai ievadītu kādu informāciju, datus, mainītu iestatījumus. Tie bloķē lietotāja darbplūsmu, līdz problēma vai darbība ir pabeigta. Windows tiek izmantota arī tīmekļa lapu izstrādei.

bootstrap modālais logs
bootstrap modālais logs

Kas tas ir

Viegli pielāgojams un atsaucīgs dizains - to šodien piedāvā Bootstrap. Modāls logs - veidlapa, ko var izmantot vietņu izveidei, palīdz attēlot attēlus, videoklipus un citus elementus. Uznirstošais logs sastāv no atšķirīgām lejupielādes daļām: virsraksta, pamatteksta unkājene. Katram no šiem elementiem ir sava nozīme. Bootstrap modālā loga galvenais mērķis ir izmantot iesācēju dizaineriem, lai izveidotu tīmekļa lapas, neierakstot papildu kodus. Modālais logs ir sava veida konteiners, kurā tiek parādīts rakstītais saturs. Modālais komponents atrisina plašu mērķu klāstu.

bootstrap modāla aizvēršana
bootstrap modāla aizvēršana

Kā darīt?

Modālais logs tiek izveidots un kontrolēts, izmantojot JavaScript, datu un css metodes. Vispirms jums ir jāveic uzcenojums. Tas sastāv no rāmja, galvenes, galvenā satura un kājenes. Šeit obligāti elementi ir pagrabs (bloks) un rāmis. Pēc iezīmēšanas jums jāpāriet uz modālā loga izsaukuma ieviešanu. Bieži tas tiek izsaukts pēc tīmekļa lapas ielādes un atbilstošās pogas nospiešanas. Zvans tiek veikts, izmantojot datus un JavaScript. Aizverot Bootstrap modālu, tiek aizvērti iepriekš izveidotie un saglabātie uzdevumi.

Ņemiet vērā, ka modālajam logam ir savas īpašības. Lai atvērtu vairākus modālos logus, jums jāieraksta papildu kods. Vislabāk ir ievietot html kodu dokumenta augšpusē aiz body tag. Tas palīdz saglabāt loga funkcionalitāti un izskatu. Mobilajās ierīcēs ir brīdinājumi par modālā loga komponenta izmantošanu. Tie ierobežo tā pilnīgu izmantošanu. Bootstrap 3 nodrošina pielāgotus logu izmērus, kā arī režģus.

bootstrap 3 modālais logs
bootstrap 3 modālais logs

Komponentes

Pirmslai sāktu strādāt ar Bootstrap, jums ir jāizdomā, no kā tas sastāv. Programma ietver gatavu rīku komplektu, kas tiek izmantots vietņu izveidei. Gatavi JavaScript, CSS un HTML stili veido adaptīvu režģi, displeja pogas, izvēlnes, ikonas, rīka padomus un daudz ko citu. Izkārtojumam ir nepieciešami pamata programmatūras stili. Drukāšanas un teksta stilu klātbūtne ļauj sagatavot pārlūkprogrammu lapas drukāšanai un izveidot vietnes teksta satura dizainu. Izmantojot Bootstrap komponentus, varat izveidot veidlapas, pogas un citus elementus. Programmai ir pilns rīku komplekts, kas ātri un ērti veido lapas mobilajām ierīcēm. Bootstrap sastāv no daudzām citām detaļām, kā arī no JavaScript. Tos ir pietiekami viegli apgūt pat iesācējam. Teorētiski saprast Bootstrap programmas pamatus nav pietiekami viegli. Praksē šī izstrāde vienkāršo dizainera un maketētāja darbu daudzu gatavu komponentu klātbūtnes dēļ.

bootstrap modālā forma
bootstrap modālā forma

Funkcijas

Bootstrap modālam ir dažas īpašas priekšrocības. Ar tās palīdzību tīmekļa vietņu lapu izkārtojumu izstrāde notiek lielā ātrumā. Logs ietver lielu elementu komplektu un gatavus risinājumus. Bootstrap padara jūsu vietni atsaucīgāku. Ietvars (programmatūra) ir piemērots visām pārlūkprogrammām un tiek pareizi parādīts tajās. Šo modālo logu ir viegli lietot. Bootstrap ļauj izveidot tīmekļa lapas pat iesācējiem, kuriem ir pamatzināšanas par CSS un HTML.

Modālā loga īpatnība ir tādaka lietotāji var tai viegli pielāgoties. Daudzi gatavu kodu piemēri un lieliska dokumentācija ļauj viegli tikt galā ar Bootstrap. Par tā kvalitāti var būt liela dizaina tēmu izvēle. Ar šo modālo logu tika izstrādāti WordPress, CMS, Joomla. Bootstrap ir tīmekļa ietvars, kas satur nepieciešamos komponentus un ir apveltīts ar savu ikonu fontu. Tajā ir vairāk nekā divi simti ikonu, tostarp pamata ikonas.

Mīnusi

Bootstrap modālam ir savi trūkumi.

  • Vietnes, kas to izmanto, zaudē savu individuālo stilu. Tie pārstāj būt unikāli, jo pēc izskata un struktūras ir līdzīgi viens otram.
  • Elastības trūkums; bieži vien ir nepieciešams izveidot savus stilus un veikt papildu darbu.
  • Ielādētā koda maiņa var izraisīt darba stundas.
  • Lietotāji bieži ļaunprātīgi izmanto Bootstrap komponentus.

Izmantojiet šo rīku arī priekšgala izstrādei. Neskatoties uz trūkumiem, kas būs acīmredzami ietvara lietotājiem, izkārtojums ar Bootstrap ir lielisks risinājums tīmekļa izstrādātājiem. Tas ļauj jums izveidot vienkāršu un intuitīvu saskarni īsā laika periodā un bez lielas piepūles.

bootstrap atvērts modālais logs
bootstrap atvērts modālais logs

Atsaucīgs dizains

Viens no populārākajiem ietvariem, kas ļauj dizainerim izveidot augstas kvalitātes vietnes un lietojumprogrammas, netērējot tam laiku un pūles, ir Bootstrap 3. Modālais logs nodrošina lietotājam pamata rīku komplektu bez maksas. Ar to jūs varat izmantot JavaScript, CSS, html. Šo programmatūru izveidoja Twitter, un tai ir vairākas funkcijas un priekšrocības. Ietvars tika izveidots mobilajām ierīcēm, tāpēc tā režģis ir paredzēts maziem ekrāniem. Mūsdienās Bootstrap 3 izmanto arī platekrāna ierīcēm. Programmā ir tikai viena atsaucīga režģa sistēma, kuru ražotāji ir paplašinājuši.

Ietvars ir aprīkots ar fontiem. Tie tiek izmantoti kā ikonas. Šajā programmā dizaineri jau nodarbojas ar vektoru fontiem un attēliem, kurus var mainīt pēc vēlēšanās. Bootstrap 3 īpatnība ir tāda, ka tā neatbalsta vecākas pārlūkprogrammas. Responsīvā dizaina koncepcija ir vienkārša: vietne automātiski pielāgojas ekrāna izmēram neatkarīgi no ierīces, no kuras lietotājs tai piekļuva. Atsaucīgam dizainam ir nepieciešamas īpašas zināšanas un prasmes.

Darbs ar Bootstrap

Pirms sākat izpētīt Bootstrap, lejupielādējiet to bez maksas. Pēc lejupielādes un sekojošas izpakošanas lietotājs saņems trīs mapes, kurās ir stili, skripti un ikonu fonti. Tas viss ir Bootstrap. Modālo logu var atvērt pēc mapes izveides ar ietvara nosaukumu. Tajā jums ir jāizveido tukšs fails "ndex.html". Lejupielādētajā programmatūrā atlasiet visu mapi "fonti" un no atbilstošās mapes stilu "bookstrap.css". Neaizmirstiet arī par "bootstrap.js" skriptu. Izveidojiet līdzīgu mapi ar nosaukumu "css" esošajā mapē, ievietojiet tajā "bootstrap.min.css". Izveidojiet vēl vienu "css" ar tukšu "style.css" failu. Tas būs nepieciešams, lai pievienotu savus stilus.

Kad viss nepieciešamais būs izveidots, tālākais darbs tiks veikts tikai ar "ndex.html". Ja nevēlaties rakstīt kodus manuāli, skatiet gatavo html dokumenta skeletu. Kopējiet un ielīmējiet kodu failā. Izveidotajā skeletā tiks savienoti stili, bibliotēka un skripts. Pirms pamatteksta taga neaizmirstiet iekļaut bibliotēku “jQuery”, bet pēc tam - skriptu “js”.

vairāki sāknēšanas modāļi
vairāki sāknēšanas modāļi

Režģis

Bootstrap modālais logs tiek izmantots, lai izveidotu klasisku vietnes izkārtojumu. Tas sastāv no galvenes, pamatteksta, sānu kolonnas un kājenes. Lai viss tiktu parādīts pareizi, ir jāaprēķina katra elementa platums procentos ar atsevišķu iesaiņojumu. Vietnes kājenei un galvenei jābūt 100% platai, pamatteksta un sānu kolonnām var būt mazākas.

Bootstrap režģis ir nepieciešams tikai, lai iestatītu nepieciešamo bloku platumu. Režģa darbība notiek ar tabulas palīdzību, kurā ir kolonnas un rindas. Režģi var izveidot citā režģī neierobežotu skaitu reižu. Ja ar to tiek veidotas vietnes daļas, nav nepieciešams pašam rakstīt adaptīvus vaicājumus. Papildus režģim modālajā logā ir iekļauti daudzi papildu komponenti (izvēlnes, tabulas, cilnes, rīka padomi).

bootstrap modāls nedarbojas
bootstrap modāls nedarbojas

Kļūdas

Dažreiz vairāki Bootstrap modāļi, kas atvērti vienlaikus, var izraisīt kļūdu. Tas ir iespējams, ja Windows to nespējpareizi ielādējiet html failu. Kļūdas esamība norāda, ka fails ir inficēts ar ļaunprātīgu programmatūru vai vīrusu. Visbiežāk ar Bootstrap saistītas kļūdas rodas programmu ielādes, datora vai pēc kādas darbības veikšanas laikā. Visizplatītākie ir tie, kas saistīti ar modālo logu: "Kļūda failā", "Trūkst fails", "Nav atrasts", "Nevar ielādēt", "Neizdevās reģistrēties", "Izpildes un ielādes kļūda". Tie var parādīties, kad lietotājs instalē programmu vai tā jau darbojas, vai kad dators tiek ieslēgts un izslēgts. Ir svarīgi rūpīgi uzraudzīt kļūdu parādīšanos, jo tas palīdz pareizi novērst to rašanās cēloni programmā Bootstrap. Modālais logs dažreiz nedarbojas nepareiza izsaukuma dēļ, kas nav atkarīgs no iekšējām kļūdām.

Ieteicams: