Est-il possible de créer un pinterest-comme la mise en page avec Bootstrap seulement?

Je suis en train de l'obtenir ma tête autour de cela fait déjà quelques temps maintenant:

Est-il possible de créer une Mise en page pinterest avec Twitter Bootstrap seulement?
Je sais qu'il existe des Plugins jQuery comme la Maçonnerie, mais il n'est pas sans eux?

Grâce

Quel est le problème avec la Maçonnerie ou sa plus grande soeur Isotope? Les gens sont à mettre en œuvre facilement mpezzi.github.com/bootstrap_isotope ou maurizioconventi.com/2012/06/19/... ou pknopf.com/blog/...
Important à noter: toute pure CSS solution (à compter de 2016) permettra de définir les éléments du haut vers le bas, pas gauche à droite. Le Pinterest de mise en page montre le plus récent apparaissant en premier, c'est à dire de gauche à droite, ce qui ne peut pas être fait avec du pur CSS.

InformationsquelleAutor Matt | 2012-09-24

61

Trouvé un (gratuit) modèle à http://bragthemes.com/demo/pinstrap/. Il est censé avoir tout ce que vous demandez. N'ai pas eu le temps de vérifier it out, si.

Modifier 2016-03-15: Bootstrap 4 permet de sortir de la zone de ici. C'est encore en alpha, mais nous y arrivons.
- Pas de problème. Ravi de vous aider.
- Utilise javascript pour réaliser le positionnement, pas de bootstrap.
InformationsquelleAutor Bernardo Siu
19

Trouvé cette solution, travaille au sein de bootstrap (fonctionne même sans la définition de la taille de colonne), n'a pas besoin de javascript -- je l'ai attaché à un projet, et il fonctionne à merveille:

http://www.bootply.com/118335

Vous bénisse @katiejones!
- Une superbe solution. Mais celui qui n'est pas de la croix-navigateur compatible.
- Quelle est la solution pour IE ?
- C'est une jolie réponse. +1 de moi.
- Fonctionne sur le Bord trop
InformationsquelleAutor Christopher G

EDIT: C'est maintenant hors de la boîte, dans bootstrap 4 http://v4-alpha.getbootstrap.com/components/card/#card-columns

Chose Sûre. M'a fallu du temps pour travailler sur. Espérons que cette aide!

Excuses pour le code dump, mais il est nécessaire pour afficher la grille de travail.

<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>

InformationsquelleAutor Sabba Keynejad

10

Oui, c'est possible, mais avec certaines limitations.

Principe
- Chaque colonne est un div (ou section selon le sens de votre mise en page)
- À l'intérieur de chaque colonne, chaque tuile est aussi un div, ou img etc. en fonction de votre conception.
Pratique

Pour rendre les colonnes, vous pouvez utiliser les différentes techniques:
- float les colonnes
- display: inline-block les colonnes
- Utiliser le nouveau flexible box API (non-standard des implémentations se glissent dans les navigateurs modernes)
- Utiliser le nouveau positionnement de la grille de l'API (bien que je préfère éviter pour le moment car il est pas pris en charge pas du tout)
Placez les différents carreaux (divs) dans chaque colonne. Là encore, selon votre conception/mise en page vous pouvez remplacer la colonne-divs avec uls, et avoir une liste de tuiles (lis). Je ne peux pas parler pour savoir si c'est sémantiquement correct pour votre conception.

Limites
- Le redimensionnement de la page Pinterest maintient la position générale de la plupart des éléments c'est à dire des éléments au sommet d'une colonne reste généralement vers le haut, même quand le nombre de colonnes est adapté à la largeur du navigateur - la pure CSS solution à ne pas faire hors de la boîte.
Des Solutions De Rechange
- Pas une solution parfaite, vous pouvez utiliser les media queries à l'influence de la position des différents éléments.
Avec un peu de temps, on pourrait obtenir assez proche de la mise en page Pinterest - cela dit, il y a probablement une bonne raison pour laquelle ils ont choisi de mettre en œuvre ladite mise en page avec du JavaScript.
- sons assez épuisant. Après quelques recherches, je pense que le JS est la Solution de chemin à parcourir...
- Bien que cette solution n'est pas encore possible car il manque encore de prise en charge du navigateur - même ses plus d'un an depuis votre réponse - c'était ce que je voulais savoir, mais personne ne parle de lui. Vraiment très heureux de connaître flexible box api et css grilles. Merci pour votre réponse.
InformationsquelleAutor Matt
8

Je sais que ma réponse est tardive. mais je voulais juste cette question commune à être mise à jour. J'ai trouvé 3 dernières implémentations.
- isotope. Trouvé ceci sur bootstrap site web. Fonctionne bien avec infinite scroll de construire infini défilement des pages web trop.
- Salvattore. Ceci est réalisé avec de la pure CSS et JS. JS est seulement utilisé pour extraire les données.
- masonry.desandro.com. C'est un JS intensive de mise en œuvre. mais elle a ses propres caractéristiques.
InformationsquelleAutor Jeyara
3

Nous avons là un truc nommé: bootstrap-cascade:

http://mystist.github.io/bootstrap-waterfall/

Mais en fait, ce plugin n'a pas besoin de bootstrap comme ses dépendances. Il dépend de vous si vous voulez utiliser bootstrap que votre code pin de majorations ou juste le style de vous-même.

InformationsquelleAutor Liber

HTML:

<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>

InformationsquelleAutor Priyanshu Kumar

-23

Pour tous ceux qui ne veulent pas envie de passer par les tracas de la compatibilité du navigateur, voici une solution PHP. En supposant que vous avez vos données dans un tableau,
```
<?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;?>
```
- Ceci est en contradiction avec le but de l'utilisation d'un cross-browser outil comme Bootstrap, et l'utilisateur n'a pas de conseiller s'il avait accès à de script côté serveur.
- Eh bien, je ne vois pas comment ma solution contredit l'objectif de bootstrap. J'utilise bootstrap colonne de la classe en elle. j'ai utilisé ce même code pour un de mes projets et il fonctionne très bien. lorsque vous posez une question à propos de la mise en œuvre de gratuitement un framework comme bootstrap, il est "compris" que la personne a eu accès au serveur dans 99% des cas
InformationsquelleAutor Rakesh

Vous devez vous connecter pour publier un commentaire.

Principe

Pratique

Limites

Des Solutions De Rechange