Grid class

col-xs-*Extra small devicesPhones (<768px)
col-sm-*Small devicesTablets (≥768px)
col-md-*Medium devicesDesktops (≥992px)
col-lg-*Large devicesDesktops (≥1200px)

Media queries:

  • @media(max-width:767px){}
  • @media(min-width:768px){}
  • @media(min-width:992px){}
  • @media(min-width:1200px){}
<div class="container">
    <div class="row">
      <div class="col-xs-12 col-lg-6">
      <img src="http://lorempixel.com/300/300/sports/1">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis quaerat assumenda facere sit quas aperiam fugit a hic cupiditate alias.</p>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img src="http://lorempixel.com/300/300/sports/2">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis quaerat assumenda facere sit quas aperiam fugit a hic cupiditate alias.</p>
    </div>
</div>
Ver ejemplo funcionando

Imágenes responsive

Basta con añadirles el class .img-responsive.

Visible - Hidden

El class="visible-*" hace que un elemento sólo sea visible para un determinado tamaño de página

<span class="visible-lg"><h1>lg</h1></span></span>
<span class="visible-md"><h1>md</h1></span>
<span class="visible-sm"><h1>sm</h1></span>
<span class="visible-xs"><h1>xs</h1></span>
Ver ejemplo funcionando

Ejercicio

Hacer la siguiente página web responsive mediante bootstrap.

Meter toda la información en un div cuyo class sea container hará que el contenido se muestre centrado y con margen.

Espacio entre columnas

El estilo col-*-offset-1 añade una columna en blanco por la izquierda. La suma de puntos debe seguir siendo 12.

En general:
El siguiente estilo:
class="col-lg-3"

Quedaría así:
class="col-lg-2 col-lg-offset-1"

Ver ejemplo

Mobile First

Para algunas operaciones, cómo las que vienen a continuación de pull y push es fundamentar pensar primero en cómo se verá en móvil y luego empujar y tirar de los elementos para dejarlo cómo se verá en la pantalla del ordenador.

Cambiar elementos de sitio

Puedo mover un elemento x posiciones utilizando:
col-*-push-3
col-*-pull-3

Si muevo un elemento hacia la derecha (push), deberé traerme otro hacia la izquierda(pull) para que ocupe su lugar y la maquetación no quede descompensada.

Intercambiar las dos primeras columnas para tamaños de pantalla inferiores al mayor.

Ver ejemplo de pull y push

Ejercicio

Componentes

Tablas

Ver ejemplo

Uso de listas para breadcrumbs y menús

Ver ejemplo

Menu collapsable

La librería javascript de bootstrap utiliza jQuery, por tanto deberemos cargarlo antes que bootstrap:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Ver ejemplo

Menú desplegable

<li class="dropdown"><a href="#" data-toggle="dropdown">Servicios <span class="caret"></span></a>
	<ul class="nav navbar-nav dropdown-menu ">
		<li><a href="#">submenu</a></li>
		<li><a href="#">submenu</a></li>
		<li><a href="#">submenu</a></li>
	</ul>
</li>
Ver ejemplo

Menú multinivel

Bootstrap no soporta los menús multinivel. Para integrarlos, la solución más sencilla es usar la librería externa smartmenus.js:

Basta con cargar estos dos ficheros y eliminar los carets, ya que la librería los carga por sí sola

<script src="js/smartmenus.js"></script>
<script src="js/jquery.smartmenus.js"></script>

Tabs

<ul class="nav nav-tabs">
	<li><a href="#s1" data-toggle="tab">seccion1</a></li>
	<li><a href="#s2" data-toggle="tab">seccion2</a></li>
	<li><a href="#s3" data-toggle="tab">seccion3</a></li>
</ul>
<div class="tab-content">
	<div id="s1" class="tab-pane fade active in">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam ipsa at repudiandae facere cumque tenetur distinctio dolorum obcaecati, provident sed eligendi doloribus voluptates vero suscipit impedit accusantium, illum vitae a ad. Ipsum ab eos consectetur placeat temporibus quas dolorem, numquam velit quos, ipsa saepe voluptates, asperiores! Autem architecto nihil aliquam 
		</p>
	</div>
	<div id="s2" class="tab-pane fade">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, reprehenderit odio quisquam voluptatem ipsum blanditiis, nobis facere temporibus incidunt natus corporis, labore doloremque minus ducimus numquam id. Odio, quas, mollitia.
		</p>
	</div>
	<div id="s3" class="tab-pane fade">
		<p>Lorem ipsum dolor sit amet.</p>
	</div>
</div>
Ver ejemplo

Accordion

<div class="panel-group" id="accordion">
	<div class="panel panel-default">
		<div class="panel-heading">
			<div class="panel-heading">
				<h4 class="panel-title">
				<a href="#s1" class="accordion-toggle" data-toggle="collapse" data-parent="#acordion">Section 1</a>
				</h4>
			</div>
		</div>	
	</div> 
	<div id="s1" class="panel-collapse collapse in">
		<div class="panel-body">
			<p>Lorem ipsum dolor sit.</p>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<div class="panel-heading">
				<h4 class="panel-title">
				<a href="#s2" class="accordion-toggle" data-toggle="collapse" data-parent="#acordion">Section 1</a>
				</h4>
			</div>
		</div>	
	</div> 
	<div id="s2" class="panel-collapse collapse">
		<div class="panel-body">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae et, illum facere obcaecati, nihil saepe.</p>
		</div>  
	</div>
</div>
Ver ejemplo
icono de mandar un mail¡Contacta conmigo!
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?