4.2 Framework Bootstrap

Introducció

El Frameworks ofereixen un entorn de treball que facilita la generació de programes.

Un framework sobre CSS ens ofereix coleccions de classes estàndarts. Aquestes permeten impementar d’una maenra més àgil les idees bàsiques de la interfície de l’aplicació web.

Un framework permet afegir CSS sobre ell, podem afegir estils sobre l’interfície. (sobre les classes, identificadors i elements).

Els frameworks tenen pàgines de manual que especifiquen cada comportament i s’exposen exemples.

Un bon framework facilita la feina, s’ha de llegir un el manual i classificar les divissions i els elements seguint els seus criteris.

Usar un Framework

Per usar un framework hem d’enllaçar el codi dins el head del codi l’html.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

També es pot guardar dins un arxiu en local o dins un servidor propi.

Bootstrap

Podem veure què ens ofereix pegant una ullada a la seva pàgina d’exemples.

Una de les característiques més importants és que aporta una construcció d’interfície que és responsive.

Per construir amb bootstrap o qualsevol framework seguim les mateixes pases que s’han explicat a la pràctica guiada d’estructura html i CSS.

Pas per pas es va contruint la pàgina.

  1. Divisió principal
    1. Divisió de títol i menú.
    2. Divisió de contingut. Té dues columnes class=”row”:
      1. Llistat de links als exercicis.
      2. Continguts. Cada contingut és un div d’exercici (titol,paràgraf,imatge o embed).

L’implementació:

See the Pen pagina bootstrap by PereAntoni (@pereantoni) on CodePen.

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>