2

我对Django很陌生，我遇到了Twitter Bootstrap的媒体网格类的问题：我只能制作普通的图像列表，而不是显示画廊。

我在 Windows XP 上使用带有 Django 1.4.1 的 Bootstrap 2.2.1。我将 Bootstrap 文件复制到我的项目文件夹中，并制作了一个非常简单的 HTML 模板来测试 Bootstrap 的媒体网格类。我的目标是从我的数据库中可视化一个简单的图像库。

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命令加载它，则生成的显示页面仅包含一个正常的图像列表，每行一个，正常每个图像前的点（如在每个标准列表中）。我可以在同一个项目中将 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

如果您使用的 Bootstrap 版本高于 v1.4，则“媒体网格”组件已重命名为“缩略图”。

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

于 2012-12-03T22:22:03.023 回答