Bootstrap

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:

http://getbootstrap.com/examples/grid/

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:

http://getbootstrap.com/css/#grid-example-wrapping

Column ordering

http://getbootstrap.com/css/#grid-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:

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

Recursos:

https://zellwk.com/blog/migrating-from-bootstrap-to-susy/

CSS

tables

Vegeu Bootstrap tables

Recursos:

http://getbootstrap.com/css/#tables

Documentació

Scaffolding

Recursos:

http://www.w3resource.com/twitter-bootstrap/grid-system-tutorial.php

Traducció anidocs al castellà

http://www.anidocs.es/bootstrap/docs/

Plantilles

aka Templates/Bootstrap themes/Bootstrap templates

Admin templates

Basic dashboard de bootstrap: http://getbootstrap.com/examples/dashboard/
AdminLTE (vegeu també Sleeping Owl i https://github.com/acacha/adminlte-laravel)
Plantilla Ace
Sb Admin v2: http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html (vegeu també Sleeping Owl)

Landing Page:

Exemple bàsic Bootstrap: http://getbootstrap.com/examples/carousel/
http://startbootstrap.com/template-overviews/landing-page/
http://www.hongkiat.com/blog/mobile-app-landing-pages/

Single page/one page:

Blog:

Blog bàsic de bootstrap: http://getbootstrap.com/examples/blog/
Blog amb Jekyll: http://ironsummitmedia.github.io/startbootstrap-clean-blog-jekyll/

Portfolio/Projecte page:

Exemple bàsic Bootstrap: http://getbootstrap.com/examples/carousel/
https://github.com/IronSummitMedia
http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/

Full page:

Components:

https://wrapbootstrap.com/themes/components

Ecommerce:

https://wrapbootstrap.com/themes/e-commerce

Webs:

Extensions

Fuelux

Mediawiki

Mediawiki Boostrap

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

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

Tutorials pas a pas

Landing Page desde zero:

Bootstrap

Contingut

Introducció

Mobile First Strategy

Bootstrap 4

Instal·lació

NPM

Bower

Laravel

Bootstrap Grid System

Column wrapping

Column ordering

Progressive Enhancement

Responsive layouts examples

CSS

tables

Documentació

Scaffolding

Traducció anidocs al castellà

Plantilles

Extensions

Mediawiki

Navegadors

Internet Explorer

Tutorials pas a pas

Vegeu també

Enllaços externs

Sobre nosaltres

Blog

Entrada blog 1

Entrada blog 2

Segueix-nos

Pàgines Germanes