layout - contenedores - ¿Es posible crear un diseño tipo pinterest solo con Bootstrap?
masonry bootstrap (8)
Ahí tenemos un material llamado: bootstrap-waterfall:
http://mystist.github.io/bootstrap-waterfall/
Pero, de hecho, este complemento no necesita bootstrap ya que se trata de dependencias. Depende de si quieres usar bootstrap como marcas de tu pin o solo tienes que diseñarlo tú mismo.
Estoy tratando de entender esto desde hace bastante tiempo:
¿Es posible crear un diseño de pinterest solo con Twitter Bootstrap? Sé que hay plugins jQuery como Masonry, pero ¿hay forma sin ellos?
Gracias
Encontré esta solución, funciona dentro de bootstrap (funciona incluso sin definir tamaños de columna), no requiere javascript, lo inserté en un proyecto y funciona muy bien:
¡Te @katiejones !
Encontré una plantilla (gratuita) en http://bragthemes.com/demo/pinstrap/ . Se supone que tiene todo lo que estás pidiendo. Aunque no he tenido tiempo de echarle un vistazo.
Editar 2016-03-15 : Bootstrap 4 permite esto de la caja here . Todavía está en alfa, pero estamos llegando allí.
Para todos los que no quieran pasar por la molestia de la compatibilidad con navegadores cruzados, aquí hay una solución de PHP. Suponiendo que tiene sus datos en una matriz,
<?php $iColumns = 4;?>
<?php for($i=0; $i < $iColumns; ++$i):?>
<div class="span3">
<?php
$j=$i;
while( isset( $aData[$j] ) ):
$oItem = $aData[$j]
?>
<div class="thumbnail" style="margin-top:10px;">
<a href="">
<img src="" alt=""/>
</a>
<h3>title</h3>
<p>caption</p>
</div>
<?php
$j=$j+$iColumns;
endwhile;?>
</div>
<?php endfor;?>
Sé que mi respuesta es tarde. pero solo quería que esta pregunta común fuera actualizada. Descubrí 3 implementaciones más recientes.
- isotope . Encontré esto en el sitio web bootstrap. Funciona bien con infinite-scroll para crear infinitas páginas web de desplazamiento también.
- Salvattore . Esto se logra con CSS y JS puros. JS solo se usa para extraer datos.
- masonry.desandro.com . Esta es una implementación intensiva de JS. pero tiene sus propias características.
Sí, es posible pero con algunas limitaciones.
Principio
- Cada columna es un
div(osectiondepende del significado de su diseño) - Dentro de cada columna, cada tesela también es un
div, oimgetc., dependiendo de su diseño.
Práctica
Para hacer las columnas puede usar las siguientes técnicas:
-
floatlas columnas -
display: inline-blocklas columnas - Utilice la nueva API de caja flexible (las implementaciones no estándar se están infiltrando en los navegadores modernos)
- Use la nueva API de posicionamiento de la grilla (aunque evitaría esto por ahora ya que no es compatible en absoluto)
Luego coloque varios mosaicos ( div s) en cada columna. Nuevamente, dependiendo de su diseño / diseño, puede reemplazar los divisores de columna con ul s, y tener una lista de mosaicos ( li s). No puedo decir si eso es semánticamente correcto para su diseño.
Limitaciones
- Cambiar el tamaño de la página de Pinterest mantiene la posición general de la mayoría de los elementos, es decir, los elementos en la parte superior de una columna generalmente se mantienen cerca de la parte superior, incluso cuando el número de columnas se ajusta según el ancho del navegador; la solución pura de CSS no lo hará caja .
Enfrentamientos
- Si bien no es una solución perfecta, puede utilizar consultas de medios para influir en la posición de varios elementos.
Con el tiempo, uno podría acercarse bastante al diseño de Pinterest. Dicho esto, es probable que haya una buena razón por la que eligieron implementar dicho diseño con JavaScript.
EDITAR: Esto está ahora fuera de la caja en boostrap 4 here
Cosa segura. Me llevó un tiempo entrenar. ¡Espero que esto ayude!
Disculpas por el volcado de código pero es necesario para mostrar el funcionamiento de la grilla.
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/masonry.js"></script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/imagesLoaded.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</head>
<div class="container">
<div class="row masonry-container">
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolosit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipdolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolor ctetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipdolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolor ctetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
</div> <!--/.masonry-container -->
</div><!--/.tab-panel -->
<style type="text/css">
body {
padding-top: 50px;
}
.main-container {
padding: 10px 15px;
}
.p {
text-align: center;
}
</style>
<script type="text/javascript">
/* Demo Scripts for Making Twitter Bootstrap 3 Tab Play Nicely With The Masonry Library
* on SitePoint by Maria Antonietta Perna
*/
//Initialize Masonry inside Bootstrap 3 Tab component
(function( $ ) {
var $container = $(''.masonry-container'');
$container.imagesLoaded( function () {
$container.masonry({
columnWidth: ''.item'',
itemSelector: ''.item''
});
});
//Reinitialize masonry inside each panel after the relative tab link is clicked -
$(''a[data-toggle=tab]'').each(function () {
var $this = $(this);
$this.on(''shown.bs.tab'', function () {
$container.imagesLoaded( function () {
$container.masonry({
columnWidth: ''.item'',
itemSelector: ''.item''
});
});
}); //end shown
}); //end each
})(jQuery);
</script>
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>