2

私はDjangoを初めて使用し、Twitter Bootstrapのmedia-gridクラスで問題に遭遇しました。ギャラリーを表示する代わりに、通常の画像リストしか作成できません。

Windows XP で Django 1.4.1 で Bootstrap 2.2.1 を使用しています。Bootstrap ファイルをプロジェクト フォルダーにコピーし、Bootstrap のメディア グリッドクラスをテストするための非常に単純な HTML テンプレートを作成しました。私の目標は、データベースから画像の単純なギャラリーを視覚化することです。

media-gridクラスの正しい構文は、次のように定義されています。

<ul class="media-grid">
  <li>
    <a href="#">
      <img class="thumbnail" src="http://placehold.it/330x230" alt="">
    </a>
  </li>
  <li>
    <a href="#">
      <img class="thumbnail" src="http://placehold.it/330x230" alt="">
    </a>
  </li>
</ul>

ただし、単純な HTML テンプレートに同じ正確なコードをコピーして貼り付け、views.pyファイルのrender_to_responseコマンドを介してロードすると、結果として表示されるページには、1 行に 1 つずつ、通常のすべての画像の前にドット (すべての標準リストと同様)。同じプロジェクトで Bootstrap のクラスを Django で使用できます。これにより、css ファイルを正しくインポートしていないことを除外できます。

Django はmedia-gridの構文を気にせずにページを解釈し、画像のリストをレンダリングするような気がします。

私が使用している単純な HTML ファイルは次のとおりです。

<!DOCTYPE html> 
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{% block title %}To be defined{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

<!-- Le styles -->
<link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet">
<style>
  body {
      padding-top: 80px;        
      padding-bottom: 40px;     
  }
</style>
<link href="{{STATIC_URL}}css/bootstrap-responsive.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 <script src="{{STATIC_URL}}js/jquery-1.8.1.min.js" type="text/javascript"></script>
   {% block extrahead %}
   {% endblock %}
 <script type="text/javascript">
   $(function(){
   {% block jquery %}
   {% endblock %}
   });
 </script>
</head>

<body>

  <ul class="media-grid">
    <li>
      <a href="#">
        <img class="thumbnail" src="http://placehold.it/330x230" alt="">
      </a>
    </li>
    <li>
      <a href="#">
        <img class="thumbnail" src="http://placehold.it/330x230" alt="">
      </a>
    </li>
  </ul>


</body>
</html>

別の方法で書き留めようとしましたが、2日間オンラインで解決策を探すことができませんでした. このコードが機能しない理由がわかる場合は、お知らせください。

よろしくお願いします。

4

1 に答える 1

1

v1.4より新しいバージョンのBootstrapを使用している場合、「media-grid」コンポーネントの名前は「Thumbnails」に変更されています。

http://twitter.github.com/bootstrap/components.html#thumbnails

于 2012-12-03T22:22:03.023 に答える