IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

http://webdesign.tutsplus.com/articles/build-bootstrap-in-minutes-using-emmet--webdesign-14585

Logo de bootstrap

Bootstrap és un framework desenvolupat per enginyers de Twitter per al desenvolupament de pàgines web responsive (a vegades traduït al català com pàgines web sensibles ) amb HTML,CSS i Javascript. Segurament és el framework més popular i utilitzat i com a mínim el seu repositori github ([1]) és el repositori amb més estrelles ([2])

Gran part del seu èxit rau en que facilita la creació de pàgines responsive (responsive web design) és a dir pàgines que s'adapten correctament a dispositius mòbils. Aquest suport va ser introduït a la versió 2 i de fet a la versió 3 és de obligat compliment sent Bootstrap un sistema pensat primer per a mòbils.

Introducció

Bootstrap originalment anomenat Twitter Blueprint va ser desenvolupat per Mark Otto (@mdo) i Jacob Thornton de Twitter com una eina interna per a Twitter. El codi va ser alliberat com a Open Source el 19 d'Agost de 2011. El 31 de gener de 2012 va sortir la versió 2 i la versió 3 el 19 d'agost de 2013 sent aquesta una versió primer per a mòbils o el que és el mateix el disseny principal està pensat principalment per a mòbils (to i que evidentment funciona correctament amb altres tipus de dispositius) i un disseny flat

Mobile First Strategy

Vegeu Mobile First Strategy

Bootstrap 4

https://scotch.io/bar-talk/whats-new-in-bootstrap-4

Instal·lació

http://getbootstrap.com/getting-started/

Descàrregues

CDN:

Es poden utilitzar per exemple els de DNA

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


Getting started

Recursos:

NPM

Primer cal tenir instal·lat npm

$ mkdir bootstrap && cd bootstrap
$ npm install bootstrap --save

Bower

Primer cal tenir instal·lat Bower

$ mkdir bootstrap && cd bootstrap
$ bower install bootstrap --save

I us ha instal·lat a la carpeta bower_components:

 $ ls
bower_components
$ ls -l bower_components/
total 8
drwxrwxr-x 8 sergi sergi 4096 des  4 12:01 bootstrap
drwxrwxr-x 4 sergi sergi 4096 des  4 12:01 jquery

Laravel

Primer cal tenir instal·lat Laravel:

$ laravel new bootstrap

Bootstrap Grid System

Boostrap 3 suporta 4 mides de quadricules per a les columnes (xs: extra small | sm: small | md: medium | lg : large):

  • .col-xs-(numero de columnes): Pensat per a telèfons amb l'ampla del viewport inferior a < 768px
  • .col-sm-( numero de columnes): Pensat per a tablets. Mida ampla viewport entre 768px i 992 pixels. Nota: té sentit amb tablets en vertical en horizontal l'ampla del viewport sol ser més gran.
  • .col-md-( numero de columnes): Portàtils o desktops amb mides de pantalla entre 992px i 1200px
  • .col-lg-( numero de columnes): Qualsevol dispositiu amb ampla major de 1200px

Boostrap utilitza media queries (vegeu l'apartat media queries de [3]) per determinar en quin cas estem.

Podeu consultar el següent exemple:

http://acacha.org/~sergi/bootstrap-example/grid-ejemplo1.html

extret de [4]. Aquest exemple conté 4 files (rows) dins d'un container (el contenidor és obligatori i necessari). Cada fila té columnes de cadascuna de les mides indicades.

Instal·leu la extensió de Chromeview port dimensions de https://chrome.google.com/webstore/detail/viewport-dimensions/kchdfagjljmhgapoonapmfngpadcjkhk. Amb aquesta extensió si teniu un dispositiu amb un ample superior a 1200 px podeu fer més petita la finestra i veureu com canvien les files a mesura que arribeu als valors llindars de 1200px, 992px i 768px. L'única fila que sempre es mostra en horitzontal és la primera.

El codi és el següent:

<!doctype html>
<html lang="es">
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
	
	<meta name="viewport" content="width=device-width; initial-scale=1.0"> 
	<title>Proyecto web - Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<style>
		body {
			padding: 0 16px;
		}
		.container {
		  padding: 0 1em;
		}
		.row {
		  margin-bottom: 1.5em;
		}
		.row .row {
		  margin-top: 0.8em;
		  margin-bottom: 0;
		}
		div {
			text-align: center;
		}
		[class*="col-"] {
		  padding: 1em 0;
		  background-color: rgba(255,195,13,.3);
		  border: 1px solid rgba(255,195,13,.4);
}

.return {
  position: relative;
  display: block;
  margin: auto;
  font-family: 'Alegreya Sans', sans-serif;
  font-size: 18px;
  text-align: center;
  border: 2px solid #57bebb;
  padding: 0 15px;
  text-decoration: none;
  line-height: 40px;
  color: #57bebb;
  width: 200px;
  height: 40px;
}

.return:hover {
  color: tomato;
  border: 2px solid white;
}


	</style>

  </head>

<body>
  <div class="container">

    <!--  -->
	<div class="row">
	   <p>Dispositivos muy pequeños (Telefonos, anchura menor o igual a 767px)</p>
	   <div class="col-xs-4">col-xs-4</div>
	   <div class="col-xs-4">col-xs-4</div>
	   <div class="col-xs-4">col-xs-4</div>
	</div>
	
	<div class="row">
	   <p>Dispositivos pequeños (tablets, anchura mayor o igual a 768px)</p>
	   <div class="col-sm-4">col-sm-4</div>
	   <div class="col-sm-4">col-sm-4</div>
	   <div class="col-sm-4">col-sm-4</div>
	</div>
    
	<div class="row">
	   <p>Dispositivos medianos (ordenadores, anchura mayor o igual a 992px)</p>
	   <div class="col-md-4">col-md-4</div>
	   <div class="col-md-4">col-md-4</div>
	   <div class="col-md-4">col-md-4</div>
	</div>
	
	<div class="row">
	   <p>Dispositivos grandes (ordenadores, anchura mayor o igual a 1200px)</p>
	   <div class="col-lg-4">col-lg-4</div>
	   <div class="col-lg-4">col-lg-4</div>
	   <div class="col-lg-4">col-lg-4</div>
	</div>

         <div style="margin-top:80px">
            <a class="return" href="http://www.tutosytips.com/3-entendiendo-el-bootstrap-grid-system/">Volver al Tutorial</a>
         </div>
      
	</div> <!-- /container -->
  </body>
</html>


Recursos:

Column wrapping

Exemple interessant (Utilitzant funcionalitat Wrap):

<div class="container">
    <div class="row">
        <div class="col-sm-3 col-md-2"><!--Column one--></div>
        <div class="col-sm-9 col-md-8"><!--Column two--></div>
        <div class="col-sm-12 col-md-2"><!--Column three--></div>
    </div>
</div>

Recursos:

Column ordering

Progressive Enhancement

Utilitzar les opcions responsive utilities es pot determinar columnes que seran o no visibles depenen de si hi ha prou espai al dispositiu i per tant activar una millora progressiva de la web a mesura que tenim de més espai (vegeu Mobile First Strategy)

Recursos:

Responsive layouts examples

Vegeu també Responsive Layouts

Exemple sidebar i contingut:

layout-1.png

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

Recursos:

CSS

tables

Vegeu Bootstrap tables

Recursos:

Documentació

Scaffolding

Recursos:

Traducció anidocs al castellà

Plantilles

aka Templates/Bootstrap themes/Bootstrap templates

Admin templates

Landing Page:

Single page/one page:

Blog:

Portfolio/Projecte page:

Full page:

Components:

Ecommerce:

Webs:

Extensions

Mediawiki

Navegadors

Consulteu la taula de Browsers i sistemes operatius suportats a:

http://getbootstrap.com/getting-started/

Internet Explorer

Vegeu Internet Explorer. La versió mínima suportada és IE8 però cal posar un Conditional Comment:

 <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="../assets/js/html5shiv.js"></script>
		<script src="../assets/js/respond.js"></script>
		<![endif]-->

Recursos

Tutorials pas a pas

Landing Page desde zero:

Vegeu també

Enllaços externs