1

Whenever I try to invoke thumbnails per the twitter documentation, I just get black dots on the screen:

<ul class="thumbnails">
  <li class="span4">
    <a href="large.jpeg" class="thumbnail">
      <img data-src="http://placehold.it/330x230" alt="Large">
    </a>
  </li>

Am I doing something wrong here? I can only get something to show up using media-grid...which is strange since that's the old functionality, right?

EDIT: I still get black dots to the left of my thumbnails using media-grid, too. How do I turn those off, and why isn't the html I wrote working?

full code:

<html>
 <head>
         <meta charset="utf-8">
         <title>Walls</title>
         <link rel="stylesheet" href="http://flip.hr/css/bootstrap.min.css">
         <link rel="stylesheet" href="custo.css">

          <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <!--prettyphotty-->
          <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
          <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

 </head>
 <body>

 <br>



 <div class="container-fluid">
 <br>

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



<ul class="thumbnails">
  <li class="span4">
    <a href="large.jpeg" class="thumbnail">
      <img data-src="http://placehold.it/330x230" alt="Large">
    </a>
  </li>

  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
    </a>
  </li>

  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
    </a>
  </li>

</ul>



 </div><!-- .container -->

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script type="text/javascript" charset="utf-8"> <!--initialize prettyPhoto-->
     $(document).ready(function(){
     $("a[rel^='prettyPhoto']").prettyPhoto();
      });
    </script>

 </body>
</html>
4

2 回答 2

1

bootstrap 4 使用 img-fluid 来调整大小和 img-thumbnail 来换行

<ul class="thumbnails">
  <li class="span4">
    <a href="large.jpeg" class="img-fluid img-thumbnail">
      <img data-src="http://placehold.it/330x230" alt="Large">
    </a>
  </li>
</ul>
于 2020-04-02T19:04:30.143 回答
0

您为 Bootstrap 引用的样式表http://flip.hr/css/bootstrap.min.css没有thumbnail定义的类。

一旦您引用了当前版本的 Bootstrap，正确的结构将如下所示（直接取自：http: //twitter.github.io/bootstrap/components.html#thumbnails）：

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
    </a>
  </li>
  ...
</ul>

此外，从第 2 版开始......没有media-grid类（取自http://twitter.github.io/bootstrap/upgrading.html）：

以前的 .media-grid，现在只是 .thumbnails，我们已经彻底扩展了这个组件以供更多用途，同时保持开箱即用的整体简单性。

于 2013-04-19T22:34:22.107 回答