64

私はかなり長い間、これを回避しようとしています：

Twitter Bootstrap だけで pinterest レイアウトを作成することはできますか? Masonry のような jQuery プラグインがあることは知っていますが、それなしでは方法がないのでしょうか?

ありがとう

4

9 に答える 9

67

http://bragthemes.com/demo/pinstrap/で (無料の) テンプレートを見つけました。それはあなたが求めているすべてを持っているはずです。しかし、それをチェックする時間がありませんでした。

編集 2016-03-15 : Bootstrap 4 では、ここですぐに使用できます。まだアルファ版ですが、私たちはそこに到達しています。

于 2013-01-27T20:41:39.810 に答える
10

はい、可能ですが、いくつかの制限があります。

原理

  • 各列はdiv(またはsectionレイアウトの意味に応じて)
  • 各列内の各タイルは、デザインに応じてdiv、またはその他になります。img

練習

列を作成するには、次のさまざまな手法を使用できます。

div次に、各列にさまざまなタイル ( ) を配置します。繰り返しますが、デザイン/レイアウトによっては、列の div を に置き換えてul、タイル ( li) のリストを持つことができます。それがあなたの設計にとって意味的に正しいかどうかについては言えません。

制限事項

  • Pinterest ページのサイズを変更すると、ほとんどの要素の一般的な位置が維持されます。つまり、列の上部にある要素は、ブラウザーの幅に合わせて列の数が調整されている場合でも、通常は上部近くにとどまります。純粋な CSS ソリューションは、ボックス。

回避策

  • 完全な解決策ではありませんが、メディア クエリを使用してさまざまな要素の位置に影響を与えることができます。

しばらくすると、Pinterest のレイアウトにかなり近づく可能性があります。とはいえ、JavaScript を使用してこのレイアウトを実装することを選択したのには、おそらく十分な理由があります。

于 2012-09-24T18:35:36.070 に答える
8

私は私の答えが遅いことを知っています。しかし、このよくある質問を更新したかっただけです。私は3つの最新の実装を見つけました。

  • 同位体。ブートストラップ Web サイトでこれを見つけました。無限スクロールとうまく連携して、無限スクロール Web ページも作成します。
  • サルヴァトーレ。これは純粋な CSS と JS で実現されます。JS はデータをプルするためだけに使用されます。
  • masonry.desandro.com。これは JS 集中型の実装です。しかし、それには独自の機能があります。
于 2014-12-10T04:37:54.867 に答える
4

そこには、bootstrap-waterfall という名前のものがあります:
http://mysist.github.io/bootstrap-waterfall/

しかし実際には、このプラグインは依存関係であるため、ブートストラップは必要ありません。ピンのマークアップとしてブートストラップを使用するか、自分でスタイルを設定するかによって異なります。

于 2015-05-29T02:49:40.820 に答える
0 

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

于 2018-07-03T15:49:08.740 に答える
-23

クロス ブラウザの互換性の問題を経験したくない人のために、ここに PHP ソリューションがあります。配列にデータがあると仮定すると、

<?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;?>
于 2013-03-11T13:04:12.687 に答える