Bootstrap Modal Window: Propòsit i ús

Taula de continguts:

Bootstrap Modal Window: Propòsit i ús
Bootstrap Modal Window: Propòsit i ús
Anonim

Què és un modal Bootstrap i per a què serveix? Quins són els seus components, característiques, avantatges i inconvenients? El concepte de "finestra modal" s'utilitza a la interfície gràfica. Sovint amb la seva ajuda podeu cridar l'atenció sobre algun esdeveniment important. Les finestres modals s'utilitzen per introduir informació, dades, canviar la configuració. Bloquegen el flux de treball de l'usuari fins que es completa el problema o l'acció. Windows també s'utilitza per desenvolupar pàgines web.

finestra modal d'arrencada
finestra modal d'arrencada

Què és això

Disseny fàcil de personalitzar i sensible, això és el que ofereix Bootstrap avui. Una finestra modal, un formulari que es pot utilitzar per crear llocs web, ajuda a mostrar imatges, vídeos i altres elements. La finestra emergent consta de les parts distingibles de la descàrrega: títol, cos ipeu de pàgina. Cadascun d'aquests elements té el seu propi significat. L'objectiu principal de la finestra modal Bootstrap és que els dissenyadors novells l'utilitzin per crear pàgines web sense escriure codis addicionals. Una finestra modal és una mena de contenidor en què es mostra el contingut escrit. El component modal resol una àmplia gamma d'objectius.

tancament modal bootstrap
tancament modal bootstrap

Com fer-ho?

La finestra modal es crea i es controla mitjançant mètodes JavaScript, dades i css. Primer heu de fer un marcatge. Consisteix en un marc, una capçalera, un contingut principal i un peu de pàgina. Els elements obligatoris aquí són el soterrani (bloc) i el marc. Després del marcatge, heu de passar a la implementació de la crida de finestra modal. Sovint s'anomena després de carregar una pàgina web i prémer el botó corresponent. La trucada es fa utilitzant dades i JavaScript. Tancar el modal Bootstrap tanca les tasques creades i desades anteriorment.

Tingues en compte que la finestra modal té les seves pròpies característiques. Per obrir diverses finestres modals, cal escriure codi addicional. El millor és col·locar el codi html a la part superior del document, després de l'etiqueta del cos. Això ajuda a preservar la funcionalitat i l'aspecte de la finestra. Als dispositius mòbils, hi ha advertències sobre l'ús del component de finestra modal. Limiten el seu ús total. Bootstrap 3 permet mides de finestres personalitzades així com quadrícules.

finestra modal bootstrap 3
finestra modal bootstrap 3

Components

Abansper començar a treballar amb Bootstrap, cal esbrinar en què consisteix. El programa inclou un conjunt d'eines ja fetes que s'utilitzen per crear llocs web. Els estils JavaScript, CSS i HTML ja creats creen una graella adaptativa, botons de visualització, menús, icones, informació sobre eines i molt més. Es requereixen estils bàsics de programari per a la disposició. La presència d'estils per a la impressió i el text permet preparar el navegador per imprimir la pàgina i fer el disseny del contingut de text del lloc. Amb els components Bootstrap, podeu crear formularis, botons i altres elements. El programa té un conjunt complet d'eines que formen pàgines de manera ràpida i còmoda per a dispositius mòbils. Bootstrap es compon de molts altres detalls, així com de JavaScript. Són prou fàcils de dominar fins i tot per a un principiant. En teoria, comprendre els conceptes bàsics del programa Bootstrap no és prou fàcil. A la pràctica, aquest desenvolupament simplifica la feina del dissenyador i del dissenyador de maquetació a causa de la presència de molts components ja fets.

forma modal bootstrap
forma modal bootstrap

Característiques

El modal Bootstrap té alguns avantatges especials. Amb la seva ajuda, el desenvolupament de dissenys de pàgines per a llocs web es realitza a gran velocitat. La finestra inclou un gran conjunt d'elements i solucions ja fetes. Bootstrap fa que el vostre lloc web sigui més sensible. El marc (programari) és adequat per a tots els navegadors i es mostra correctament en ells. Aquesta finestra modal és fàcil d'utilitzar. Bootstrap us permet crear pàgines web fins i tot per a principiants que tinguin coneixements bàsics de CSS i HTML.

La peculiaritat de la finestra modal és queque els usuaris s'hi poden adaptar fàcilment. Molts exemples de codi ja fets i una gran documentació fan que sigui fàcil posar-se al dia amb Bootstrap. Sobre la seva qualitat pot ser l'essència d'una gran selecció de temes per al disseny. Wordpress, CMS, Joomla es van desenvolupar amb aquesta finestra modal. Bootstrap és un marc web que conté els components necessaris i està dotat amb el seu propi tipus de lletra d'icones. Inclou més de dues-centes icones, incloses les bàsiques.

Contres

El modal de Bootstrap té els seus inconvenients.

  • Els llocs que l'utilitzen perden el seu estil individual. Deixen de ser únics, ja que són semblants en aspecte i estructura entre ells.
  • Manca de flexibilitat; sovint requereix crear els teus propis estils i fer feina addicional.
  • Canviar el codi carregat pot provocar hores de treball.
  • Sovint els usuaris fan un mal ús dels components Bootstrap.

Utilitzeu aquesta eina també per al desenvolupament frontal. Malgrat les deficiències que seran òbvies per als usuaris del marc, el disseny amb Bootstrap és una gran solució per als desenvolupadors web. Et permet crear una interfície senzilla i intuïtiva en un curt període de temps i sense gaire esforç.

bootstrap oberta la finestra modal
bootstrap oberta la finestra modal

Disseny responsive

Un dels frameworks més populars que permet a un dissenyador crear llocs web i aplicacions d' alta qualitat sense dedicar-hi temps i esforços és Bootstrap 3. La finestra modal ofereix a l'usuari un conjunt bàsic d'eines de forma gratuïta. Amb ell, podeu utilitzar JavaScript, CSS, html. Aquest programari va ser creat per Twitter i té una sèrie de característiques i avantatges. El marc es va crear per a dispositius mòbils, de manera que la seva graella està dissenyada per a pantalles petites. Avui, Bootstrap 3 també s'utilitza per a dispositius de pantalla ampla. Només hi ha un sistema de graella sensible al programa, que els fabricants han ampliat.

El marc inclou tipus de lletra. S'utilitzen com a icones. En aquest programa, els dissenyadors ja s'ocupen de fonts i imatges vectorials, que es poden canviar a voluntat. La particularitat de Bootstrap 3 és que no admet navegadors antics. El concepte de disseny responsiu és senzill: el lloc s'adapta automàticament a la mida de la pantalla, independentment del dispositiu des del qual l'usuari hi ha accedit. El disseny responsive requereix coneixements i habilitats especialitzades.

Treballar amb Bootstrap

Abans de començar a explorar Bootstrap, descarregueu-lo gratuïtament. Després de descarregar i desempaquetar posteriorment, l'usuari rebrà tres carpetes que contenen estils, scripts i tipus de lletra d'icones. Tot això és Bootstrap. Podeu obrir una finestra modal després de crear una carpeta amb el nom del marc. En ell, heu de crear un fitxer buit "ndex.html". Al programari descarregat, seleccioneu tota la carpeta "fonts" i l'estil "bookstrap.css" de la carpeta adequada. No oblideu també l'script "bootstrap.js". Creeu una carpeta similar amb el nom "css" a la carpeta existent, col·loqueu-hi "bootstrap.min.css". Feu un altre "css" amb un fitxer "style.css" buit. El necessitareu per afegir els vostres propis estils.

Quan es creï tot el necessari, es farà més treball només amb "ndex.html". Si no voleu escriure codis manualment, consulteu l'esquelet del document html ja fet. Copieu i enganxeu el codi al fitxer. Els estils, la biblioteca i el guió es connectaran a l'esquelet creat. Abans de l'etiqueta del cos, no oblideu incloure la biblioteca "jQuery" i, després, l'script "js".

múltiples modalitats d'arrencada
múltiples modalitats d'arrencada

Grid

La finestra modal Bootstrap s'utilitza per crear un disseny clàssic del lloc. Consta d'una capçalera, cos, columna lateral i peu de pàgina. Perquè tot es mostri correctament, cal calcular l'amplada de cada element com a percentatge amb embolcall individual. El peu de pàgina i la capçalera del lloc han de tenir un 100% d'amplada, el cos i les columnes laterals poden ser més petites.

La quadrícula Bootstrap és necessària només per establir l'amplada necessària per als blocs. El funcionament de la graella es produeix amb l'ajuda d'una taula que té columnes i files. Es pot fer una graella dins d'una altra graella un nombre il·limitat de vegades. Si es fan parts del lloc amb ell, no cal que escriviu consultes adaptatives. A més de la quadrícula, la finestra modal conté molts components addicionals (menús, taules, pestanyes, informació sobre eines).

El modal d'arrencada no funciona
El modal d'arrencada no funciona

Errors

De vegades, s'obren diversos modalitats d'arrencada al mateix temps poden provocar un error. Això és possible si Windows no pot fer-hocarregar correctament el fitxer html. La presència d'un error indica que el fitxer està infectat amb programari maliciós o un virus. Molt sovint, els errors relacionats amb Bootstrap es produeixen durant la càrrega de programes, l'ordinador o després de realitzar alguna acció. Els més habituals són els associats a la finestra modal: "Error al fitxer", "Arxiu que f alta", "No s'ha trobat", "No es pot carregar", "No s'ha pogut registrar", "Error d'execució i càrrega". Poden aparèixer quan un usuari instal·la un programa o ja s'està executant, o quan l'ordinador està encès i apagat. És important vigilar de prop l'aparició d'errors, ja que això ajuda a eliminar correctament la causa de la seva aparició a Bootstrap. La finestra modal de vegades no funciona a causa d'una trucada incorrecta, que no depèn d'errors interns.

Recomanat: