Bootstrap-modale venster: doel en gebruik

INHOUDSOPGAWE:

Bootstrap-modale venster: doel en gebruik
Bootstrap-modale venster: doel en gebruik
Anonim

Wat is 'n Bootstrap-modaal en waarvoor is dit? Wat is die komponente, kenmerke, voordele en nadele daarvan? Die konsep van "modale venster" word in die grafiese koppelvlak gebruik. Dikwels met sy hulp kan jy die aandag vestig op 'n belangrike gebeurtenis. Modale vensters word gebruik om sekere inligting, data in te voer, instellings te verander. Hulle blokkeer die gebruiker se werkvloei totdat die probleem of aksie voltooi is. Windows word ook gebruik om webblaaie te ontwikkel.

bootstrap modale venster
bootstrap modale venster

Wat is dit

Maklik aanpasbare en responsiewe ontwerp, dit is wat Bootstrap vandag bied. 'n Modale venster, 'n vorm wat gebruik kan word om webwerwe te skep, help om beelde, video's en ander elemente te vertoon. Die opspringer bestaan uit die onderskeibare dele van die aflaai: titel, liggaam envoetskrif. Elkeen van hierdie elemente het sy eie betekenis. Die hoofdoel van die Bootstrap-modale venster is om deur beginner ontwerpers gebruik te word om webblaaie te skep sonder om bykomende kodes te skryf. 'n Modale venster is 'n soort houer waarin die geskrewe inhoud vertoon word. Die modale komponent los 'n wye reeks doelwitte op.

bootstrap modale sluiting
bootstrap modale sluiting

Hoe om te doen?

Die modale venster word geskep en beheer deur JavaScript, data en css-metodes te gebruik. Eerstens moet jy opmaak maak. Dit bestaan uit 'n raam, kopskrif, hoofinhoud en voetskrif. Verpligte elemente hier is die kelder (blok) en die raam. Na die opmaak moet u voortgaan met die implementering van die modale vensteroproep. Dikwels word dit genoem nadat 'n webblad gelaai is en die ooreenstemmende knoppie gedruk is. Die oproep word gemaak met behulp van data en JavaScript. Die sluiting van die Bootstrap-modaal sluit die voorheen geskepte en gestoorde take.

Hou in gedagte dat die modale venster sy eie kenmerke het. Om verskeie modale vensters oop te maak, moet jy addisionele kode skryf. Dit is die beste om die HTML-kode bo-aan die dokument te plaas, na die body tag. Dit help om die funksionaliteit en voorkoms van die venster te behou. Op mobiele toestelle is daar waarskuwings rakende die gebruik van die modale vensterkomponent. Hulle beperk die volle gebruik daarvan. Bootstrap 3 laat pasgemaakte venstergroottes sowel as roosters toe.

bootstrap 3 modale venster
bootstrap 3 modale venster

Components

Voorheenom met Bootstrap te begin werk, moet jy uitvind waaruit dit bestaan. Die program sluit 'n stel gereedgemaakte gereedskap in wat gebruik word om webwerwe te skep. Klaargemaakte JavaScript-, CSS- en HTML-style bou 'n aanpasbare rooster, vertoon knoppies, spyskaarte, ikone, nutswenke, en meer. Basiese sagtewarestyle word benodig vir uitleg. Die teenwoordigheid van style vir drukwerk en teks laat jou toe om die blaaier voor te berei vir die druk van die bladsy en die ontwerp van die teksinhoud van die werf te maak. Met Bootstrap-komponente kan u vorms, knoppies en ander elemente skep. Die program het 'n volledige stel gereedskap wat vinnig en gerieflik bladsye vir mobiele toestelle opmaak. Bootstrap bestaan uit baie ander besonderhede sowel as JavaScript. Hulle is maklik genoeg om selfs vir 'n beginner te bemeester. In teorie is dit nie maklik genoeg om die basiese beginsels van die Bootstrap-program te verstaan nie. In die praktyk vereenvoudig hierdie ontwikkeling die werk van die ontwerper en uitlegontwerper as gevolg van die teenwoordigheid van baie klaargemaakte komponente.

bootstrap modale vorm
bootstrap modale vorm

Kenmerke

Die Bootstrap-modaal het 'n paar spesiale voordele. Met sy hulp vind die ontwikkeling van bladsyuitlegte vir webwerwe teen 'n hoë spoed plaas. Die venster bevat 'n groot stel elemente en klaargemaakte oplossings. Bootstrap maak jou webwerf meer responsief. Die raamwerk (sagteware) is geskik vir alle blaaiers en word korrek daarin vertoon. Hierdie modale venster is maklik om te gebruik. Bootstrap laat jou toe om webblaaie te skep, selfs vir beginners wat basiese kennis van CSS en HTML het.

Die eienaardigheid van die modale venster is ditdat gebruikers maklik daarby kan aanpas. Baie klaargemaakte kodevoorbeelde en uitstekende dokumentasie maak dit maklik om op hoogte te kom met Bootstrap. Oor die kwaliteit daarvan kan die kern van 'n groot verskeidenheid temas vir ontwerp wees. Wordpress, CMS, Joomla is ontwikkel met hierdie modale venster. Bootstrap is 'n webraamwerk wat die nodige komponente bevat en toegerus is met sy eie ikoonlettertipe. Dit sluit meer as tweehonderd ikone in, insluitend basiese.

Nadele

Bootstrap se modaal het sy nadele.

  • Werwe wat dit gebruik, verloor hul individuele styl. Hulle hou op om uniek te wees, want hulle is soortgelyk in voorkoms en struktuur aan mekaar.
  • Gebrek aan buigsaamheid; vereis dikwels dat jy jou eie style skep en ekstra werk doen.
  • Die verandering van die gelaaide kode kan lei tot ure se werk.
  • Gebruikers misbruik dikwels selflaai-komponente.

Gebruik hierdie hulpmiddel ook vir front-end ontwikkeling. Ten spyte van die tekortkominge wat vir die gebruikers van die raamwerk duidelik sal wees, is die uitleg met Bootstrap 'n uitstekende oplossing vir webontwikkelaars. Dit laat jou toe om 'n eenvoudige en intuïtiewe koppelvlak binne 'n kort tydperk en sonder veel moeite te skep.

bootstrap oop modale venster
bootstrap oop modale venster

Responsiewe ontwerp

Een van die gewildste raamwerke wat 'n ontwerper toelaat om webwerwe en toepassings van hoë geh alte te skep sonder om tyd en moeite daaraan te spandeer, is Bootstrap 3. Die modale venster voorsien die gebruiker van 'n basiese stel gereedskap gratis. Daarmee kan jy JavaScript, CSS, html gebruik. Hierdie sagteware is deur Twitter geskep en het 'n aantal kenmerke en voordele. Die raamwerk is vir mobiele toestelle geskep, so sy rooster is ontwerp vir klein skerms. Vandag word Bootstrap 3 ook vir wyeskermtoestelle gebruik. Daar is net een responsiewe roosterstelsel in die program, wat deur die vervaardigers uitgebrei is.

Die raamwerk kom met lettertipes. Hulle word as ikone gebruik. In hierdie program is ontwerpers reeds besig met vektorlettertipes en prente, wat na goeddunke verander kan word. Die eienaardigheid van Bootstrap 3 is dat dit nie ouer blaaiers ondersteun nie. Die konsep van responsiewe ontwerp is eenvoudig: die webwerf pas outomaties aan by die skermgrootte, ongeag die toestel van waar die gebruiker toegang daartoe verkry het. Responsiewe ontwerp vereis spesialiskennis en vaardighede.

Werk met Bootstrap

Voordat jy Bootstrap begin verken, laai dit gratis af. Na aflaai en daaropvolgende uitpak, sal die gebruiker drie dopgehou ontvang wat style, skrifte en ikoonlettertipes bevat. Dit alles is Bootstrap. U kan 'n modale venster oopmaak nadat u 'n gids met die naam van die raamwerk geskep het. Daarin moet jy 'n leë lêer "ndex.html" skep. In die afgelaaide sagteware, kies die hele "fonts"-lêergids en die "bookstrap.css"-styl uit die toepaslike gids. Moenie die "bootstrap.js"-skrip ook vergeet nie. Skep 'n soortgelyke vouer met die naam "css" in die bestaande vouer, plaas "bootstrap.min.css" daarin. Maak nog 'n "css" met 'n leë "style.css" lêer. Jy sal dit nodig hê om jou eie style by te voeg.

Wanneer alles wat nodig is geskep is, sal verdere werk slegs met "ndex.html" gedoen word. As jy nie kodes met die hand wil skryf nie, verwys na die klaargemaakte html-dokumentskelet. Kopieer en plak die kode in die lêer. Style, biblioteek en skrif sal in die geskepte skelet verbind word. Voor die lyfmerker, moenie vergeet om die "jQuery"-biblioteek in te sluit nie, en daarna - die "js"-skrif.

veelvuldige selflaai-modale
veelvuldige selflaai-modale

Grid

Die Bootstrap-modale venster word gebruik om 'n klassieke werfuitleg te skep. Dit bestaan uit 'n kopskrif, liggaam, sykolom en voetskrif. Om alles korrek te vertoon, is dit nodig om die breedte van elke element as 'n persentasie met individuele wikkeling te bereken. Die voetskrif en kopskrif van die werf moet 100% wyd wees, die liggaam en sykolomme kan kleiner wees.

Die Bootstrap-rooster is nodig net om die vereiste breedte vir die blokke te stel. Die funksionering van die rooster vind plaas met behulp van 'n tabel wat kolomme en rye het. 'n Rooster kan 'n onbeperkte aantal kere binne 'n ander rooster gemaak word. As dele van die webwerf daarmee gemaak word, is dit nie nodig om self aanpasbare navrae te skryf nie. Benewens die rooster, bevat die modale venster baie bykomende komponente (spyskaarte, tabelle, oortjies, nutswenke).

bootstrap modaal werk nie
bootstrap modaal werk nie

Foute

Soms kan verskeie Bootstrap-modale gelyktydig oopmaak 'n fout veroorsaak. Dit is moontlik as Windows nie kan nielaai html-lêer korrek. Die teenwoordigheid van 'n fout dui aan dat die lêer met wanware of 'n virus besmet is. Meestal vind Bootstrap-verwante foute plaas tydens die laai van programme, die rekenaar of nadat 'n aksie uitgevoer is. Die mees algemene is dié wat met die modale venster geassosieer word: "Fout in lêer", "Vermiste lêer", "Nie gevind nie", "Kan nie laai nie", "Kon nie registreer nie", "Uitvoer- en laaifout". Hulle kan verskyn wanneer 'n gebruiker 'n program installeer of dit reeds loop, of wanneer die rekenaar aan- en afgeskakel word. Dit is belangrik om die voorkoms van foute fyn dop te hou, aangesien dit help om die oorsaak van hul voorkoms in Bootstrap korrek uit te skakel. Die modale venster werk soms nie as gevolg van 'n verkeerde oproep, wat nie van interne foute afhang nie.

Aanbeveel: