web-dev-qa-db-fra.com

Est-il possible de créer une présentation de type pinterest avec Bootstrap uniquement?

J'essaie de comprendre cela depuis un certain temps déjà:

Est-il possible de créer une mise en page pinterest avec Twitter Bootstrap uniquement?

Merci

layouttwitter-bootstrapgridjquery-masonry
57
Matt

Trouvé un modèle (gratuit) sur http://bragthemes.com/demo/pinstrap/ . Il est supposé avoir tout ce que vous demandez. Je n'ai pas eu le temps de vérifier, cependant.

Edit 2016-03-15: Bootstrap 4 permet de sortir de cette boîte ici . Il est toujours en alpha, mais nous y arrivons.

58
Bernardo Siu

Trouvé cette solution, fonctionne dans bootstrap (fonctionne même sans définir la taille des colonnes), ne nécessite pas de javascript - je l'ai intégrée dans un projet et cela fonctionne à merveille:

http://www.bootply.com/118335

Vous bénisse @ katiejones !

18
Christopher G

EDIT: C’est désormais prêt dans boostrap 4http://v4-alpha.getbootstrap.com/components/card/#card-columns

Chose sûre. Il m'a fallu un peu de temps pour m'entraîner. J'espère que cela t'aides!

Toutes mes excuses pour le dump de code mais il est nécessaire de montrer que la grille fonctionne.

<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>
13
Sabba Keynejad

Oui, c'est possible mais avec certaines limitations.

Principe

  • Chaque colonne est une div (ou section en fonction de la signification de votre mise en page)
  • Dans chaque colonne, chaque mosaïque est également une div ou img etc. en fonction de votre conception.

Entraine toi

Pour créer les colonnes, vous pouvez utiliser les différentes techniques suivantes:

  • float les colonnes
  • display: inline-block les colonnes
  • Utilisez la nouvelle boîte flexible API (des implémentations non standard se glissent dans les navigateurs modernes)
  • Utilisez la nouvelle grille de positionnement de la grille (bien que je l’évite pour le moment car elle n’est pratiquement pas prise en charge)

Ensuite, placez différentes tuiles (divs) dans chaque colonne. Encore une fois, en fonction de votre conception/mise en page, vous pouvez remplacer les divisionnaires de colonnes par uls et disposer d'une liste de mosaïques (lis). Je ne peux pas dire si cela est sémantiquement correct pour votre conception.

Limites

  • Le redimensionnement de la page Pinterest conserve la position générale de la plupart des éléments, c’est-à-dire que les éléments situés en haut d’une colonne restent en haut, même lorsque le nombre de colonnes est ajusté pour la largeur du navigateur - la solution CSS pure ne le fera pas de la boîte.

Terrains de travail

  • Bien que la solution ne soit pas parfaite, vous pouvez utiliser les requêtes de média pour influencer la position de divers éléments.

Avec le temps, on pourrait être assez proche de la mise en page Pinterest - cela dit, il y a probablement une bonne raison pour laquelle ils ont choisi d'implémenter cette mise en page avec JavaScript.

10
Matt

Je sais que ma réponse est en retard. mais je voulais juste que cette question commune soit mise à jour. J'ai découvert 3 dernières implémentations.

  • isotope . Trouvé ceci sur le site de bootstrap. Fonctionne bien avec infinite-scroll pour créer également des pages Web à défilement infini.
  • Salvattore . Ceci est réalisé avec du CSS pur et JS. JS n'est utilisé que pour extraire des données.
  • masonry.desandro.com . Ceci est une implémentation intensive de JS. mais il a ses propres caractéristiques.
8
Jeyara

Là nous avons un truc nommé: bootstrap-waterfall:
http://mystist.github.io/bootstrap-waterfall/

Mais en réalité, ce plugin n’a pas besoin de bootstrap, c’est une dépendance. Cela dépend si vous voulez utiliser bootstrap en tant que balises de votre pin ou simplement le styler vous-même.

3
Liber

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

0
Priyanshu Kumar