Bootstrap (framework)

Bootstrap, també conegut com a "bootstrap for twitter" o "blueprint for twitter" és una biblioteca multiplataforma o conjunt d'eines de codi obert per al fàcil disseny de llocs i aplicacions web. Conté plantilles de disseny amb tipografia, formularis, botons, quadres, menús de navegació i altres elements de disseny basat en HTML i CSS, així com extensions de Javascript addicionals. A diferència de molts frameworks web, només s'ocupa del desenvolupament "front-end", no té res a veure amb el "back-end".

Bootstrap

Tipus	Framework de CSS i programari lliure i de codi obert
Versió inicial	19 agost 2011
Versió estable	5.3.3 (20 febrer 2024)
Llicència	llicència MIT
Característiques tècniques
Sistema operatiu	multiplataforma
Plataforma	plataforma web
Escrit en	JavaScript, fulls d’estil en cascada, HTML i Sass
Equip
Creador/s	Mark Otto (en) i Jacob Thornton (en)
Fonts de codi  Codi font Codi font Debian libjs-bootstrap Ubuntu libjs-bootstrap
Més informació
Lloc web	getbootstrap.com (anglès)
Stack Exchange	Etiqueta
Free Software Directory	Bootstrap

Bootstrap és el segon projecte més destacat en GitHub i és usat per la NASA i la MSNBC entre altres organitzacions.

Origen

Bootstrap, originalment dit Blueprint de Twitter, va ser desenvolupat per Mark Otto i Jacob Thornton de Twitter, com un marc de treball (framework) per a fomentar la consistència entre les eines internes. Abans de Bootstrap, es van usar diverses biblioteques per al desenvolupament d'interfícies d'usuari, les quals va generar inconsistències i una gran càrrega de treball en el seu manteniment. Segons el desenvolupador de Twitter, Mark Otto, enfront d'aquests desafiaments:

«	"...un petit grup de desenvolupadors i jo ens reunim per a dissenyar i construir una nova eina interna i vam veure l'oportunitat de fer una mica més. A través d'aquest procés, ens vam veure construint una cosa molt més substancial que una altra eina interna. Mesos després acabem amb una primera versió de Bootstrap com una manera de documentar i compartir béns i patrons de disseny comuns dins de la companyia."	»
— Mark Otto

El primer desenvolupament en condicions reals va ocórrer durant la primera "Setmana de Hackeo" (Hackweek) de Twitter. Mark Otto va mostrar a alguns col·legues com accelerar el desenvolupament dels seus projectes amb l'ajuda de l'eina de treball. Com a resultat, desenes de temes s'han introduït en el marc de treball. L'agost del 2011, Twitter va alliberar a Bootstrap com a codi obert. El febrer del 2012, es va convertir en el projecte de desenvolupament més popular de GitHub.

Versions

Versions
Versió 1	v1.4.0, v1.3.0, v1.2.0, v1.1.1, v1.1.0, v1.0.0
Versió 2	v2.3.2, v2.3.1, v2.3.0, v2.2.2, v2.2.1, v2.2.0, v2.1.1, v2.1.0, v2.0.4, v2.0.3, v2.0.2, v2.0.1, v2.0.0
Versió 3	v3.3.7, v3.3.6, v3.3.5, v3.3.4, v3.3.2, v3.3.1, v3.3.0, v3.2.0, v3.1.1, v3.1.0, v3.0.3, v3.0.2, v3.0.1, v3.0.0
Versió 4	v4.1.3, v4.1.2, v4.1.1, v4.1.0, v4.0.0

Característiques

Bootstrap té un suport relativament incomplet per a HTML5 i CSS 3, però és compatible amb la majoria dels navegadors web. La informació bàsica de compatibilitat de llocs web o aplicacions està disponible per a tots els dispositius i navegadors. Existeix un concepte de compatibilitat parcial que fa disponible la informació bàsica d'un lloc web per a tots els dispositius i navegadors. Per exemple, les propietats introduïdes en CSS3 per a les cantonades arrodonides, gradients i ombres són usades per Bootstrap malgrat la falta de suport de navegadors antics. Això estén la funcionalitat de l'eina, però no és requerida per al seu ús.

Des de la versió 2.0 també suporta dissenys web adaptables. Això significa que el disseny gràfic de la pàgina s'ajusta dinàmicament, prenent en compte les característiques del dispositiu usat (Computadores, tauletes, telèfons mòbils).

Bootstrap és de codi obert i està disponible en GitHub. Els desenvolupadors estan motivats a participar en el projecte i a fer les seves pròpies contribucions a la plataforma.

Funció i Estructura

Exemple d'una pàgina web usant el Framework de Bootstrap renderitzada en Mozilla Firefox

Bootstrap és modular i consisteix essencialment en una sèrie de fulles d'estil LESS que implementen la varietat de components de l'eina. Una fulla d'estil anomenada bootstrap.less inclou els components de les fulles d'estil. Els desenvolupadors poden adaptar el mateix arxiu de Bootstrap, seleccionant els components que desitgin usar en el seu projecte.

Els ajustos són possibles en una mesura limitada a través d'una fulla d'estil de configuració central. Els canvis més profunds són possibles mitjançant les declaracions LESS.

L'ús del llenguatge de fulles d'estil LESS permet l'ús de variables, funcions i operadors, selectors niats, així com classes mixin.

Des de la versió 2.0, la configuració de Bootstrap també té una opció especial de "Personalitzar" en la documentació. D'altra banda, els desenvolupadors trien en un formulari els components i ajustos desitjats, i de ser necessari, els valors de diverses opcions a les seves necessitats. El paquet conseqüentment generat ja inclou la fulla d'estil CSS pre-compilada.

Sistema de quadrilla i disseny sensible

Bootstrap ve amb una disposició de quadrilla estàndard de 940 píxels d'ample. Alternativament, el desenvolupador pot usar un disseny d'ample-variable. Per a tots dos casos, l'eina té quatre variacions per a fer ús de diferents resolucions i tipus de dispositius: telèfons mòbils, format de retrat i paisatge, tauletes i computadores amb baixa i alta resolució (pantalla ampla). Això ajusta l'ample de les columnes automàticament.

Compressió de la fulla d'estil CSS

Bootstrap proporciona un conjunt de fulles d'estil que proveeixen definicions bàsiques d'estil per a tots els components d'HTML. Això atorga una uniformitat al navegador i al sistema d'amplària, dona una aparença moderna per al formato dels elements de text, taules i formularis.

Components reutilitzables

En addició als elements regulars d'HTML, Bootstrap conté una altra interfície d'elements comunament usats. Aquesta inclou botons amb característiques avançades (e.g grup de botons o botons amb opció de menú desplegable, llistes de navegació, etiquetes horitzontals i verticals, ruta de navegació, paginació, etc.), etiquetes, capacitats avançades de miniatures tipogràfiques, formats per a missatges d'alerta i barres de progrés.

Plugins de JavaScript

Els components de Javascript per a Bootstrap estan basats en la llibreria jQuery de Javascript. Els plugins es troben en l'eina de plugin de jQuery. Proveeixen elements addicionals d'interfície d'usuari com a diàlegs, tooltips i carrusels. També estenen la funcionalitat d'alguns elements d'interfície existents, incloent-hi per exemple una funció d'acte-completar per a camps d'entrada (input). La versió 2.0 suporta els següents plugins de Javascript: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel i Typeahead.

Una implementació de Bootstrap usant el Dojo toolkit també està disponible. És anomenada Dojo Bootstrap i és un port dels plugins de Twitter Bootstrap. Usa el codi Dojo al 100% i té suport per a AMD (Asynchronous Moduli Definition).

Ús

Per a usar Bootstrap en una pàgina HTML, el desenvolupador només ha de descarregar la fulla d'estil Bootstrap CSS i enllaçar-la en l'arxiu HTML. Una altra opció seria compilar l'arxiu CSS des de la fulla d'estil LESS o SASS descarregada. Això pot realitzar-se amb un compilador especial.

Si el desenvolupador també vol fer servir els components de Javascript, aquests han d'estar referenciats juntament amb la llibreria jQuery en el document HTML.

El següent exemple il·lustra com funciona. El codi HTML defineix un simple formulari de cerca i una llista de resultats en un formulari tabular. La pàgina consisteix en elements regulars i semàntics d'HTML 5, i alguna informació addicional de la classe de CSS d'acord amb la documentació de Bootstrap. La figura mostra la representació del document en Mozilla Firefox 10.

<!DOCTYPE html>
<html>
<head>
<title>Exemple de Bootstrap</title>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>
<div class="container">
<h1>Search</h1>
<label>Exemple d'un formulari senzill de cerca.</label>

<!-- Formulari de cerca amb un camp d'entrada (input) i un botó -->
<form class="well form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn btn-primary">Buscar</button>
</form>

<h2>Resultats</h2>

<!-- taula amb cel·les de color de fons alternants i amb marc -->
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Títol</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
<tr>
<td>2</td>
<td>Consetetur sadipscing elitr</td>
</tr>
<tr>
<td>3</td>
<td>At vero eos et accusam</td>
</tr>
</tbody>
</table>
</div>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Creant una quadrilla de disseny fixa

<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-8">...</div>
</div>

Creant una quadrilla de disseny fixa amb una quadrilla de disseny fluida niada

<div class="row">
<div class="col-md-4">
<div class="4">...</div>
<div class="4">...</div>
<div class="4">...</div>
</div>
<div class="col-md-8">...</div>
</div>

Enllaços externs

• Bootstrap - Lloc web oficial
• Create Clean Webpages with Twitter Bootstrap - Una peça breu damunt CodeProject que demostra com per començar amb la biblioteca
• BootTheme : Web Designer and Theme Generator for Twitter Bootstrap - eina En línia per dissenyar pàgines de web i generar temes
• Bootstrap en Español - la traducció ha estat avalada pel Lloc Oficial de Bootstrap i
• Bootstrap 3, el manual oficial en Castellà. Traductor: Javier Eguiluz